FacetWP Color facetThe Color facet type allows users to filter posts or products by color.

The facet creates clickable rectangular color swatches from the color values in the Data source field.

Depending on the Behavior setting, selecting multiple color swatches narrows or widens the displayed result set. A second click on a selected color swatch resets that choice.

Available options

Name Description
Data source Choose a Data source that contains a valid color value. This can be a custom field, a category or custom taxonomy, or – if you are using WooCommerce – a product attribute. For using taxonomies and product attributes, see below.

Valid color values are:

  • An existing color keyword (for example: blue). Note: valid color keywords never contain spaces.
  • A hexadecimal (hex) color value, normally consisting of a hash-sign with 6 digits (#0099FF). Also valid are 3-digit shorthand values (#09F) and 8-digit hex values, where the last 2 digits contain an alpha value for the transparency (for example: #0099FF50, which is a 50% transparent #0099FF). If you are using hex color values, make sure they always start with #
  • An rgb value (rgb(0,153,255)) or rgba value (for example: rgba(0,153,255,0.5), where 0.5 means 50% transparent)
Behavior Narrow the result set – when selecting multiple colors, only display results matching all selected colors:

Widen the result set – when selecting multiple colors, display all results matching any selected colors:

Count The maximum number of color choices to show. Use -1 for no limit. However, note that FacetWP limits the maximum count at 1000 for usability and performance reasons.

Using a custom taxonomy or WooCommerce product attribute as Data source

In the Color facet’s settings, you can choose a taxonomy as the Data source. This can either be a custom taxonomy, or – if you are using WooCommerce – a global product attribute, which is also stored as a custom taxonomy.

When a taxonomy is set as Data source, FacetWP treats color values as follows:

  • Term names are used to generate the display of the facet’s color swatches. This means that the term names must be a valid color value. (Technically, the term names are stored in FacetWP’s index table as facet_display_value).
  • Term slugs are used for filtering, which means they will show up in the url after interacting with the Color facet. (Technically, the term slugs are stored in FacetWP’s index table as facet_value).
FacetWP Color facet using taxonomy terms or WooCommerce product attributes as data source
When using a custom taxonomy or WooCommerce product attribute to store Color facet values, term names are used to display the colors, while term slugs are used for filtering and the url.

You can use the same color value for the term name and term slug, but keep in mind that WordPress removes spaces, commas and other special characters when it auto-generates the term slug from the term name. For example, if the color value in the term name is set to rgb(255,0,0), the auto-generated term slug will become rgb25500. This will work, but to make the filtered url look more readable, you can manually change the term slug to red, which – for a facet with name “color” – will make the url look like: /?_color=red.

Using a taxonomy term custom field as data source

With Advanced Custom Fields or Pods, you can add custom fields to taxonomy terms. If you set such a custom term field as the data source for the Color facet, you will notice that the facet does not display any choices. This is because custom fields attached to taxonomy terms cannot be indexed directly by FacetWP.

However, with a bit of custom code, using a custom term field as data source is possible. See this section on the Advanced Custom Fields page for instructions.


The Color facet integrates with several WooCommerce ‘color swatches’ plugins:

Variation Swatches for WooCommerce

The Variation Swatches for WooCommerce plugin by Emran Ahmed lets you attach colors or images to your WooCommerce product attributes. When adding a facet, set its Data Source to the product attribute containing your custom color/image swatch.

Add support for dual colors

Variation Swatches for Woocommerce Pro - dual color swatches
Dual colors in a Color facet with Variation Swatches for WooCommerce Pro

If you are using the Pro version of this plugin, you have the option to use “dual color” swatches in attributes with type “Color”. Dual-color swatches have a primary and a secondary color, displayed together in one swatch, with a 45-degree separation angle.

With a bit of custom code, it is possible to let these dual colors show up in a Color facet.

Add support for color groups

The Pro version’s “color groups” feature also can be used with FacetWP. With a bit of custom code it is possible to let FacetWP index these color groups instead of the individual colors.

WooCommerce Attribute Swatches

The WooCommerce Attribute Swatches plugin by IconicWP also lets you attach colors or images to your WooCommerce product attributes, similar to the Variation Swatches for WooCommerce plugin.

Display the color names next to the color swatches

How to show color names next to the color swatches in a color facet.

Add the following code to your (child) theme’s functions.php to add the color names next to the color swatches.

This example uses $result['facet_display_value'] to retrieve the color’s name, which is the term name if your color source is a taxonomy.

Depending on your source field setup you may need to use $result['facet_value'] (which is the term slug in a taxonomy). Or you can use $result['term_id'] to lookup a custom field saved for the taxonomy term.

How to use custom PHP code?

PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info

add_filter( 'facetwp_facet_option', function( $item, $result, $params ) { $item = str_replace( '<div', '<div class="facetwp-color-item"><div', $item ); $item = str_replace( '</div>', '<div class="facetwp-color-name">' . $result['facet_display_value'] . '</div></div></div>', $item ); return $item; }, 11, 3 );

Additionally, add the following CSS to your theme’s styles to put each color plus its name on a single line:

How to use custom CSS?

CSS code can be placed in your (child) theme's style.css file. Alternatively, you can add it manually between <style> tags in the <head> section, in your (child) theme's header.php file. You can also add it with a wp_head hook in your (child) theme's functions.php file or in the Custom Hooks add-on. Or you can use a code snippets plugin. More info

.facetwp-color-item { display: block; } .facetwp-color { position: relative; } .facetwp-color-name { position: absolute; left: 30px; top: 0; padding-left: 12px; display: inline-block; vertical-align: top; line-height: 30px; white-space: nowrap; }



  • Fixed replaced old `settings_html` method


  • Fixed fatal error caused by some "Variation Swatches for WooCommerce" 2.0.0 functions being removed


  • Improved setting the "Count" to "-1" will display all choices


  • Improved removed jQuery dependency


  • Fixed removed `touchstart` event handler to prevent duplicate-click issues




  • Changed replaced `wp.hooks` with `FWP.hooks` due to conflict with WP 5.0

See also