Example Instantsearch Widgets with WooCommerce Attributes.

Terminology

Indexed Algolia Object: A complete representation of a WooCommerce product with all the details indexed by WP Search with Algolia and configured product details included by WP Search with Algolia Pro.
Object property: An individual part of the Algolia object. In our example, “sku” is the property, and “DABULLS” is the property value. Example: “sku”: “DABULLS”
InstantSearch Widget: A javascript powered UI element that allows users to refine their current search.

Example indexed Algolia WooCommerce Product object

{
  "objectID": "73-0"
  "post_id": 73,
  "post_type": "product",
  "post_type_label": "Products",
  "post_title": "Men's Chicago Bulls Mitchell & Ness Red/Black Hardwood Classics Split Pullover Hoodie",
  "post_excerpt": "",
  "post_date": 1679941778,
  "post_date_formatted": "March 27, 2023",
  "post_modified": 1680013386,
  "comment_count": 1,
  "menu_order": 0,
  "post_author": {
    "user_id": 3,
    "display_name": "[email protected]",
    "user_url": "",
    "user_login": "[email protected]"
  },
  "images": {
    "thumbnail": {
      "url": "https://lab.algolia.test/wp-content/uploads/2023/03/black-chicago-bulls-hardwood-classics-split-pullover-hoodie_pi5176000_altimages_ff_5176737-8624c1a10-150x150.png",
      "width": 150,
      "height": 150
    }
  },
  "permalink": "https://lab.algolia.test/product/mens-chicago-bulls-mitchell-ness-red-black-hardwood-classics-split-pullover-hoodie/",
  "post_mime_type": "",
  "taxonomies": {
    "product_type": [
      "simple"
    ],
    "product_visibility": [
      "rated-5"
    ],
    "product_cat": [
      "Hoodies"
    ],
    "pa_size": [
      "Large",
      "Medium",
      "Small"
    ]
  },
  "taxonomies_hierarchical": {
    "product_cat": {
      "lvl0": [
        "Clothing"
      ],
      "lvl1": [
        "Clothing > Hoodies"
      ]
    }
  },
  "is_sticky": 0,
  "sku": "DABULLS",
  "short_description": "",
  "total_sales": 0,
  "total_ratings": 1,
  "average_rating": "5.00",
  "price": 109.99,
  "price_formatted": "<span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">&#36;</span>109.99</bdi></span>",
  "sale_price": 76.99,
  "sale_price_formatted": "<span class=\"woocommerce-Price-amount amount\"><bdi><span class=\"woocommerce-Price-currencySymbol\">&#36;</span>76.99</bdi></span>",
  "currency_symbol": "$",
  "content": "Your Chicago Bulls spirit is noticeable year-round when you sport this Mitchell & Ness Split pullover hoodie during cooler months. It features a vintage Hardwood Classics design with eye-catching Chicago Bulls graphics. Plus, a midweight construction keeps you warm from tip-off to the final whistle.",
  "record_index": 0,
}

Product Categories

The DOM container ID will need to match up with the container object value for the widget used

DOM container markup

Place where you wish the widget to appear:

<div id="facet-product-categories"></div>

Widget examples

refinementList

refinementList Widget Docs

instantsearch.widgets.refinementList({
    container: '#facet-product-categories',
    attribute: 'taxonomies.product_cat',
    operator: 'and',
    limit: 15,
    sortBy: ['isRefined:desc', 'count:desc', 'name:asc'],
}),

hierarchicalMenu widget

Note that we are using the taxonomies_hierarchical property from our example object, because that property represents a hierarchical taxonomy.

hierarchicalMenu Widget Docs

instantsearch.widgets.hierarchicalMenu({
    container: '#facet-product-categories',
    separator: ' > ',
    sortBy: ['count'],
    attributes: [
        'taxonomies_hierarchical.product_cat.lvl0',
        'taxonomies_hierarchical.product_cat.lvl1',
        'taxonomies_hierarchical.product_cat.lvl2'],
}),

Price

The DOM container ID will need to match up with the container object value for the widget used

DOM container markup

Place where you wish the widget to appear:

<div id="facet-prices"></div>

Widget examples

numericMenu

numericMenu Widget Docs

instantsearch.widgets.numericMenu({
    container: '#facet-prices',
    attribute: 'price',
    items    : [
        {label: 'All'},
        {label: 'Less than $40', end: 40},
        {label: 'Between $40 - $75', start: 40, end: 75},
        {label: 'More than $75$', start: 75},
    ],
}),

rangeInput

rangeInput Widget Docs

instantsearch.widgets.rangeInput({
    container: '#facet-prices',
    attribute: 'price',
    max: 999, // You will want to set a sensible maximum around highest product price.
}),

rangeSlider

rangeSlider Widget Docs

instantsearch.widgets.rangeInput({
    container: '#facet-prices',
    attribute: 'price',
    max: 999, // You will want to set a sensible maximum around highest product price.
}),