With the Products Filters widget, shoppers can filter their product searches depending on attributes such as Price, Rating, Color, and Category.
Let’s learn how you can use Product Filters Widgets on your wooCommerce site:
How to add product filters in your Elementor WooCommerce website #
Learn how to add to your Elementor WooCommerce website and customize product fllters layout and style. This process constst of just 4 steps.
Step 1: Enable Product Filters Widget #
To enable the Product Filters widget,
- Go to ShopEngine > Widgets > Product Filters
- Turn on Product Filters under General section
- Save changes
Note: You can also turn on Product Filters with a global setting that turns on all the widgets of ShopEngine at the same time.
Step 2: Add Product Filters #
Before you can add the widget you need to create ShopEngine Shop/ Archive Template first. Check out the documentation on how to create a Shop Template.
To add Product Filters:
- Go to ShopEngine > Templates > Archive Template
- Click on Edit with Elementor
- Search for Product Filters on Elements Search option
- Drag and drop the widget
- Click on Update to save changes.
Step 3: Customize Content Settings of Product Filters #
Go to Content > Filters to customize the following settings:
- Price Filter: Click on the edit option to change the Title, Price Range, Min Price, Max Price and Dot Type. Dot type is the end points of the price line.
- Rating Filter: You can change the rating filer title.
- Color Filter: Here you can change the filter name. You can also turn on/off the show color dot option.
- Category Filter: You can customize the Title, Product Categories, and Order by.
- Image Filter: You can change and customize the title. Users can then filter the products based on product images.
- Label Filter: You can change the title and users can filter products based on labels.
- Shipping Filter: Users can choose this filter to filter the products based on shipping method.
- Stock Filter: This filter allows the users to filter the products based on the stock amount.
- On Sale Filter: If users wish, they can filter the products based on the sale. So, if your store is offering any sale, customers can easily find them.
Show hierarchy. You can also hide empty categories from here.
Go to Content > Layout to customize the following settings:
- Enable container toggle button: Here you can turn on the toggle button option so the whole widget can be hidden under a toggle button. You can also set the alignment, set if you want to show the icon, upload a icon, choose the icon position and also the container width.
- Columns (per row): Choose how many filers you want per column.
- Column Padding: Adjust the left, right, top and bottom padding of the column.
Step 4: Style Settings of Product Filters #
Go to Style tab to customize the following style settings:
- Common Styles: Expand this option to change Title,Typography, Body Typography, Heading Color, Filter label Color, Global Font Family, Title padding Bottom, Item Margin Bottom, Checkbox Style, Checkbox Icon, Icon Library, Checkbox Border Color, Checked Icon Color,Checked Background, Margin right, Checkbox Icon Size,Checkbox Size,Vertical position and Border Radius.
- Filter Toggle Button & Container: Here you can change the text color and background for both normal and hover view. Also, you can change Border Type, Width, Color, Padding, Margin, Container Background Color, Border Type, Container Padding (px) and Container Box Shadow.
- Price Filter / Range Slider: Expand this option to change Slider Color, Active Slider Color, Range Pricing Text Color, Reset Margin bottom, text and background color for both normal and hover view.
- Rating Filter: Here you can chose chose the rating icon, color of the active icon, space between the rating and star size.
- Category Filter: Adjust the top, right, bottom and left padding around sub category.
After making all the changes click Update to save. Now Product Filters should be visible on the storefront with all the customization and styling.
Here is the preview of Product Filters Widget