JetSmartFilters. An Easy Way to Add Filters to WooCommerce and Archive Templates Built with Elementor

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

  1. 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.

  2. 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”.
  3. 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.
  4. In our case, we’ll be adding the Price Range filter to WooCommerce Shop page. Let’s select the Range filter type.
  5. 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).
  6. 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.
  7. 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.
  8. We can also add the prefix to show up the currency in which the prices are to be shown in the filter.
  9. 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.
  10. 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

  1. 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.

  2. Select the filter you want to display with this widget in the Select Filter field.
  3. 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.
  4. Select AJAX in Apply Type drop-down to increase the loading speed and let the filter work without reloading the page.
  5. Select if the filter is to be applied on button click or when one changes the value.
  6. 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.

  7. Enable Show filter label to display the label we’ve set when we’ve created the filter in the first place.
  8. 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.

12 Comments

  1. Andrew

    I am wanting to show/hide a filter based on a product category. How would you be able to do this?

    1. Anastasiia Mykytiuk

      Hi, Andrew!
      Thank you for your comment!
      Unfortunately, we do not have such functionality yet. However, if you have any suggestions, please, go to this website https://github.com/CrocoBlock/suggestions and submit one, so that our developers take it into consideration ASAP.

  2. John

    Здравствуйте. Возникла такая проблема с woocommerce и jetsmartfilters. Если у двух категорий общий атрибут, когда сортируешь товары находясь в одной из категорий, то товары выводятся со всех категорий у которых есть такой атрибут.

    Такая проблема возникает с магазинами кроссовок и одежды, так как нужно сортировать товары по таким параметрам как: производитель, сезон, размер, цвет. И должно быть несколько категорий: мужские, женские и детские.

    P.S.: Спасибо за Ваши разработки, все максимально удобно и просто.

    1. Anastasiia Mykytiuk

      Hi, John!
      Thank you for your feedback!
      Please, contact our support team to provide them with all the required details and get professional help as soon as possible!

  3. Rafik

    ​Hi CrocoBlockers,

    I own a shop, how come you haven’t create an easy way to filter by colours including the using of custom images?

    Currently I use WOOF – Product Filters and works just fine, requires very little tweaks and images are only 25×25 pixels boxed, but definitely WORKS. You use a colour hex code or better, add a custom image for your colour UX-focussed filtering.
    You can check this functionality at the bottom of my homepage and in a button “Selection Filters” at the top on the shop page.

    Is there a hidden gem within your SmartFilters solution or are you going to be hands-on to solve this HIGHLY IMPORTANT feature for e-commerce owners?

    Looking forward to hearing from you.

    1. Anastasiia Mykytiuk

      Hi, RaficK!
      Thank you for your comment. Our developers are already working on this functionality!

  4. Marcos

    Hi there!
    Is it possible to filter the products by tags? If so, how? I’m finding problems to get there…

    Thanks in advance, looking forward to hearing from you.

    1. croco-admin

      Hi, Marcos!
      First of all, you have to create tags.
      Then, while creating a new filter you need, select the Taxonomies option in the Data Source dropdown. Finally, proceed to the Taxonomy dropdown and select the Tags option.

  5. Carlos

    Hello,

    How can I change the number of the products that are shown in the product loop? For some reason I always can see 16 products per page, but I want to change it to another number and I don’t know how to do it.

    Thanks

    1. croco-admin

      Hi, Carlos!
      Open your WordPress Dashboard > Appearance > Customize > WooCommerce > Product Catalog and here you can set the number of products per row and the number of rows per page in the respective fields.

      1. Carlos

        Thanks for your answer. Now i have a problem with the pagination and the filters that i applied. After i applied any type of filter, if i change to the second or third page, the filter disappears and shows again all the products without the filter. How can i make the pagination widget work correctly?

Leave a Reply

Your email address will not be published. Required fields are marked *

Cheers!

Now You're One of Us!

Check Your E-mail & Follow The Steps

We use cookies to ensure the best experience for you on CrocoBlock. Please, accept the usage of cookies.