The Colors Swatches Filter widget for Elementor is a dynamic and visually appealing tool that lets you create interactive product filters using color swatches. Perfect for eCommerce websites, this widget enhances user experience by providing a stylish way for customers to filter and explore products based on their preferred colors. Whether you’re showcasing a fashion line, furniture collection, or any product category, the widget offers seamless customization options, ensuring your filters align perfectly with your site’s design and branding.
Let’s look at each of the options in the Colors Swatches Filter widget for Elementor below.
Add a Colors Swatches Filter Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Colors Swatches Filter”
- Hover over the widget in the search results and click install
- Add the“Colors Swatches Filter” widget to any Elementor Page
Before starting, ensure you have added a WooCommerce widget, as the colors swatches filter works exclusively with WooCommerce widgets. The filter integrates seamlessly with various types, including ‘Woo Product Grid,’ ‘Woo Product List,’ and more. In this tutorial, we’ll demonstrate using one of these WooCommerce widgets.
To know more about WooCommerce widgets, click here.
Filter Settings
Color Meta Field
Enter the color meta field for color swatches filter.
Show Meta Field
Show the Meta Field names to use for input to show image and color.
Sync to Posts Widget After Load
Filter will show only terms that are included in the post widget query.
Connect To Grids Group
Choose to what grids group the filter connects.
- Automatic
- Group 1
- Group 2
- Group 3
- Group 4
- Group 5
Override Query Terms
Choose to what grids group the filter connects.
Filter Role
Set the filter role.
- Single - there is no children filters.
- Main - there are more filters in the page, and this one will not be refreshed when click on the other.
- Child - This filter will be not visible on start, and will appear only when some relevant main filter selected.
Term Selection Settings
Select Post Type
Select the post type from given options.
- Post
- Floating Element
- Product
- Variations
Select Taxonomy
Select the taxonomy from dropdown options.
- Category
- Tag
- Format
Include By
Select from the options below to include the exact posts you want.
- Specific Terms
- Children of
- Children of Current Term
- By Search Text
- Only Childless
- Not a Child of Other Term
- Term Meta
Exclude By
Choose the posts you want to exclude.
- Specific Terms
- Current Term (for archive only)
- Hide Empty Terms
Max Number of Terms
Choose the max number of terms you want to display.
Order By
Order the terms using below given options.
- Default
- Name
- Slug
- Term Group
- Term ID
- Description
- Parent
- Count - (number of posts associated)
- Include - (specific terms order)
- Meta Value
- Meta Value - Numeric
Order Direction
Select the order direction of posts.
- Default
- Descending
- Ascending
Layout Settings
Layout Type
Select the layout of widget.
- Grid
- Flex
Show Color Names
Show color name in filter.
Selection Style
Set the selection type.
- Checkmark
- Border
RTL
Turn on for right to left websites.
Loader Settings
Loader Type
Select the loader type.
- Grayed Tab
- Hidden Filter
Limit Num Tabs While Loading
Leave empty for not limit. If selected, the loader will show only specified number of tabs while loading.
Post Count Settings
Show Post Count On Term
Display the post count associated with terms.
Count Wrapper (open)
Type the opening wrapper for the post count display.
Count Wrapper (close)
Type the closing wrapper for the post count display.
Colors Swatches Filter Widget Styling
A variety of styling options lets you customize every detail of the widget’s design. Select colors that align with your website’s style, and adjust the text, icons, fonts, and layout to ensure the widget looks and functions exactly as you prefer.
Checkbox Layout Flex Styling
Set the checkbox layout, alignment, gap, and row gap.
Checkbox Styling
You can set the checkbox size, background color, border radius, border, and shadow.
Checkbox Label Styling
In this section, set the label color, typography, shadow and gap.
Post Count Styling
You can set the post count spacing, color, typography, and shadow.
Active Color Styling
Here, you can set the scale, intend and color of active fitler.
Color Swatches Filter Design Examples For Elementor
Here are some live use cases for the Color Swatches Filter Widget.
Colors Swatch filter on fashion ecommerce store.
Colors Swatch filter shown in tennis rackets store.
Thank you for exploring the possibilities with the Color Swatches Filter Widget for Elementor! This widget is a game-changer for crafting user-friendly and visually stunning product filters based on product color. With its extensive customization options and responsive design, it’s the perfect addition to any eCommerce website. If you have questions or need further assistance, feel free to reach out. Don’t forget to check out our other widgets to unlock more creative opportunities for your Elementor-powered site!
