To add filter widgets, access Appearance > Widgets and add them in one of the following sidebars:
- Shop Sidebar . Plain simple sidebar eg: Amsterdam Demo
- Filter Panel. Filters will be shown in a side panel that opens on clicking the FILTER button on the top right side of the products eg: London Demo .
- Filter Top Bar . Will show the filters (as dropdowns) before the product listing eg: Melbourne Demo .
All the sidebars above will be shown in the frontend automatically only when they have widgets inside them.
- Filter by Attribute . Displays attributes, styled depending on their attribute type. Read more on Variation Swatches.
- Filter by Category;
- Filter by Price;
- Filter “In Stock” items;
- Filter “On Sale” products;
- Filter “Featured” products;
- Filter by Tags;
- Filter by Custom fields (Meta data) . How to work with this widget;
- Filter by custom taxonomy. Used when you use a plugin that uses a custom taxonomy and want to make it available for filters;
- Active Filters . Displays the active filters that are in use, along with a reset button.
All of the above widgets have the option to either display as a list (and depending on the type, either as colored boxes or buttons) and as dropdowns.
WooCommerce comes packed with a bunch of widgets that filter too, however they’re reloading the page:
- Filter Products by Attribute
- Filter Products by Rating
- Filter Products by Price
- Product Categories (not a filter widget but good enough to use)
Usually filtering widgets are limited to WooCommerce catalog pages, which are auto-generated. Elementor edited pages are not, they’re just pages. This is an important difference between them. So to make possible the use of filtering widgets into an Elementor page, please follow these steps:
1. Enable filtering in Product grid element.
While editing the page in Elementor, you’ll likely end up using the Product Grid element. Make sure to enable the “Page uses filters” option, eg: https://d.pr/i/QMY874 . This will add a meta flag to this page to let it know that it’ll be used as a product catalog and it’s ok to load the filters.
2. Use the Sidebar element
First, please access Appearance > Widgets and make sure to add filtering widgets in one of the sidebars positions.
Now back in Elementor, make sure to create a new column, and inside it add the Sidebar element and choose the Sidebar position you added the widgets into.
*In the future i will try to make adding the widgets directly, but at the moment only Sidebar is possible.
Access Customizer > WooCommerce > Ajax Filters and at the very bottom please register the queries eg: https://d.pr/i/ncwB2F . You will need to label it and add a meta_key, meta_value and comparison operator.
After you registered the queries, please access Appearance > Widgets and create a new Filter by Custom Fields widget.
You will need to choose which registered queries to display eg: https://d.pr/i/cR4ro5 .