Help Center

Search Filter Overview

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.

Create Filter

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.

filter labels, filter settings and query settings

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.

search filter widget

In the Content settings, you have to select your filter and choose the “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 the JetSmartFilters plugin.

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.