Back to contents

JetSmartFilters: How to Build a WooCommerce Attributes Hierarchical Filter

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

Learn how to create a hierarchical filter with the help of JetSmartFilters and JetWooBuilder plugins. This is a really great feature when you want to create filters for your shop and you have a lot of products to filter. In this tutorial, I’ll show how to create a hierarchical select filter for products to filter them by categories and attributes, but you can also apply the hierarchical filter for taxonomies created with JetEngine 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

1 Step — Creating hierarchical filter with Select filter type

First of all, navigate to the 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

2 Step — 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.

ATTENTION! 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.

3 Step — Adding the Select filter to the 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.

4 Step — Check how the filter works

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

Hierarchical filter gif

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