Back to contents

JetSmartFilters: How to Create a Price Range Filter for WooCommerce Products

This tutorial explains what steps you need to take in order to create a Price Range filter for WooCommerce products using JetSmartFilters plugin.

The Range filter type allows setting a certain range within which the user can choose numeric values by moving the slider. One of the most frequent usages is the price filter for WooCommerce store pages.

With a Price Range filter, your visitors can select the range within which to look for the products or posts. You’ll be able to set the minimum and maximum values for product price to let the visitors choose only the products with the suitable price.

From this tutorial, you’ll learn how to create a Price Range Filter with JetSmartFilters plugin. So, let’s have a closer look at it.

1 Step — Create a Range filter

Open the Dashboard, go to the SmartFilters tab, and create a new Range filter. To find out how to do it go through our Range filter creation tutorial.

In order to create a Price range filter, you should add the “_price” meta field name in the Query Variable field.

2 Step — Assign the filter to the products grid

First of all, you should create a Product Grid and display WooCommerce products there. To perform it correctly, follow the pointed links.

You might have another way of displaying WooCommerce products, e.g. WooCommerce Archive.

Then, open the needed JetWooTemplate to which you want to add the Range Filter (for example, the Product Grid), and drag-n-drop the Range Filter widget to the selected section.

range filter widget

In the Content settings block, choose the filter you created and set the This filter for feature to “JetWooBuilder Products Grid” or any other WooCommerce- related option.

Content settings in Range filter widget

You can also choose the Apply type between “AJAX” and “Page reload” options, as well as Apply this filter on “Value change” or “Click on apply button”. More details on all the filter settings you will find in this tutorial.

Content settings in Range filter widget

Afterward, you can change the appearance of your filter in the Style settings section.

Content settings in the Range filter widget

When you’re done with settings click on the “Publish” button and see the results.

Range filter widget

Now you can easily create a Price Range filter for your products. Hope this tutorial was useful.