Filter results by color
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.
|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:
|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. Setting the Count to
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
- 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
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:
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 add-on facet type integrates with several WooCommerce ‘color swatches’ plugins:
- Variation Swatches for WooCommerce by Emran Ahmed.
This plugin 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.
- WooCommerce Attribute Swatches by IconicWP.
This premium plugin works similarly to the one above (same setup instructions).
- 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
- New added support for the Iconic Variation Swatches for WooCommerce plugin
- New added support for the Variation Swatches for WooCommerce plugin
- Changed replaced `wp.hooks` with `FWP.hooks` due to conflict with WP 5.0