Back to contents

JetSmartFilters. How to use the JetSmartFilters widgets for WooCommerce products

This tutorial explains how to use filter widgets for WooCommerce products with the help of JetSmartFilters plugin.

With JetSmartFilters plugin you can filter your WooCommerce products easily. The opportunity to filter products is very useful because it makes the search for goods more efficient and fast.

Moreover, JetSmartFilters plugin has seven different filter widgets for filtering posts and products. Also, the plugin uses AJAX method, which allows filtering without reloading the page every time you apply a new filter.

From this tutorial, you will learn how to use JetSmartFilters widgets for WooCommerce products. So, let’s start!

Using filter widgets for WooCommerce products

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

Filter label settings while adding a new one

Step 2 — Then, you can choose the Filter Type from the dropdown. You’re able to choose the filter according to your needs.

In my case, I’ll be adding the Select filter. In Data Source choose Taxonomies, and in Taxonomy filed select Product categories. Don’t forget to click on the Publish button to save the changes.

Filter settings for the Select type

Step 3 — Afterward, open the needed page and drag-n-drop the Products Grid widget to the section where you want to place it. After that, you’ll see all your products in the form of an attractive grid.

Products Grid widget

Step 4 — The next step is to drop the Select widget to the section. In the Select filter, section choose the filter you’ve created before. Then, from This filter for dropdown select JetWooBuider Products Grid.

Select filter for the JetWooBuider Products Grid

Step 5 — Note, that you can choose different filter types, such as Checkboxes, Radio, Range, Rating, and Search.

Also, you’re able to filter products by different criteria, by Categories, Tags, Attributes, and Taxonomy. I’ve chosen the Select filter for the Products Grid, as an example for this tutorial, but you can also create Jet Woo Templates and apply filters for it.

Step 6 — When you’re done with the customization click on the Publish button and preview how the filter works.

Select filter with JetWooBuider Products Grid

Now you know how to filter WooCommerce products with the help of the JetSmartFilters widgets. Hope this tutorial was useful!