Back to contents

JetSmartFilters: How to Apply Filters to WooCommerce Products

 

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

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

Moreover, the JetSmartFilters plugin has seven different filter widgets for filtering posts and products. Also, the plugin uses the 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!

1 Step — Create a filter

Firstly, open your WordPress Dashboard, navigate to Smart Filters tab and click the “Add New” button. Here you need to type in the filter Name, Filter Label, and Active Filter Label.

Filter label settings while adding a new one

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

In this case, we will be adding the Select filter. In the Data Source drop-down menu choose the “Taxonomies” option, 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

2 Step — Add the filter to the page

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

The next step is to drop the Select widget to the section. In the Select filter drop-down list choose the filter you’ve created before. Then, in This filter for select “JetWooBuider Products Grid” option.

Select filter for the JetWooBuider Products Grid

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