In this article, we will show you how to add multi-level filters to your products or posts inside of Elementor using Unlimited Elements widgets. For the example today we chose to show the Tab Filters widget with the WooCommerce Product grid as a common use case even though multi-level filters can be set up with many types of post widgets and even galleries inside of Unlimited Elements widget library. Below you can find a detailed guide on how to create a multi-level filter step by step.
Step 1:
Setup Categories and Sub Categories
Before getting started you will need to set up your categories and subcategories inside of your posts or products. Don’t forget to assign the post or products to the specific categories they should be assigned to.
Step 2:
Install Widgets
In the example today we will use the Tab Filters widget and the WooCommerce grid widget. To install the widgets search for them inside of Unlimited Elements widget library and hover over them. Once you hover over the widget you will see a install button.
Step 3:
Add Products Grid to Page
The next step is to add the WooCommerce product grid to a page and set up the product query so it shows the correct products in the grid. In the example below you can see I have chosen to show only products that are assigned to the Men or Women categories. Don’t forget to set the term relation to “or” other wise you will not see the products in the grid when selecting more than one term in your query.
Before progressing to the next step you need to turn on Ajax filters for the grid as shown in the screenshot below.
Step 4:
Enable Filtering
Turn on Ajax filters for the grid as shown in the screenshot below.
Step 5:
Add Main Filter
Add an instance of the Tabs Filter to the page and set the filter role to “Main”
Then navigate to the terms selection section and customize your query to show the exact terms you want to show in your main tabs filter.
Step 6:
Add Child Filter
Under the main filter add an instance of the Tabs Filter to the page and set the filter role to “Child”
Then navigate to the terms selection section and customize your query to show the exact terms you want to show in your child filter. In this case I chose to include “Children Of” my selected parent and I selected “Men” as the parent term.
Now it’s time to preview the page to check the filter is working as expected.
Live Demo
Multi-Level Filter
Multi-Level Filter Video Tutorial
Learn more about filters by visiting the Tabs Filter Demo and the Tabs Filter Docs.
