Back to contents

JetSmartFilters: How to Assign the Filter to a Specific Widget

 

 

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 into that process!

1 Step — Create a filter

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

2 Step — Place the widget to the page

Open the needed page in Elementor, place two different Listing Grids there, and after customizing them, drag-n-drop two different Search filter widgets.

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

In the Content settings tab select the first filter you created and choose the “JetEngine” option in This filter for section.

JetSmartFilters.-Edit-Search-Filter-1

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

3 Step — Assign the filter to the widget

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

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 there the ID that you gave to this Listing Grid.

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

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!