Back to contents

JetSmartFilters. How to create a Search filter

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

 

To create a Search filter, you’ll need JetSmartFilters plugin first. 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.

Reading this tutorial will teach you how to create a Search filter with JetSmartFilters plugin.

Creating a Search filter

Step 1 — Firstly, log into your WordPress Dashboard and navigate to Smart Filters > Add New. Then, you will need to fill such fields as Name and Filter Labels, choose Search Type and Search by Custom Field.

Also, in the Query Variable, you’ll need to set queried filed key (for us it’s “country”). When you’re done with this, click on the Publish button.

Filter labels, Filter Settings and Query Settings

Step 2 — After that, open the Post in which you want to use the Search filter. In the Custom field (for us it’s “Country”) set the name of the filter (ex. Poland), and click on the Update button.

Custom field (for us it’s “Country”) set the name of the filter (ex. Poland)

Step 3 —The next step is to filter some publications using the newly created filter. You’ll need to create listing items in advance and show them with the help of Listing Grid widget.

So, after you’ve created a Listing Grid with your publications that have a custom field with some values you need to drag and drop the Search filter widget to the needed section.

drag and drop the Search filter widget to the needed section

Step 4 — In the Content settings, you have to select your filter and choose JetEngine in This filter for section field.

Content settings in Search filter widget

Step 5 — The last step is to 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.