Back to contents

JetSmartFilters. How to filter WooCommerce products by attributes

This tutorial provides detailed information about how to filter WooCommerce products by their attributes using JetSmartFilters functionality.

JetSmartFilters plugin allows you to set filtering WooCommerce products by their attributes. The visitors will be able to filter the products by attributes values.

Filtering WooCommerce products by attributes

Step 1 – The first thing you should do is to add products attributes in Products > Attributes in the WP Dashboard.

Products Attributes in the WP Dashboard

Also, it is necessary to specify the terms of each attribute.

specify the terms of each attribute

Step 2 – Then, you need to set the attributes in WooCommerce products. Go to Products > All Products and click the Edit option under each product.

set the attributes in WooCommerce products

Step 3 – When the Edit product window opens, navigate to the Attributes tab and apply the attributes and terms to the product. Don’t forget to save the updates.

navigate to the Attributes tab and apply the attributes and terms to the product

Step 4 – Now let’s create a new filter in SmartFilters > Add New. Specify the filter label, select the filter type and in the Data Source option choose “Taxonomies”. In the appeared field, Taxonomy, select the certain product attribute. Save the settings clicking the Publish button.

filter settings for the checkboxes list

Step 5 – Open the Shop page template in Elementor editor and add the specific JetSmartFilters widget in the appropriate section. On the left side, you will see the settings block, where you have to determine the created filter in the Select filter field and select the listing or archive to which you want to apply the filter in the This filter for field. Moreover, there are a lot of different settings, which will help to customize the elements according to your needs and vision.

content settings for the Checkboxes filter

Step 6 – It’s a good time to view how it works on the Shop page.

example filter the products

Well done! Now you know the way to filter WooCommerce products by their attributes with the help of JetSmartFilters plugin.