Variation Swatches for WooCommerce by Emran Ahmed lets you attach colors or images to your WooCommerce product attributes.

With this plugin activated, you can use a Color facet to filter products by color.

When adding a Color facet, set its Data Source to the product attribute containing your custom color/image swatch.

Add support for dual color swatches

If you are using the Pro version of the plugin, you have the option to use “dual color” swatches in attributes with type “Color”. See the plugin’s documention for how to set this up.

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

Dual-color swatches have a primary and a secondary color, displayed together in one swatch, with a 45-degree separation angle.

With the following code, it is possible to let these dual colors show up in a Color facet.

Note that in the code below, 45deg is set as the angle of the two colors (as opposed to -45deg which is the default angle in the plugin) because it works better visually with the white checkmark that is shown in the facet’s swatch when it is selected.

add_filter( 'facetwp_facet_option', function( $item, $result, $params ) {

  $termid          = $result['term_id'];
  $is_dual_color   = wc_string_to_bool( get_term_meta( $termid, 'is_dual_color', true ) );
  $primary_color   = sanitize_hex_color( get_term_meta( $termid, 'product_attribute_color', true ) );
  $secondary_color = sanitize_hex_color( get_term_meta( $termid, 'secondary_color', true ) );
  $has_image       = get_term_meta( $termid, 'product_attribute_image', true ); 

  if ( $is_dual_color && woo_variation_swatches()->is_pro() && empty( $has_image ) ) {

    $dom = new DOMDocument;
    $dom->loadHTML( $item );
    $swatch = $dom->getElementsByTagName( 'div' );

    if ( isset( $swatch[0] ) ) {
      $swatch[0]->removeAttribute( 'data-img' );
      if ( $secondary_color ) {
        $swatch[0]->setAttribute( 'style', 'background: linear-gradient(45deg, ' . $primary_color . ' 0%, ' . $primary_color . ' 50%, ' . $secondary_color . ' 50%, ' . $secondary_color . ' 100%)' );
      }
      $item = $dom->saveHTML( $swatch[0] );
    }
  }

  return $item;
}, 11, 3 );

Add support for color groups

If you are using the Pro version of the plugin, you have the option to use “color groups”. See the plugin’s documention for how to set this up. The color groups settings can be found in GetWooPlugins > Swatches Settings > Group.

With the following code, it is possible to let FacetWP index these color groups instead of the individual colors.

add_filter( 'facetwp_index_row', function( $params, $class ) {

  if ( woo_variation_swatches()->is_pro() ) {

    if ( 'my_facet_name' == $params['facet_name'] ) { // Replace 'my_facet_name' with the name of your facet

      // Get the color taxonomy term
      $term_id = (int) $params['term_id'];

      // Get the group slug from the term
      $group_slug = sanitize_text_field( get_term_meta( $term_id, 'group_name', true ) );

      if ( $group_slug ) {
        $display_value = sanitize_text_field( woo_variation_swatches()->get_backend()->get_group()->get( $group_slug ) );
      }

      // Set the facet_display_value to the group name
      $params['facet_display_value'] = $display_value; // facet_display_value is used for the facet's choices

      // Set the facet_value to the group slug
      $params['facet_value'] = $group_slug; // facet_value is used for the facet's filtering and in the url
    }
  }

  return $params;
}, 10, 2 );

With the above code in place, a facet that has the product attribute containing your colors as source will show the color group names as choices instead of the individual colors. However, in a normal Color facet, there are no color names, just swatches. So this will only work when you use this with another facet type than the Color facet, for example with a Checkboxes, Radio or Dropdown facet.

You can make it work with a Color facet if you combine it with the code to show the color names besides the swatches. The downside of this approach is that the exact swatch color that is showed for the color group is unpredictably chosen from the colors in the group. So this will only be useful if the colors in your color group are all similar, and if it does not matter which exact swatch is picked to represent the group.

See also