Help Center

How to Apply Filters to WooCommerce Archive

How to Apply Filters to WooCommerce Archive

This tutorial explains how to create a WooCommerce Products Archive template using the JetThemeCore plugin with the filters from the JetSmartFilters plugin.

Before you start, check the tutorial requirements:

Enable Filters for the WooCommerce Archive

Let us start by making sure the filters are activated for the widget that will display the WooСommerce products. To do so, go to the Smart Filters > Settings > General Settings tab and enable the toggle for the WooCommerce Archive (Jet Woo Builder) widget provided by the JetWooBuilder plugin. 

enable the WooCommerce Archive (Jet Woo Builder) toggle

Create Filters for Products

To create the filters for the WooCommerce products, go to the Smart Filters > Add New tab.

Range filter for the Product Price

Firstly, write the Filter Name. For the range filter based on the product price, pick the “Range” Filter Type. In the Get min/max dynamically drop-down, you may select the “WooCommerce min/max prices” option to pull the highest and lowest prices of products automatically.

In the Step field, we set the default value “1,” but you can change it to the needed one.

range filter settings

Next, you can set up the Values prefix/suffix, enable the inputs, or edit the Number of decimals, Decimal separator, and Thousands separator according to your needs. But the main thing is to add the ‘_price’ Query Variable, in case the filter is set up by WooCommerce price.

filter query variable

You can see the full list of items by which you can filter by clicking the Dynamic Tag icon on the right side of the Query Variable field.

dynamic tags for the query variable option

After adding the Query Variable, the filter can be saved by pressing the “Update” button.

Checkboxes filter for the Product Attributes

Now, we can create another filter based on the product attributes.

Therefore, proceed to the Smart Filters > Add New tab.

Write the Filter Name. Then, select the “Checkboxes list” option as the Filter Type.

checkboxes list filter type

Next, pick “Taxonomies” as the Data Source, and choose the needed product attribute from the Taxonomy drop-down. In our case, it is “Product Color.”

In the Relational Operator, you can select the “Union” or “Intersection” option.

With the “Union” operator, the products that have in the attributes at least one option selected in the filter are displayed.

And the “Intersection” operator ensures the products are displayed that have in their attributes only all selected values in the filter simultaneously.

Then, you have toggles to show the empty terms in the filter, child terms of the current term, or group the terms by the parent term.

union and intersection relational operators

Next, we have the Is Checkbox Meta Field (JetEngine) toggle. In our case, the toggle must be disabled since the Taxonomy source is not a meta field. It should be enabled only if the checkbox meta field is a source of the filter.

In the Exclude/Include, you can pick specific terms from the selected taxonomy you want to show or hide in the filter.

The Use Custom Query Variable toggle needs to be disabled in this setup since the Taxonomy source applies the query variable automatically.

 Is Checkbox Meta Field (JetEngine)

After configuring the settings, this filter can be saved.

Create an Archive Shop Template

The Archive Shop Page template can be created in Crocoblock > Theme Builder.

Click the plus icon to add a new template.

create a new page template

Add conditions to the template

After clicking on the plus icon, a pop-up with the template conditions should be displayed.

Select the “Include,” and “Archive” options. In the last drop-down, choose the “All Products Archives” option or pick a specific taxonomy archive if needed.

Then, push the “Save” button.

set the page template visibility conditions

Now, after creating the Page template, we can click the “Add Body” button and select the “Create template” option.

add the body template

This option triggers the Create a template pop-up with settings, where you can select the “Elementor” Template content type and write the Template name

Elementor template content type

Now, you can hit the “Create” button and proceed to the editing page by clicking the “Go to editor” button.

Add the Products Loop widget to show products

In the editor, we want to add two columns to better structure the widgets.

adding two columns

In the column on the right, we added the Products Loop widget, which displays the WooCommerce Archive. It is normal for the widget to be blank and show nothing in the editor, but you will see the products on the front-end Shop Page. Do not forget that you can control the layout of how a product looks in a grid or list by creating the Product Archive Item template, in which you can build the custom layout.

Product Loop widget displays the WooCommerce Archive

Add the filters and apply them to the WooCommerce Archive (by JetWooBuilder)

In the left column, we added the filters. First, we dropped the Range Filter widget and picked the “Products Price” filter, which was created earlier. In This filter for, we have to select the correct provider, which is the “WooCommerce Archive (by JetWooBuilder).”

the WooCommerce Archive (by JetWooBuilder) provider

Next, we added the Checkboxes Filter widget. We picked the “Product Attributes” filter and selected the “WooCommerce Archive (JetWooBuilder)” as a provider.

Checkbox filter widget

At this point, the template is completed and can be saved by pressing the “Update” button.

Check Results on the Front End

We can go to the front-end Archive Shop Page and see how the products can be filtered.

Once we pick some options in the filters, we can see the products are filtered accordingly. 

filters for the WooCommerce Archive on the front end

That’s all. Now you know how to apply the filters to the WooCommerce Archive provider to allow product filtering.

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.