fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

February Updates
Currency Converter Cover
Layers Widget

How to Add Multi-Level Filtering for Post and Products in Elementor

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

All
Men
Women
Coats
Jeans
Shirts
Shoes
Coats
Jeans
Shirts
Shoes
Jeans
$89.99
$71.99
Details
Shoes
$129.99
$116.99
Details
Coats
$299.99
$254.99
Details

Multi-Level Filter Video Tutorial

Learn more about filters by visiting the Tabs Filter Demo and the Tabs Filter Docs.

View More Related Blog Posts

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!