---
title: "How to Create WooCommerce Color Swatches Filter in Elementor?"
url: https://theplusaddons.com/docs/create-woocommerce-color-swatches-filter-in-elementor/
date: 2023-09-14
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "A row of checkbox labels reading \"Red\", \"Blue\", \"Green\" asks a shopper to translate words into colours in their head - a swatch shows the actual colour instead. The Woo..."
image: https://theplusaddons.com/wp-content/uploads/2023/09/How-to-Create-WooCommerce-Color-Swatches-Filter-in-Elementor_-1024x536.jpg
word_count: 241
---

# How to Create WooCommerce Color Swatches Filter in Elementor?

## 

- WP Search Filters renders each WooCommerce attribute value as a clickable colour swatch when the display style is set to Color, using the colour set on that attribute term.
- The Plus Addons for Elementor Pro requires Elementor, WooCommerce, and a WooCommerce product attribute such as Color with a colour value set on each term before the widget works.
- The Plus Addons > Widgets panel enables WP Filters, then the widget is set to Filter Type: Woo Filter and Select Attributes to the store’s colour attribute taxonomy.

A row of checkbox labels reading "Red", "Blue", "Green" asks a shopper to translate words into colours in their head - a swatch shows the actual colour instead.

The Woo Filter's **Color** display style renders each attribute value as a clickable colour swatch, using the colour set on that attribute term.

For the full settings tour of the **WP Search Filters** widget, see [WP Search Filters Widget Settings Overview](https://theplusaddons.com/docs/wp-search-filters-widget-settings-overview/).

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/woocommerce-builder/ajax-filters/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Edition:** WP Search Filters is a **Pro** widget - it requires The Plus Addons for Elementor Pro to be installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **WP Filters** and turn its toggle on.- **Prerequisite:** [WooCommerce](https://wordpress.org/plugins/woocommerce/) installed and active, with at least a few products published.- A WooCommerce product attribute (e.g. Color) with a colour value set on each term.

## Steps

Add the WP Filters widget, set **Filter Type** to **Woo Filter**, then set the display style to **Color**.

![Woo Filter display style set to Color, showing swatches](https://theplusaddons.com/wp-content/uploads/2026/09/wp-search-filters-woo-filter-color.webp)

Set **Select Attributes** to your store's colour attribute taxonomy.

## Settings Overview

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Select Source (Woo Filter) | Set to Color for swatch-style rendering. | - |
| Select Attributes | The colour attribute taxonomy to read swatches from. | - |

## Related Docs

- [How to Create WooCommerce Product Image Filter in Elementor? (Brand, Texture)](https://theplusaddons.com/docs/create-woocommerce-product-image-filter-in-elementor/)- [How to Create WooCommerce Product Size Filter in Elementor? (Button Filter)](https://theplusaddons.com/docs/create-woocommerce-product-size-filter-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before creating a WooCommerce color swatches filter in Elementor?**
A: Elementor free has to be installed and active, WooCommerce has to be installed and active, and you need at least a few published products. The key piece is a WooCommerce product attribute such as Color, with a colour value set on each term, because the swatches are rendered from those term colors. The Plus Addons for Elementor Pro also has to be installed and active since WP Search Filters is a Pro widget.

**Q: Why are my color swatches not showing as actual colors?**
A: The swatches depend on the attribute term having a colour value set, because the Woo Filter’s Color display style renders each attribute value as a clickable colour swatch using that saved term color. If the terms only exist as labels like Red or Blue, the filter has nothing visual to render. In practice, the attribute setup matters more than the label text.

**Q: How do I create a color swatches filter for WooCommerce products in Elementor?**
A: The setup centers on the WP Filters widget. Add it, set Filter Type to Woo Filter, then switch the display style to Color. After that, point Select Attributes at your store’s colour attribute taxonomy so the widget reads the right terms. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this as part of WP Search Filters inside Elementor.

**Q: Can I use this filter with any WooCommerce product attribute?**
A: The Color display style is meant for a WooCommerce product attribute that already has colour values set on each term, such as Color. That makes it useful when text labels are too slow to scan and shoppers need a visual picker instead. If your attribute is not color-based, this specific swatch rendering does not match the way the widget is described on the page.

**Q: What should I choose in Select Attributes for color swatches?**
A: Select Attributes should point to your store’s colour attribute taxonomy. That setting tells WP Search Filters which terms to read when it builds the swatches, so it is the bridge between your WooCommerce attribute setup and the visual filter output. Picking the wrong taxonomy usually means you are asking the widget to read from an attribute that does not contain your color terms.

**Q: Where can I find more settings for the WP Search Filters widget?**
A: The full settings tour is covered in [WP Search Filters Widget Settings Overview](https://theplusaddons.com/docs/wp-search-filters-widget-settings-overview/). The page also links two related tutorials if you want other visual filters: [How to Create WooCommerce Product Image Filter in Elementor? (Brand, Texture)](https://theplusaddons.com/docs/create-woocommerce-product-image-filter-in-elementor/) and [How to Create WooCommerce Product Size Filter in Elementor? (Button Filter)](https://theplusaddons.com/docs/create-woocommerce-product-size-filter-in-elementor/).