Comma separated product attribute terms if there are multiple values available

Question

In WooCommerce, I'm currently building a function that will echo some product attributes in the shop page. I would like to separate these with commas if there is multiple attribute values available, but I don't know how.

My code:

add_action('woocommerce_after_shop_loop_item_title', 'TitleVariations', 10);
function TitleVariations()
{
global $product;
    
$colormonth = $product->get_attribute('color-month');
$finish = $product->get_attribute('finish');
$design = $product->get_attribute('design');

echo '<span class="variation-display">';
echo __($colormonth, 'woocommerce');
echo __($finish, 'woocommerce');
echo __($crossdesign, 'woocommerce');
echo '</span>';
}

Answer 1

The WC_Product method get_attribute() gives a comma separated string of values when there is more than one value… You also need to check that each different attribute has at list one term…

To get the product attribute label name, yo can use wc_attribute_label() product attribute function.

1). If you want to get each product attribute with the label name and the term(s) value(s) (each different attribute in one line), you will use the following instead.

This code handle also custom product attributes:

add_action('woocommerce_after_shop_loop_item_title', 'display_loop_product_attributtes', 10);
function display_loop_product_attributtes()
{
    global $product;
    
    // Here define your product attribute names (slugs)
    $attribute_names = array('color-month', 'finish', 'design'); 
    $attributes      = array(); // Initializing
    
    // Loop Through product attributes array
    foreach( $attribute_names as $attribute_name ) {
        if( taxonomy_exists( 'pa_' . $attribute_name )  ) {
            $attribute = 'pa_' . $attribute_name; // Custom taxonomy
        } else {
            $attribute = $attribute_name; // Custom attribute (not a taxonomy)
        }

        $values_str = $product->get_attribute($attribute);

        if ( $values_str ) {
            $attributes[] = '<strong>' . wc_attribute_label($attribute) . ':</strong> ' . $values_str;
        }
    }

    // Output product attribute label / values pairs (one by line)
    if( ! empty( $attributes ) ) { 
        echo '<span class="variation-display">' . implode( '<br>', $attributes ) . '</span>';
    }
}

---

2). But if you want to get all your product attributes terms as a comma separated string, your code will be something like in Display specific product attributes under product title in Woocommerce archive pages.

So for your code:

add_action('woocommerce_after_shop_loop_item_title', 'display_loop_product_attributtes', 10);
function display_loop_product_attributtes()
{
    global $product;
        
    $color_month = $product->get_attribute('color-month');
    $finish      = $product->get_attribute('finish');
    $design      = $product->get_attribute('design');

    $attributes  = array(); // Initializing
    
    if ( $color_month ) {
        $attributes[] = $color_month;
    }
    if (  $finish ) {
        $attributes[] = $finish;
    }
    if ( $design ) {
        $attributes[] = $design;
    }

    // Output product attribute values
    if( ! empty( $attributes ) ) { 
        echo '<span class="variation-display">' . implode( ', ', $attributes ) . '</span>';
    }
}

Code goes in functions.php file of the active child theme (or active theme). It should works.

Answer 2

Collect your values to array and then implode this array:

$values = [
    __($colormonth, 'woocommerce'),
    __($finish, 'woocommerce'),
    __($crossdesign, 'woocommerce'),
];

// if some values returned by `__()` are empty strings, 
// you can filter your array so as to remove them
$values = array_filter($values);

echo '<span class="variation-display">';
echo implode(', ', $values);
echo '</span>';