WooCommerce Attribute Swatches by IconicWP is a premium plugin that 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 Variation Swatches for WooCommerce.

Customize the User Selections and color swatches title values

With WooCommerce Attribute Swatches 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.

See also