Back to contents

JetSmartFilters. How to specify the widget for which to apply the JetSmartFilters widget’s filter

Get to know how to specify the widget for which to apply widget’s filter with the help of JetSmartFilters plugin.

With JetSmartFilters plugin you can use AJAX filters to filter Custom Posts and WooCommerce products. Now your visitors will be able to find the needed post or product faster and easier.

From this tutorial, you will learn how to specify the widget for which to apply the widget’s filter. So, let’s dive in into that process!

Specifying the widget for which to apply the filter

Step 1 — Firstly, navigate to Smart Filters in your WordPress Dashboard. Here you need to create two different filters.

Fill the fields with the Name, Filter Label, and Active Filter Label, and choose Search Filter Type. Also, if you want to filter by Default WordPress search you leave it as it is, or if you want to filter by some values from the Custom Fields or by Query Variables, so you choose another option.

When you’re done click on the Publish button. The difference between the first filter and second will be only in the name and label name.

JetSmartFilters.-Search-Filter-for-Listing-Grid

Step 2 — After that, open the needed page in Elementor, place two different Listing Grids and drag-n-drop two different Search filters.

JetSmartFilters.-Listing-Grids-and-Search-Filters-in-Elementor

Step 3 — In the Content settings for the Search filter select your filter and choose JetEngine in the This filter for section.

JetSmartFilters.-Edit-Search-Filter-1

Then, do the same for the second Search filter widget.

JetSmartFilters.-Edit-Search-Filter-2

Step 4 — To make the filter only to search in one Listing Grid, not in both, you need to specify to what widget you want this search filter to work. To do that, click on the Listing Grid and navigate to Advanced settings and in the CSS ID field type in the specific ID, for example, “grid-1”.

JetSmartFilters.-CSS-ID-for-Listing-Grid

Then, click on the Search widget that you want to work for this Listing Grid. In the Content tab find the Query ID field and paste the ID that you gave to this Listing Grid.

Afterward, repeat the same process with the second Listing Grid and Search Filter.

Step 5 — When you’re done with customization click on the Publish button and then on the preview to see how filters work.

JetSmartFilters.-Preview

Now you know how to specify the widget to which to apply the JetSmartFilters widget’s filter. Well done!