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.

Are you looking for an opportunity to range your products by price?

The Range filter type allows setting the certain range within which one has to query numeric values. One of the most frequent usage is prices filter for WooCommerce store pages.
With 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.

Creating a Price Range Filter

To find out how to create a Range filter, follow this link.

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

Adjusting a Price Range filter for WooCommerce products

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

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

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

Range Filter Widget

Step 3 —In the Content settings block, choose Range filter and use it to filter products in Product Grid. You can select any other option in the list that is integrated with WooCommerce products.

Content settings in Range filter widget

You can also choose the filter type between AJAX and Page reload, apply this filter on Value change or Click on apply button settings.

Content settings in Range filter widget

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

Content settings in the Range filter widget

Step 5 — 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.