While creating post and product archive pages, there is no way you can do without filters. An ability to filter WooCommerce products by different criteria, apply several criteria at once for the custom posts or products, is the magic key that allows the visitors find the necessary information, or make a choice towards one of the products and make a purchase.
The easier and faster the visitor can apply the filters, the more likely he is to find what he’s looking for. Just remember, how frustrating it is to click the specific filter to show the products, e.g., within the set price range, and when you have to wait until the page reloads with the needed results? And what happens when you need to apply more than several filters to find what you’re looking for?
If you don’t want your visitors and customers to wait like this, JetSmartFilters plugin is just the very piece you need. This plugin uses the AJAX method, that allows loading the filtered products or posts without the need to reload and refresh the page every time you apply a new filter.
JetSmartFilters plugin is made for Elementor page builder, and it’s really easy-to-use. Not only does this plugin make the process of filtering really lightning-fast, but it also provides versatile filter types to add the checkboxes, range filters, search filters, etc.
It works perfectly with JetWooBuilder and JetEngine templates. Overall, there are 7 different filter types. Also, there are 7 matching filter widgets which allow adding the filters right to the pages built with Elementor, containing the post and product archives.
There are also several additional options provided by JetSmartFilters plugin, such as Pagination based on AJAX loading method. You can as well provide the visitors with an ability to enable or disable the currently active filters in one click – and these filters will be applied or discarded in a matter of one second.
Right at the moment, if you’ve got CrocoBlock subscription, you’re already able to access JetSmartFilters plugin. Let’s take a closer look at how you can create a new filter and add it to the Shop page to provide the means of filtering the products.
Step 1. Create a new filter
- Let’s start with adding a new filter and setting it up. It is a necessary step before adding a widget to the page, as we ought to have everything at the ready before actually using the widget itself.
After activating JetSmartFilters plugin you can see the Smart Filters tab in WordPress Dashboard. Open it and click Add new to create a new filter.
- On Add New Filter page you can easily specify a new filter’s name, set the label that should be displayed by the widget, and set the label to be shown when the filter becomes active.
In our case, we’ll specify the Filter Label as “Price Range” and the Active Label as “Price Range Set to”.
- In the Filter Settings block, you have to specify the filter type you’d be adding to the products or posts archive page template. As we mentioned above, there are 7 different filter types, such as checkboxes list, select, range, check range, date range, radio, and search. Each of the filter types has its own specifics, and you can easily get all the needed information on how to use them in the vast JetSmartFilters documentation.
- In our case, we’ll be adding the Price Range filter to WooCommerce Shop page. Let’s select the Range filter type.
- After that, we get the options allowing to set the query variable and other additional data needed for displaying the range (such as price prefix, the minimum and maximum price values, etc).
- We need to add the meta field key in the Query Variable field in order to define the criteria on which this filter will be based.
- Scroll the page a bit down to view the most popular meta field keys common for WooCommerce. You don’t have to look for the proper meta key in the database, just copy the one needed and paste it in the Query Variable field. In our case, we need to copy and paste the _price meta key in the corresponding field.
- We can also add the prefix to show up the currency in which the prices are to be shown in the filter.
- After that, while defining the prices range, you can either set the min and max price values manually or get the min/max values automatically. To do it select the WooCommerce min/max prices in the drop-down.
- Now that everything is ready click Publish / Update button. Now we’re ready to proceed to adding the filter to an Elementor-built page.
Step 2. Add the filter to the Shop page
- Let’s open the WooCommerce Shop page template. In case you’re using JetWooBuilder, you can create (or might already have) such a template in the WooCommerce > Jet Woo Templates tab.
Open the Shop template where you’ve got the products displayed, for editing, and drop the Range Filter widget anywhere you want to place it.
- Select the filter you want to display with this widget in the Select Filter field.
- Specify the source that displays the products to which you need to apply the filter. In our case, the products are displayed by Products Loop, so we should pick the WooCommerce Archive option. However, there are more options available, and in case you’re displaying the products using several different methods, you can set the different filters for each of them by defining the needed source in This filter for dropdown.
- Select AJAX in Apply Type drop-down to increase the loading speed and let the filter work without reloading the page.
- Select if the filter is to be applied on button click or when one changes the value.
- In case you’ve got several widgets of one type displaying different content, you can set an ID for each of the widgets in the Advanced settings and then input the specific widget’s ID in the Query ID field.
- Enable Show filter label to display the label we’ve set when we’ve created the filter in the first place.
- Now the only thing left is to style the filter up according to one’s needs. There are multiple style settings available in the Style block. Feel free to check them out.
As you can see, everything is quite easy and you can add any of the 7 filter types to the pages built with Elementor to allow the visitors filter the products or publications.
In this example, we’ve tried to show the basic principles of how to work with JetSmartFilters. However, you can find more information on how to create filters and work with them in the complete JetSmartFilters plugin documentation.
JetSmartFilters is the must-have tool when it comes to letting the visitor or the customer make a choice. More and more people at the moment enjoy browsing the products, looking for the right ones. The filters surely should become an inevitable part of every successful WooCommerce site to enable customers find the products they truly need at all times.