Adding Multi-Level Filtering to Articles and Products in Elementor Tutorial

In this tutorial, we show how the Elementor hit the nail on the head Unlimited Elements Plugin to add multi-level filters to products or posts. This article is based on the WooCommerce Product Grid with the "Tab Filters" widget as an example. This is a common application scenario. In fact, multi-level filtering is also applicable to many types of articles, galleries and other content.

Below is a detailed step-by-step guide to implementing multi-level filtering:

Step 1: Setting up categories and subcategories

Before you start, set up categories and subcategories for the article or product and assign them to the correct categories.

This allows the filter to display content according to a preset hierarchical logic.

Step 2: Install the required widgets

First we need to installUnlimited Elements Plug-ins.

This example uses the Tab Filters Gadgets and WooCommerce Product Grid Gadgets.

Open the Unlimited Elements Widget Library and search for these two widgets. When you hover over the widgets, you will see an "Install" button, click on it to complete the installation.

Step 3: Add the product grid to the page

Add the WooCommerce Product Grid Widget and set the product query criteria. For example, you can display only products under the "Men's" or "Women's" category.

Note that the Term Relation is set to "OR" when setting up the query, otherwise the results will not be displayed correctly in the grid when multiple categories are selected.

Before continuing to the next step, open the Product Grid widget in the Ajax filtration functionThe

Step 4: Enable Filtering

Enable Ajax Filtering in the Gadget Settings of the Product Grid, as shown here.

Step 5: Add the main filter

Drag a Tab Filters widget onto the page and set its Filter Role to Main filter (Main)The

Then go to the "Terms Selection" section and customize the query to show the categories you want to display in the main tab, such as "Men's Clothing", "Women's Clothing ".

Step 6: Add sub-filters

Below the main filter, add another Tab Filters widget and set its "Filter Role" to ChildThe

Then go to the "Term Selection" section and configure which subcategories you want to display. In this example, select "Men" as the parent category and check the "Show Children Of" box.

With this setup, the subfilterwill be dynamically updated based on the selection of the main filtercategorizationTags.

summarize

After completing the settings, preview the page to test whether the multi-level filtering function works as expected. When you click on the main category (e.g. "Men's Clothing"), the corresponding subcategories will be dynamically displayed below; when you click on a subcategory, the product grid will automatically filter out the matching products.

By following these steps, the Elementor In the implementation of multi-level filtering function, so that the page content display more organized, and facilitate visitors to quickly find the target information.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off