How to Build a WooCommerce Attributes 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.

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.

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.

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.

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

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.