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. You can use tools like Elementor and Gutenberg on their own with WooCommerce Product Filters, or with additional plugins like ShopLentor.
Elementor
WooCommerce Product Filters is compatible with Elementor Pro. (It can't integrate with the free version of Elementor because the WooCommerce widgets are only available in the Pro version.)
A couple of additional setup steps are required in order to use the filters with shop pages built using Elementor.
Displaying filters above the list of products
Unfortunately the option in WooCommerce Product Filters to display a filter group at the top of all your shop pages does not work with Elementor. This is due to the way that Elementor is coded.
Instead, you need to insert filters above the list of products by adding a shortcode to your Elementor-built page as follows:
- When you add a 'Products' widget in an Elementor-built page, you must click on the widget settings and set the "'Enable filtering'" option to 'Yes'.
- Add the WooCommerce Product Filters shortcode to an Elementor "Shortcode" widget, wherever you want the filters to appear.
Displaying filter widgets
We recommend creating a 2-column layout using Elementor and adding the list of products to one side, and a sidebar containing the filters on the other:
- When you add a 'Products' widget in an Elementor-built page, you must click on the widget settings and set the "'Enable filtering'" option to 'Yes'.
- Add an Elementor 'Sidebar' widget to your page layout, then add a 'Product Filters' widget and select the name of the filter group that you want to display.
Divi Builder
WooCommerce Product Filters is fully compatible with Divi Builder and the filters will work automatically in the store pages you create using Divi (e.g. shop or category pages).
Fusion Builder (Avada)
We have integrated WooCommerce Product Filters with the Fusion Builder that comes with Avada theme. If you are not using the 'Post Cards' module in Fusion Builder then you can add filters to the pages that you build using Fusion Builder without taking any special steps.
If you are using the Post Cards module then please be aware of the following:
- You must tick the 'Enable filtering' option in the Post Card settings.
- Make sure you select the 'Products' post type in the Post Card settings. This is because WooCommerce Product Filters only works with products and not other post types.
- When you use filters (e.g. a price filter) with Post Cards, the AJAX filter mode will be disabled and the 'Button click' method will automatically be used instead. This requires the user to choose their filter options and then click an 'Apply' button to load the results. Unfortunately this was the only way to integrate WooCommerce Product Filters with the Post Card module, which is fundamentally incompatible with AJAX filtering.
Bricks Builder
WooCommerce Product Filters is also compatible with the Bricks page builder plugin. Follow these instructions to add filters to pages designed using Bricks:
- First, use the Bricks 'Products' block to list products on the page. When you do this, make sure you enable the 'Enable filtering' toggle which WooCommerce Product Filters has added to the block:
- Now add filters to be page using either of these methods:
- The above steps will add the filters to the page, but not the additional elements such as the number of results and active filters. To display these, create an additional Shortcode block and add the shortcode
[wpf-bricks-elements]. Make sure you enable the 'Don't render in builder' option to prevent the shortcode from appearing on the page:
WooCommerce product shortcodes
WooCommerce comes with several built-in shortcodes which you can use to list products. These work perfectly with WooCommerce Product Filters.
Important! You must add cache="no" inside the
[products]shortcode. If you don't do this then the filters won't work correctly.
Example: [products cache="no"]
Other page builder plugins
We haven't specifically integrated WooCommerce Product Filters with other page builder plugins, such as Visual Composer by WPBakery or Oxygen Builder. That's because it is a lot of work to integrate with each one, so we track the number of feature requests for each builder and create integrations based on demand.
If you're using WooCommerce Product Filters with pages that you created a different page builder then it's quite likely the filters either won't appear, or won't interact with the lists of products on the page. If this happens then the possible solutions are:
- Switch to a supported page builder or the Gutenberg block editor and build the page using that, or;
- Use the built-in WooCommerce Shop and category templates, instead of redesigning them using the page builder.
You can still use your chosen builder to create all the other pages on your site, and there will be no conflict with WooCommerce Product Filters. The only restriction is that you can't use the page builder to set up the pages where you wish to display the filters.
Gutenberg (WordPress)
Gutenberg is the block editor which is built into WordPress itself. We have integrated WooCommerce Product Filters with Gutenberg as closely as is possible, given the current limitations of Gutenberg.
How to use the filters with Gutenberg
If you are building a page with the Gutenberg WooCommerce blocks then you can add filters to the same page - either as a shortcode above the blocks, or as a sidebar widget.
It is essential that you use the 'Button click' filter mode and not the 'Instant' option. If you require instant/AJAX filtering then we recommend listing products using one of the following methods instead of Gutenberg blocks:
- Use the standard shop and category pages which are provided by WooCommerce.
- List products in a table using WooCommerce Product Table and add filters to the page.
These methods allow you to use the full functionality of WooCommerce Product Filters, without the limitations that you get with Gutenberg blocks.
Limitations
Currently, the WooCommerce Gutenberg blocks are not very customizable and do not have the hooks that we need to make them work perfectly with the filters in WooCommerce Product Filters. While you can use filters with WooCommerce Gutenberg blocks, this should be considered experimental and may not work perfectly. (In fact, the only hook currently made available by WooCommerce itself is called experimental__woocommerce_blocks-product-list-render.)
These are the current limitations that we are aware of:
- When using filters with Gutenberg WooCommerce blocks, the filters will always search the entire store and not just the products on the current page. This means that the 'Product counts' in the filters may be incorrect because they refer to the filters on the current page, but the filters will actually look in the entire store.
- All blocks (with the exception of the 'All Products' block) do not display a “products not found message” if no products are available after performing a filter. Unfortunately Gutenberg doesn't have the required hooks that would allow us to add this.
- Sorting products only works with the 'All Products' block. If you are using other types of block then we recommend not including 'Sort by' in your filter group.
We plan to resolve these limitations as soon as the Gutenberg team adds the required hooks and allows us to integrate with it more closely. They have confirmed that they are considering this, but there is no timescale at the moment.
Other page builder plugins
At the moment, we have only integrated WooCommerce Product Filters with Elementor and Gutenberg (subject to the limitations with Gutenberg mentioned above). The filters will not work if you build your shop pages using other page builder plugins such as Beaver Builder or Visual Composer.
You can still use other 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 shortcodes included with WooCommerce.
- Gutenberg (as described above).
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.