How to Filter WooCommerce Products by Attributes

The JetSmartFilters plugin allows you to filter WooCommerce product grids by their attributes. Visitors will be able to filter products by attribute values, such as length, size, color, type, etc.

Set the Product Attributes

The first step is to add product attributes and terms in the WordPress Dashboard > Products > Attributes tab. Then, you need to set the attributes and terms in WooCommerce products. For more instructions, follow the How to Create Product Attributes in WooCommerce tutorial.

Create a Filter

Now, proceed to the WordPress Dashboard > Smart Filters > Add New tab.

Specify the Filter Name, select the Filter Type (“Select,” “Radio,” “Visual,” or “Checkboxes list”), and the “Taxonomies” Data Source. In the Taxonomy dropdown, select a particular product attribute. Save the settings by clicking the “Update” button.

Add a Filter and Assign it to the Products Grid

Open the Shop page template in the Elementor editor and add the specific JetSmartFilters widget (with the same name as the created filter) to the appropriate section. 

In the widget settings, set the created filter in the Select filter dropdown.

In This filter for, set the filter provider (“JetWooBuilder Products Grid”, in our case).

Other adjustments can be made according to your needs. After that, save the page.

That’s all. Now you know how to filter WooCommerce products by their attributes with the help of the JetSmartFilters plugin for your WordPress website.