JetSmartFilters. How to create Range filter

This tutorial explains what steps you need to take in order to create Range filter using JetSmartFilters plugin.

JetSmartFilters plugin provides an opportunity to filter product or posts with the Range filter.

Price Range filter allows setting the certain range within which you’ll be able to query the prices. Also, you can use Check Range to select the ranges by which the items will be filtered. It adds the checklist of ranges containing the specific range values between which the products or post will be selected.
Moreover, you can use the Date Range widget to filter posts or products using the date they were added, or filter the event date when it’s supposed to take place.

You can find out how to create a Price Range filter for WooCommerce products from this tutorial. Also, reading this tutorial will help you to to create a Date Range filter.

This tutorial will teach you how to create a Check Range filter. So, let’s have a closer look at this process.

Creating a Check Range filter

Step 1 — Firstly, navigate to Smart Filters > Add New in your WordPess Dashboard. Here you need to type in the Name, Filter Label and Active Filter Label for your filter.

Smart-FIlters.-Check-Range

Step 2 — After that, in the Filter Type choose Check Range filter.

Filter-Type.-Check-Range.

Then, you’ll need to set the Min and Max Values for your products in the Options List.

Check-Range.-Option-List

Also, you can type in the Value prefix and suffix. In Query Variable field paste “_price” key, or you can select another key from Notes.

Don’t forget to click on the Publish button to save the changes.

Check-Range-customization

Step 3 — Afterward, open the needed page and drag-n-drop the Product Grid widget to the section where you want to place it. You can use another widget for your products or posts.

Edit-Product-Grid-widget

Step 4 — The next step is to drop the Check Range widget to the section. In the Content settings, you’ll need to Select the filter you’ve created before. Then, apply this filter for JetWooBuilder Product Grid.

Step 5 — The last step is to click on the Publish button and check how the filter works.

Check-Range-filter.-Preview

Congrats! Now you know how to create a Check Range filter with the help of JetSmartFilters plugin.