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.

Create a custom dynamic tag to output color swatches for each product

If you are using a Listing Builder template and you want to show a product’s available colors as color swatches in each product item, you will probably first try to create a builder item with the color attribute (for example pa_color) as source. That will work to display the colors, but it outputs the color names (the slugs), not any color swatches.

The following snippet creates a custom dynamic tag {{ my-color-swatches }}, using the facetwp_builder_dynamic_tag_value hook: 

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_builder_dynamic_tag_value', function( $tag_value, $tag_name, $params ) {

  // Replace 'my-color-swatches' with the name of your custom dynamic tag name.  
  if ( 'my-color-swatches' == $tag_name ) {

    // Replace 'pa_color' with the name of the WooCommerce attribute used for the product color. 
    // Note that 'pa_' is automatically added by WooCommerce before the attribute's slug. 
    $terms = wp_get_post_terms( $params['post']->ID, 'pa_color', array( 'fields' => 'ids' ) );
    $tag_value = '';
    foreach($terms as $term_id) {
      $color_code = get_term_meta($term_id, 'iconic_was_term_meta', true);
      $color_code = maybe_unserialize($color_code);
      $color_code = $color_code['colour-swatch'];
      if ($color_code) {
        $tag_value .= '<div class="color-swatch" style="background-color: ' . $color_code . '; width: 24px; height:24px; display: inline-block; margin: 0 12px 0 0;"></div>'; // Adapt the CSS as needed.
      }
    }
  }

  return $tag_value;
}, 10, 3 );
A custom dynamic tag {{my-color-swatches}} in a Listing Builder HTML item.
A custom dynamic tag {{my-color-swatches}} in a Listing Builder HTML item.

The tag created in the above snippet first gets the hex color codes for each of the color terms selected in the product.

It then creates a <div> for each color swatch, with inline CSS that sets the hex color code as the div’s background color. Adapt the CSS to change the style and layout of the swatches.

You can now use the {{ my-color-swatches }} dynamic tag in a Listing Builder item. For example in an HTML item, as shown in the image on the right.

See also

Last updated: March 27, 2024