FacetWP Color Addon

Filtering by color without opening every product page

Someone looking for a sofa, a dress or a phone case usually starts with the color. If the listing only offers text names like "blue" or "bottle green", they end up opening page after page to check. Color is understood at a glance, while reading it takes more effort. FacetWP Color Addon turns those values into color swatches that people click to filter posts or products.

There is something worth knowing before installing it: the filter is only as good as the data behind it. If color in your catalog is free text written five different ways, the swatches will come out wrong or not appear at all. The real work is organizing your colors, not the plugin.

FacetWP Color Addon only understands valid colors

It is a facet type that adds to FacetWP, so it does not work on its own: you need FacetWP installed and a listing to filter. The facet draws rectangular swatches from the values in its data source, which can be a custom field, a category or custom taxonomy or, with WooCommerce, a product attribute. If you use Advanced Custom Fields, a Color Picker field works, with or without transparency.

The accepted values are these:

• A color keyword without spaces, such as blue. "Navy blue" written with a space is not valid.
• A hexadecimal value with 6 digits, 3 digits (#09F) or 8 digits, where the last two set the transparency. It must always start with #.
• An rgb or rgba value, such as rgba(0,153,255,0.5).

If the data is not a recognizable color, there is no swatch to draw. Do not expect anything other than color swatches generated from those values.

AND narrows, OR widens: how several colors combine

The facet logic decides what happens when more than one swatch is chosen. With AND (match all) only the results that have every selected color remain, and the other swatches disappear if they no longer have results. With OR (match any) the results increase and all swatches stay visible. A second click on a selected swatch cancels that choice.

Other useful settings:

• Sort the swatches by highest result count, by displayed value, by raw value or by term order.
• Include or exclude specific colors with the value modifiers, typing the term name exactly, with its spaces and capitalization.
• Limit the number of visible choices.
• Show only the children of a parent term when the taxonomy is hierarchical.

Term order requires a plugin that defines that order and, in this facet, it only works well if all colors sit at the same level of the hierarchy. You must also use a real taxonomy as the source, not an ACF field set to a taxonomy. The parent term setting does not work on multilingual sites: you need one facet per language or to index the parents of all languages.

Questions to settle before building the color filter

Does it work without FacetWP?

No. It adds a facet type to FacetWP, which is what indexes and filters.

Can I use WooCommerce attributes?

Yes, a product attribute can be the data source, as long as its values are valid colors.

Can I show only some colors?

Yes, with the value modifiers you can include or exclude whichever you want, typing the exact term name.

What if my site has several languages?

The swatches work the same, but the parent term setting does not, because identifiers change per language.

Colors get fixed at the source, not in the facet

Before creating the facet, check where your colors come from. If you use custom fields, standardize how they are written. If you use hexadecimals, make sure they all carry the hash sign. If you use keywords, make sure they have no spaces. With a clean source, the facet takes just a few settings; with a messy one, you will spend your time hunting for why a swatch does not appear.