Classify product attribute terms by type in Woocommerce product for display

Question

I know that I can create attributes of color, size and etc. But for some reason, I had to combine 3 attributes into one and then displayed them differently.

Now, I've the attribute with the values :

pa_mixed : Red, Blue, Green, S, M, L, Children, Adult

But on the front end I have to display like :

Colors : Blue, Red
Size : M
Aged : Children

So far I have tried :

    if (!empty ($product->get_attribute('pa_mixed'))):
        $pa_mixed = $product->get_attribute('pa_mixed');
    else:
        $pa_mixed = "";
    endif;

    $size = array('S','M','L'); 
      
      if ( in_array( $size, $pa_mixed ) ) {
         //colors attributes
      }
      //etc

And finally I got lost

please help me to find the right way, thank you

Answer 1

Updated (handling fewer attribute classified types)

Try the following, that will display product attributes, classified by type, in single product pages, below the short description:

add_action( 'woocommerce_single_product_summary', 'display_pa_mixed_classified_attributes', 25 );
function display_pa_mixed_classified_attributes() {
    global $product;

    $options = $product->get_attribute('pa_mixed'); // Attribute term names set in the product (string)
    $options = ! empty($options) ? explode(', ', $options) : array(); // Convert to an array

    if ( ! empty($options) ) {
        // Classifying "Mixed" attribute terms
        $data    = array(
            'colors' => array('label' => __('Colors', 'woocommerce'), 'options' => array('Red', 'Blue', 'Green')),
            'size'   => array('label' => __('Size', 'woocommerce'), 'options' => array('S', 'M', 'L')),
            'aged'   => array('label' => __('Aged', 'woocommerce'), 'options' => array('Children', 'Adult')),
        );

        $types   = array('colors', 'size', 'aged'); // Defined types
        $values  = $new_types = array(); // Initializing

        // Loop through the "Mixed" attributes term names set in the product
        foreach( $options as $option ) {
            foreach( $types as $type ) {
                if ( isset($data[$type]['options']) && in_array($option, $data[$type]['options']) ) {
                    $values[$type][] = $option;
                    $new_types[$type] = $type;
                }
            }
        }
        echo '<div class="attribute_pa_mixed" style="padding-bottom:16px">';

        // Display: Loop through classified types
        foreach( $new_types as $type ) {
            printf( '<div class="attribute-%s">
            <span class="label">%s :</span> <span class="options">%s</span>
            </div>', $type, $data[$type]['label'], implode(', ', $values[$type]) );
        }
        echo '</div>';
    }
}

Code goes in functions.php file of your child theme (or in a plugin). Tested and work.

Based on this attributes, product settings:

I get the following display on a product (single product page):