Help Center

How to Build a WooCommerce Attributes Hierarchical Filter

How to Build a WooCommerce Attributes Hierarchical Filter

This tutorial will teach you how to create a product attributes hierarchical filter using the JetSmartFilters plugin.

Preparations

In this tutorial, I’ll show how to filter WooCommerce products by categories and attributes using a hierarchical filter. So, firstly we need to add categories and attributes for products. You can find out how to do this from this tutorial.
Note, that you’ll need to add Variable Products to filter by attributes.
Then, navigate to the Shop template and display your products with the help of the Products Grid widget.

Creating Hierarchical Filter

Creating hierarchical filter with select filter type

First of all, navigate to Smart Filters > Add New. Here you can give your filter a name, label and active filter label.
Then, you need to choose the Select filter type and enable the “Is hierarchical” option to proceed.

creating a hierarchical filter

Adding filter hierarchy

After that, you need to add a filter hierarchy. A hierarchy can be built both on the basis of one taxonomy and on the basis of a combination of several. If it is based on one, then when you select the top-level option at the next level, the child terms of the selected one will be displayed.
If the hierarchy consists of several taxonomies, then at each next level only elements that correspond to the combination of previously selected ones will be available.

Things to know

Please note, that filter hierarchy is available only for the Select filter type and only for taxonomy.

So, you can add labels and placeholders and choose the needed taxonomy from the drop-down. You need to set the hierarchy in the order you would like to filter your products.

adding filter hierarchy

Don’t forget to click on the Publish button to save the changes.

Adding select filter to shop page

Afterward, open your Shop page and drag-n-drop the Select filter to the needed section. In the filter settings choose the filter you’ve selected before and apply it to the JetWooBuilder Products Grid widget.

select filter settings

I’ve also enabled the Indexer and Show Counter options in the filter settings to show the number of products in categories and attributes.

enable indexer and counter options

You can learn how to set an Indexer option for filter from this tutorial.
When you’re done, click on the Publish button.

Check how filter works

The last step is to preview the changes and see how the Hierarchical filter works.

Now you know how to create hierarchical filters easily for taxonomies with the help of JetSmartFilters and JetWooBuilder plugins.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.