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.
3 Step – After that, you should choose the Range in the Filter Type dropdown menu.
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   special symbol).
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.
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 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.
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.