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.
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.
In the Content settings, you have to select your filter and choose “JetEngine” option in This filter for section field.
After styling the filter and the Grid – click on the “Publish” button and try your filter out.
Congrats! Now you know how to create a Search filter with JetSmartFilters plugin.