Search Filter Overview
This tutorial uncovers the way of creating a Search filter with the help of the JetSmartFilters plugin in the Elementor editor.
JetSmartFilters is a plugin that adds easy-to-use AJAX filters to the pages built with Elementor, which contains the dynamic listing. The 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 a listing.
Let’s proceed to create a Search filter with the JetSmartFilters plugin.
Log into your WordPress Dashboard, navigate to the Smart Filters tab, and hit the “Add New” button. You will need to fill in such fields as Name and Filter Labels and choose the “Search” option in the Filter Type drop-down menu.
In the Search by the 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 do 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.
Apply Filter to 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 the “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 the JetSmartFilters plugin.