Copy discount code:

croco b-day main image left part croco b-day main image center part croco b-day main image right part
Expires In
croco b-day left image
croco b-day right image

Help Center

How to Assign a Filter Widget to a Specific Listing Grid

How to Assign a Filter Widget to a Specific Listing Grid

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

With the 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!

Create 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.

search filter for listing grid

Place Widget to 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.

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.

search filter editing in Elementor

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

Assign Filter to 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.

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.

query id for search filter

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

When you’re done with customization, click on the Publish button.

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

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.