How to Add WooCommerce Product Filters in Elementor
The Product Filters widget helps visitors narrow down WooCommerce products on shop pages and custom product listing layouts built with Elementor. It allows users to filter products quickly using categories, attributes, or search options.
Instead of browsing large product lists, customers can apply filters to instantly display relevant items. This improves navigation and helps shoppers locate products faster.
The widget is typically used together with WooCommerce product listing layouts created in Elementor.
Part of WooCommerce Elementor Widgets #
The Product Filters widget belongs to the WooCommerce widget collection available in Spexo Addons. These widgets allow you to design WooCommerce product layouts and improve the shopping experience directly inside Elementor.
You can view the complete widget collection on the WooCommerce Elementor Widget Library.
When to Use the Product Filters Widget #
The Product Filters widget is useful when you want to allow customers to refine product results on shop or archive pages.
This widget is often used with layouts that Display WooCommerce Product Grids and components that Show Product Stock Status.
Requirements #
Before using the Product Filters widget, make sure the required plugins and product data are configured.
- WooCommerce plugin installed and activated
- Products created in your WooCommerce store
- Product categories or attributes configured
- Elementor installed and active
- Spexo Addons plugin installed and active
How to Activate Product Filters #
Follow these steps to enable the Product Filters widget in Spexo Addons.
- Go to your WordPress dashboard.
- Navigate to Spexo Addons → Widget Settings.
- Search for Product Filters in the WooCommerce widgets list.
- Enable the widget using the toggle switch.
Once enabled, the widget will be available inside the Elementor editor.
How to Add Product Filters in Elementor #
After activating the widget, you can add it to a page layout.
- Edit the WooCommerce shop or product listing page using Elementor.
- Search for the Product Filters widget.
- Drag the widget into your layout.
- Configure the filter options from the Content settings.
Content Settings #
Open the Content tab in Elementor to configure filter functionality.
General #
The General settings allow you to configure how the product filters behave on the page.
You can choose the filter source and configure how products should be filtered based on categories, attributes, or other WooCommerce conditions.
Title #
The Title settings control the heading displayed above the filter section.
You can enable or disable the title and adjust how the filter title appears to visitors.
Search #
The Search option allows you to add a search field inside the filter area.
This helps users quickly search through filter options when a large number of categories or attributes exist.
Style Settings #
Open the Style tab in Elementor to customize the visual appearance of the filter interface.
Filter Style #
This section allows you to change filter label colors, typography, borders, and spacing.
You can adjust these settings to match the design of your WooCommerce shop page.
Common Issues and Fixes #
If the filters do not display any results, confirm that WooCommerce products exist and product attributes or categories are configured.
If the widget does not appear in Elementor, check the Widget Configuration Guide to confirm the widget is enabled.
Frequently Asked Questions #
Why are product filters not showing results? #
Filters require WooCommerce products and configured categories or attributes. If these are missing, the filter results may appear empty.
Can I add search inside product filters? #
Yes. The Search option allows customers to quickly find filter options when many categories or attributes are available.
Can I style the filter interface? #
Yes. The Style tab provides options to customize typography, colors, borders, and spacing of the filter controls.
Getting stuck? Feel free to Contact Our Support for further assistance.
Navigation:
