The 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

NameDescription
Data sourceChoose 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)