Back to contents

JetSmartFilters: How to Create Search Filter

This tutorial uncovers the way of creating a Search filter with the help of JetSmartFilters plugin in Elementor editor.

JetSmartFilters is a plugin that adds easy-to-use AJAX filters to the pages built with Elementor which contain the dynamic listing. JetSmartFilters plugin provides seven different widgets for applying filters.

The Search widget is one of them. You can use this filter to allow visitors to search for the matching results manually by inputting the needed words into the Search field.

Please, note, that in order to use JetSmartFilters you would also need JetEngine or JetWooBuilder plugins to showcase the product or post listing.

Let’s proceed to creating a Search filter with JetSmartFilters plugin.

1 Step — Create a filter

Log into your WordPress Dashboard, navigate to the Smart Filters tab and hit the “Add New” button. You will need to fill such fields as Name and Filter Labels and choose the “Search” option in Filter Type drop-down menu.

In the Search by bar you will have two variants to choose from. The Default WordPress search will apply a default search to this filter. And By Custom Field option will allow the users to make searches in fields mentioned in the Query Variable text area.

As mentioned, in the Query Variable you’ll need to define the name of the field you want the filter to search in. When you’re done with this, click on the “Publish” button.

Filter labels, Filter Settings and Query Settings

2 Step — Apply the filter to the page

Open the page or post you want to apply a Search filter to and place a Listing Grid there. It has to be filled with the publications that have a custom field you typed in the Query Variable bar. Drag and drop the Search filter widget to the needed section.

search filter widget

In the Content settings, you have to select your filter and choose “JetEngine” option in This filter for section field.

Content settings in Search filter widget

After styling the filter and the Grid – click on the “Publish” button and try your filter out.

Search filter with JetSmartFilters plugin

Congrats! Now you know how to create a Search filter with JetSmartFilters plugin.