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.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Prerequisite: 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 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.
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. | – |
