Using product filters with blocks, page builder plugins, and WooCommerce shortcodes
This article explains how to use WooCommerce Product Filters with a range of methods for listing products.
If you haven't chosen a page builder yet then we recommend Elementor or Divi Builder for the best possible results with your product filters, or simply using the built-in WooCommerce shortcodes.
WordPress block editor
WooCommerce Product Filters is fully compatible with the Product Collection block, which lets you list all your products, or specific products such as products by category, featured products, new arrivals, on sale products, best sellers, top rated products, hand-picked products, products by tag, etc.
To add filters to a page that contains a WooCommerce Product Collection block, simply add the 'Product Filters' block to the same page (or to a sidebar which appears on that page), and select the appropriate filter group.
Performance note: The Product Collection block uses WordPress’ new Interactivity API, which is currently limited. To integrate with WooCommerce Product Filters, it must run two product searches - one for results and one to refresh the block. We’ll improve this as the API evolves. For faster performance now, use WooCommerce shortcodes instead of the Product Collection block.
Elementor
If you want to design your shop pages using Elementor instead of using the native WooCommerce pages, blocks or shortcodes, then you should use the "Product List" and "Filters Group" modules widgets which are provided by WooCommerce Product Filters.
This way, you can drag and drop product displays and filter groups into your layouts and manage all settings directly in the Elementor editor.
Creating custom pages
To build a custom page with a filterable product list, use the "Product List" and "Filters Group" widgets. We suggest creating a two column layout in Elementor:
- Product List – In your main column, add the Product List module to show products.
- Filters Group – In the other column, add the Filters Group module and choose the filter group you want to display.
Both modules have settings that you can configure depending on the page you are building.
Product List module
- Columns – set how many product columns to display
- Rows – set how many product rows to display
- Use current query – enable on archive pages and leave Categories and Tags empty
- Product categories – filter by category
- Product tags – filter by tag
Filters Group module
- Filters Group – pick the filter group to display
- Layout – choose how the group is rendered
Archive pages
For product archive pages enable "Use current query". This lets the product list automatically detect the correct query. When this is enabled the Categories and Tags settings are ignored.
Divi Builder
WooCommerce Product Filters is fully compatible with Divi Builder, and the filters will work automatically on store pages you create with Divi (for example, shop or category pages) including the products shortcode.
If you want to build custom pages using the Divi builder, you must use the provided Product List and Filters Group modules. These give you full compatibility over how products and filters are displayed.
Creating custom pages
To create a custom page with a filterable product list you need to use the "Product List" and "Filters Group" modules. Both modules have settings you can adjust depending on the page you are building.
Note: ignore the notice shown by Divi saying the module isn't fully compatible with the builder. The module works fine, but we don't provide a React script for it since it has to be rendered server side.
Product List module
- Columns – set how many product columns to display
- Rows – set how many product rows to display
- Use current query – enable on archive pages and leave Categories and Tags empty
- Product categories – filter by category
- Product tags – filter by tag
Filters Group module
- Filters Group – pick the filter group to display
- Layout – choose how the group is rendered
Theme builder
If you're using the Divi theme builder to override archive pages you need to enable the Use current query setting in the "Product List" module. This allows the product list to automatically detect the correct query. When this is enabled the Categories and Tags settings are ignored.
Fusion Builder (Avada)
We have integrated WooCommerce Product Filters with the Fusion Builder that comes with the Avada theme. Filters will work automatically on store pages you create with Avada, such as shop or category page and the products shortcode. However, if you want to build custom archive pages, you must use the provided Product List and Filters Group modules. This ensures consistent display and filtering functionality within Avada's builder.
Creating custom pages
To build a custom page with a filterable product list you need to use the "Product List" and "Filters Group" modules. Each module has settings you can tweak based on the type of page you're creating.
Product List module
- Columns – set how many product columns to display
- Rows – set how many product rows to display
- Use current query – enable on archive pages and leave Categories and Tags empty
- Product categories – filter by category
- Product tags – filter by tag
Filters Group module
- Filters Group – pick the filter group to display
- Layout – choose how the group is rendered
Archive pages
To override archive pages you need to enable the Use current query setting in the "Product List" module. This lets the product list detect the correct query automatically. When enabled the Categories and Tags settings are ignored.
Bricks Builder
WooCommerce Product Filters is also compatible with the Bricks page builder plugin. On standard store pages like the shop, category pages or the products shortcode, filters will function right out of the box without requiring extra setup. For more advanced layouts, such as custom archive pages, you must use the built-in Product List and Filters Group modules.
Creating custom pages
To create a custom page that includes a filterable product list, use the "Product List" and "Filters Group" modules. Both modules include settings you can adjust depending on the page layout you want to build.
Product List module
- Columns – set how many product columns to display
- Rows – set how many product rows to display
- Use current query – enable on archive pages and leave Categories and Tags empty
- Product categories – filter by category
- Product tags – filter by tag
Filters Group module
- Filters Group – pick the filter group to display
- Layout – choose how the group is rendered
Archive pages
When overriding archive pages, make sure to turn on the Use current query option in the "Product List" module. This way the product list will pick up the right query automatically, and the Categories and Tags settings will be ignored.
WooCommerce product shortcodes
WooCommerce comes with several built-in shortcodes which you can use to list products. These work perfectly with WooCommerce Product Filters and are more performant than using the Product Collection block.
Important! You must add the parameters cache="false", limit="15", filterable="true" and paginate="true" inside the
[products]shortcode. You can change the limit to any number you like. If you don't do this then the filters won't work correctly.
Example: [products cache="false" filterable="true" limit="15" paginate="true"]
Other page builder plugins
At the moment, we have only integrated WooCommerce Product Filters with the page builders listed above. The filters will not work if you build your shop pages using other page builder plugins such as Visual Composer.
You can still use other page builders to build the other pages on your website, such as the homepage and the single product page. However, you should use one of the following methods to list products on the pages where you are using the filters:
- The built-in WooCommerce shop and category pages.
- The WordPress block editor with the Product Collection block or the shortcodes included with WooCommerce.
We are happy to integrate WooCommerce Product Filters with other page builder plugins based on demand. Please send us a feature request to let us know which page builder you want to use the filters with.