Back to contents

JetSmartFilters. How to apply the filters to only one widget if the page contains several of them

In this tutorial, you will have a closer look at JetSmartFilters plugin functionality and especially how to apply the filters to only one widget if the page contains several of them.

If you have, for example, two different listing grid widgets by the JetEngine plugin on the page, let’s say one with publications and the other one with authors, and now you need to apply different search filters for them. How can you do that? Let’s see!

Сreating a filter

Step 1 – Open your WordPress Dashboard and click the Smart Filters option on the menu panel on the left.

Smart filters in WP Dashboard

Step 2 – Now you can see the Smart Filters screen, where you have to click the Add New button at the top to create a new filter.

Step 3 – Give your new filter a name in the Enter title here field. Let it be a Search Filter 1.

Filter labels and settings for the new filter

Step 4 – Move on to the Filter Labels block and fill in the Filter Label and Active Filter Label fields.

Step 5 – Navigate to the Filter Settings block and select the filter type in the corresponding field. In our case its Search.

Filter Settings block

Step 6 – Type in the Placeholder which can be Search for….

Step 7 – The Search by dropdown allows you to choose how the search is implemented: by default WP search or by custom field. In our case, we use the default WordPress search.

Step 8 – Click the Publish button to publish this filter. And now create the second search filter which will be called Search Filter 2.

Adding the filters on the page

Step 1 – Look for the Search Filter in the Elementor panel on the left, drop two of them next to each of the listings.

Search Filter in the Elementor panel

Step 2 – Now move on to the first one and open its settings. Here you have to select the type of filter in the Select Filter dropdown. In our case, it’s a Search Filter 1.

Step 3 – In This filter for dropdown select the JetEngine option, because the listings grid has been created with the help of this plugin.

Step 4 – Proceed to the second Search Filter widget and in its settings Select Filter as Search filter 2.

Step 5 – In This filter for dropdown, select JetEngine as well.

Once we have done that, you can see that there are two filters on our page and two listings available. As soon as you type anything in the Search filed of one of the filters you’ll notice that the search results will be applied to both of the listings. To avoid that you have to specify the widget you want the particular Search filter to be applied to.

Specifying listings

Step 1 – Click the pencil icon at the top-right corner of the first listing grid to open the Listing Grid Settings.

Step 2 – Now open the Advanced tab in the Elementor panel on the left and find the CSS ID field. Make up the ID for this grid. Let it be grid-1.

Advanced tab in the Elementor panel

Step 3 – Click the Search Filter widget again and in the Content tab find the Query ID field. Now paste here the ID which you gave to the first listing grid-1.

Content settings in Search Filter widget

Step 4 – Now repeat the same process with the second listing grid, but make up another ID, e.g. grid-2. Now you have connected listing grids with the specific filters!

You are done! Watch the video to see everything in action!