Back to contents

JetSmartFilters. How to create Range filter

This tutorial describes the process of creating a Range filter from the scratch with JetSmartFilters plugin.

JetSmartFilters has several types of filters that allow the visitor to specify the search for some definite parameters.

Let’s look through the Range filter in this tutorial.

The Range filter type allows setting the certain range within which one has to query numeric values. They can be prices for WooCommerce store pages as well. Read this tutorial to find out more about the Price Range filter.

Alternatively, it might be the JetEngine posts in the certain post type with numeric values in the meta fields, e.g. the number of rooms in the flat, the number of people in the flight tickets, etc.

What is more, you might have events in a post type and the number of participants can be filtered by range filter as they have a numeric value.

How to create Range filter

1 Step – Go to WordPress Dashboard > Smart Filters > Add new option.

2 Step – Next, you should fill out the Title, Filter Label, Active Filter Label fields.

Add a new range filter

3 Step – After that, you should choose the Range in the Filter Type dropdown menu.

Filter and query settings for the Range Filter type

4 Step – Next options, which are called Values prefix and Values suffix, allow you to add the prefix and suffix to the numeric value of the range filter. It can be a text, or a currency sign, whatever that suits your needs.

5 Step – Then, you can specify the sign in the Thousands separator field to make it look more customized to the visitors of your site. For this purpose, you can choose the comma, mark, or space (to allow space you should enter the &nbsp special symbol).

Filter settings

The same you can perform in the Decimal separator field for these values. Don’t forget to specify the Number of decimals after the separator in the next field.

6 Step – After that, you need to set the Min and Max Value available for filtering.

7 Step – Then, define the Step of the values in the range filter. Note, that the lower is the Step value, the more exactly the visitor is able to tune the range.

8 Step – If in the range filter type you are dealing with prices, in the Get min/max dynamically field you can choose only two values: the default one or the WooCommerce min/max prices.

9 Step – In the Query Variable field, you need to put in the necessary meta field slug (this meta field will become the source of the range values). For example, you can specify the “_price” meta key to allow working with the Price range. Alternatively, you are able to use the “_length” or “_width” keys if you want them to range. Or, you can use another meta field name.

Query settings with the helpful notes

10 Step – At the end, click on Publish button to save all the changings and then go to Elementor editor to apply the filter to the content.

How to create Range filter for publications

Follow the instruction above, but remember to set the preferable values in the Min Value, Max Value and Step field. It is obligatory for filtering the publications.

How to create Range filter for publications

How to create Range filter for products

Read about it in our tutorial where we enlarged on the point of Price Range Filter as the most frequently used type of Range filter for products.

How to create Range filter for products

Now, you know how to create Range filter not only for Woocommerce pages but also for JetEngine posts, if they have the numeric value to be filtered.