Back to contents

JetSmartFilters. How to use the Select filter to filter publications or products

Find out from this tutorial how to use the Select filter to filter publications or products with the help of JetSmartFilters plugin.

The Select filter of the JetSmartFilters plugin is used for displaying select options with the custom values of the properties of the product from which the user of your site can choose to filter the posts or products on the page.

Creating the Select filter

1 Step– First of all, you should proceed to the WP Dashboard > Smart Filters > Add new option.

2 Step – In the following screen, you should enter the name of the new filter.

3 Step – In the Filter Settings > Filter Type dropdown menu you should choose the Select one.

4 Step – Next, in the Data Source dropdown you should choose the option from the default ones. Here you have to choose from some alternative types, so that let’s dive deeper into details.

Settings for JetSmartFilters in WP Dashboard

You need to choose the Manual input type if you fill the options with the values manually. For instance, you might have the “city” meta field and you need to add the actual city values which you’ve got in this meta field for the different posts or events.

Settings for JetSmartFilters in WP Dashboard

We recommend you to use the Taxonomies data source type in case you need to use the term titles as the labels for the chosen filter. For instance, you might have the “Clothes” post type and “Colors” taxonomy and you will assign each post item to different terms, as clothes may be in different colors. So, this filter will allow you displaying the terms and filtering the posts by terms.
Here we can enable the Show only childs of the current term option to showcase the child terms in the hierarchy for the parent term.

Settings for JetSmartFilters in WP Dashboard

The Posts source type will be useful if you want to display the post titles as the select items to filter the related posts. For example, you may have the “Speakers” post type and the “Events” post type listing grid. You can select the Posts > Speakers to filter the posts of Event type by speakers participating. Another examples are the authors and their books.

Settings for JetSmartFilters in WP Dashboard

If you have a repeater in the custom post types, you can specify the Custom Fields data source and the specific Custom Field Key which will display the values from the repeating posts fields.

In our case, we have chosen the Taxonomies data source type and then specified the needed taxonomy.

Settings for JetSmartFilters in WP Dashboard

5 Step – If you need to filter data from the Checkbox meta field type, you should toggle on the Is Checkbox Meta Field option that has been created with the help of JetEngine plugin.

6 Step – The next option is variable and depends on the previously chosen option. In general, you should specify the exact source for the filter function.
For example, you should define the Custom Field Key for the Custom Field option.
The Manual Input differs from the rest options. You should manually add new Option Lists and fill out the Value and Label fields.

Settings for JetSmartFilters in WP Dashboard

In our case, we have to specify the name of the selected taxonomy.

7 Step – In the Placeholder field, you need to enter the text to be shown when nothing has been chosen. The default value is “Select…” but you can customize it up to your needs.

8 Step – In the Query Settings block you should set the needed queried field key if you have chosen any source type, except the Taxonomy one, or if you don’t choose any of the options.

Settings for JetSmartFilters in WP Dashboard

In our case, we shouldn’t set anything here because this option is inactive for the taxonomy data source type.

9 Step – Click to the Publish button to save the settings.

Adjusting the Select filter to publications

To adjust the filter on the page, you should previously create the listing grid for the chosen posts or products. For more details follow this link.

1 Step – Create a new page where you want to place the Select filter and open it with Elementor editor. Add the section to the canvas with two columns.

Select filter in Elementor editor

2 Step – Add your listing to the canvas. We recommend you to place it in the second column.

3 Step – Drag and drop the Select filter widget to the first column.

4 Step – In the Content > Select filter field choose the needed filter.

Content settings in Select filter widget

5 Step – In the next This filter for dropdown menu choose the appropriate option. It is a range of them, but you should get oriented to the tool for which this filter works.

We have created the listing for the post type, so in this menu, we have chosen the JetEngine option.

6 Step – Then, in the Apply type dropdown menu, you can choose which filter type is preferable for this filter.
An AJAX filter type allows filtering using the AJAX method without reloading the page, which makes the filtering through the products much faster for the visitors.
The Page Reload filter reloads the page each time the visitor applies the filter.

Apply type dropdown menu

We have chosen an AJAX filter type in our example.

7 Step – Next, if you want to add a button to enable filter function, you should firstly toggle on the Show apply button option and then in the Apply on dropdown menu select the option that is called Click on apply button.

8 Step – If you don’t want to add any button, you should choose the Value change option in the Apply on dropdown menu.

9 Step – You can adjust the displaying of the filter label if you toggle on the Show filter label option.

10 Step – If you have more than one filter on the current page, you should specify it to the needed section with a listing grid inside it. To perform it you should simply put in the necessary ID number in the Query ID field.

Search filter - how it works

Adjusting the Select filter to products

Perform the same actions as for publications filtering, but with some detailing.

While creating a filter, be attentive to choose the needed option for products.
For example, if you want to choose the Taxonomy Data Source, select the Product Tags, Product Categories, etc.
In case you are going to choose the Posts in Data Source dropdown menu, be careful to specify in the Post Type menu the Products, Jet Woo Templates, etc. options.

Furthermore, be careful when in Elementor editor you choose the option to apply the filter for. Make sure, that the chosen option and the content on the site are displayed with the same widget, for instance, in our case it was the Product Grid.

Assign the Select filter in a similar way, as it was described for publications and enjoy the result.

Select filter for products

That’s it!
Now you know how to help the users of your website to filter posts or products on the page with the help of the Select filter.