How to Use Filters with WooCommerce Shortcodes
This tutorial explains how to apply filters created with the JetSmartFilters plugin to WooCommerce Shortcodes to filter WooCommerce products.
Before you start, check the tutorial requirements:
- Elementor (Free version) or Block editor (Gutenberg)
- WooCommerce plugin installed and activated
- JetSmartFilters plugin installed and activated
Enable Filters for WooCommerce Shortcodes
Start with activating the filters for the needed provider — the WooCommerce Shortcode.
Go to WordPress Dashboard > Crocoblock > JetPlugins Settings > JetSmartFilters. Open the General Settings tab and turn on the WooCommerce Shortcode toggle.
Now the filters can work with the WooCommerce Shortcodes.
![woocommerce shortcode toggle activated](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_378.png)
Create Filters in JetSmartFilters
Filter by products price
Go to WordPress Dashboard > Smart Filters > Add New. Pick the “Check Range Filter” Filter Type for a filter by product price.
![check range filter type](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_379.png)
Add as many options as required in the Options List section. In the described case, the “1-100,” “101-200,” and “201-300” options are used.
![check range options list](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_380.png)
Fill in the other settings according to your preference. For example, we added a dollar sign as a Values suffix.
In the Query Variable, a “_price” field name was entered.
![check range filter query variable field](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_381.png)
The filter is completed and can be saved.
Filter by product tags
Now, we build another filter using the product tags as a source.
We selected a “Radio” Filter Type.
![radio filter type](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_382.png)
We selected “Taxonomies” as a Data Source and “Product tags” as the Taxonomy. You can also configure all other options as per your requirements.
![product tags filter](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_383.png)
Remember that the Query Variable field does not need to be filled in if the Data Source is a taxonomy. Therefore, we keep the Use Custom Query Variable switcher disabled.
![use custom query variable toggle](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_384.png)
At this point, the filter can be saved.
Filter by product attributes
We can move on to creating another filter by product attributes. Add a new filter and pick the “Checkboxes list” Filter Type.
WooCommerce creates the product attributes as a taxonomy, so we select “Taxonomies” as a Data Source. And the Taxonomy is a “Product Color.” You can choose any product attribute according to your needs.
![checkboxes product color filter](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_385.png)
Apply other settings according to your needs. Remember that the “Taxonomy” source does not need a Query Variable selected, so we keep the switcher disabled.
![use custom query variable toggle](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_386.png)
This filter can also be saved now.
Filter by product ratings
Lastly, let us create another filter that uses product ratings as a source.
Therefore, we select a “Rating” Filter Type. You can edit the Stars count and select the needed Inequality operator.
To add a Query Variable, click on the “Dynamic Tag” icon on the right side of the field.
![equals inequality operator](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_387.png)
Choose the “_wc_average_rating” field. After selecting the rating field, the filter can be saved.
![average rating dynamic tag](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_388.png)
Add Woocommerce Shortcode to Page
At this point, create a new page or edit an existing one to add the WooCommerce Shortcode.
In this example, we want to show the most recent products for which the following shortcode can be used:
[products limit=”4″ columns=”4″ orderby=”id” order=”DESC” visibility=”visible”]
Various shortcodes can be created to display the products according to any need.
See the complete list of Woocommerce Product Shortcodes in the WooCommerce Documentation.
Add a Shortcode block to the page and insert the needed WooCommerce Shortcode there.
![block with woocommerce shortcode](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_389.png)
If we check the page on the front end, the newest products can be seen now.
![newest products section on the front end](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_390.png)
Set Up Filters for Woocommerce Shortcode
Move on to adding the filters.
Firstly, add a column where the filters will be displayed.
![additional column for filters](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_391.png)
We add the Check Range Filter block in this new column by clicking the plus icon.
![check range filter block in the block editor](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_392.png)
In the filter settings, we pick the “Products Price” filter and select the “Woocommerce Shortcode” option as a filter provider in the This Filter For field.
![check range filter settings](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_393.png)
Next, we can add a block of a Radio filter to output the filter by product tags.
We select the “Product Tags” filter and the “Woocommerce Shortcode” as a provider (This Filter For field).
![radio filter block in the block editor](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_394.png)
The next block to be added is Checkboxes. We pick the filter by “Product Attributes” and select the “WooCommerce Shortcode” in the This Filter For field.
![checkboxes filter block in the block editor](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_395.png)
Do not forget that in the Additional Settings tab of the Checkboxes or Radio filter blocks, you can manage the layout of the filter.
For this filter, the Search Enabled and Dropdown Enabled features were activated.
![checkboxes additional settings tab](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_396.png)
Lastly, we can add the Rating block to the page.
We pick the filter by product rating and select the “Woocommecre Shortcode” as a provider in the This Filter For field.
![rating filter block in the block editor](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_397.png)
Now the page can be saved and checked on the front end.
Select some filter options, and the relevant product is now displayed.
![filters selected on the front end](https://crocoblock.com/knowledge-base/wp-content/uploads/2023/08/Screenshot_398.png)
That’s all about filtering the WooCommerce products output using the WooCommerce Shortcode with the JetSmartFilters plugin.