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

FacetWP has built-in support for this plugin. When it is active, 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.

This plugin works similarly to WooCommerce Attribute Swatches.

Customize the User Selections and color swatches title values

With Variation Swatches for WooCommerce active, and a Color facet that uses a taxonomy as data source, keep the following in mind.

If you have a User Selections facet on your page, and a Color facet choice is selected, by default the term name is shown as the color name in the User Selections. This color name will also automatically be in the title attribute of the color swatch, resulting in the color name being displayed when hovering over the swatch.

With the facetwp_facet_display_value hook, it is possible to filter and customize this color name.

The following example takes the default label (facet_display_value, the term name), and adds the word “color” after it. So if you have a choice with the term name Orange, without the snippet, it will show up as “Orange” in the User Selections and title attribute. With the snippet, it will show up in both as “Orange color”:

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_display_value', function( $label, $params ) {
  if ( 'my_color_facet_name' == $params['facet']['name'] ) { // Replace 'my_color_facet_name' with the name of your Color facet
    $label = $label . ' color';
  }
  return $label;
}, 10, 2);

If for some reason you want to use the facet_value (the term slug), you can set the $label to that value, before customizing it:

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_display_value', function( $label, $params ) {
  if ( 'my_color_facet_name' == $params['facet']['name'] ) { // Replace 'my_color_facet_name' with the name of your Color facet
    $label = $params['row']['facet_value']; // First set $label to the facet_value (the term slug). By default, $label contains facet_display_value (the term name).
    $label = ucwords(str_replace('-', ' ', $label)); // Replace dashes with  and capitalize the first letters.
  }
  return $label;
}, 10, 2);

Be aware that the above-described behavior is different when you are using a Color facet without Variation Swatches for WooCommerce.

Translate the User Selections and color swatches title values

The facetwp_facet_display_value hook can also be used to translate the color names in the User Selections and title attribute, as shown in the following example.

Note that $label by default contains the facet_display_value (the term name):

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_display_value', function( $label, $params ) {
  if ( 'my_color_facet_name' == $params['facet']['name'] ) { // Replace "my_color_facet_name" with the name of your Color facet

    // Get current language for WPML:
    $lang = ( ! empty( FWP()->facet->http_params['lang'] ) ) ? FWP()->facet->http_params['lang'] : apply_filters( 'wpml_current_language', null );

    // Get current language for Polylang:
    // $lang = ( !empty( FWP()->facet->http_params['lang'] ) ) ? FWP()->facet->http_params['lang'] : pll_current_language();

    switch ( $lang ) {
      case 'de' :
        if ( 'red' == $label ) {
          $label = 'Rot'; // translate "red" into German. By default, $label contains facet_display_value (the term name).
        }
        break;
      case 'nl':
        if ( 'red' == $label ) {
          $label = 'Rood'; // translate "red" into Dutch. By default, $label contains facet_display_value (the term name).
        }
        break;
    }
  }
  return $label;
}, 20, 2 );

As in the previous code example, when you translate the color name like this, the output will also appear in the title attribute of the color swatch, resulting in the translated color name being displayed when hovering over the 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.

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 ) {

  $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.

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_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 shown 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.

Fix swatch selection after facet filtering

Product swatches in Variation Swatches for Woocommerce Pro.
Product swatches in Variation Swatches for Woocommerce Pro.

If you are using Variation Swatches for WooCommerce Pro with a WooCommerce products loop, you’ll notice that clicking the swatches in the product items will not change the product image anymore, after facets have been used.

Add the following code to your (child) theme’s functions.php to re-initialize this functionality after each facet refresh:

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_action( 'facetwp_scripts', function() {
  ?>
    <script>
      document.addEventListener('facetwp-loaded', function() {
        jQuery(document).trigger('woo_variation_swatches_pro_init');
      });
    </script>
  <?php
}, 100 );

See also