phpwordpresswoocommerceproducttaxonomy-terms

Add specific product attributes terms slug as a CSS class in Woocommerce


I'm trying to add the attribute value names of a product attribute as classname for each item.

For example, I have a "Mood" attribute and the value names are "Happy", "Chill", "Energized", "Focused" and "Sleepy". I just need to wrap each of the attribute value names in a span tag and add the individual class like this:

Mood: <span class="attribute-chill">Chill</span> <span class="attribute-sleepy">Sleepy</span>

This is the code I have which displays the attributes, but I just need the css classes to be added.

add_action( 'woocommerce_after_shop_loop_item_title', 'display_applications_attribute_pa_mood', 5 );
    
    function display_applications_attribute_pa_mood() {
        global $product;
    
        $mood = $product->get_attribute('pa_mood');
        
        if ( $mood ) {
            printf('<span class="attribute-mood">%1$s</span>', $mood );
        }
}

Solution

  • The following will, for specific defined product attributes, display each term name embedded in a <span> tag with the correct desired class property value:

    add_action( 'woocommerce_after_shop_loop_item_title', 'display_application_attributes', 5 );
    function display_application_attributes() {
        global $product;
    
        // Define your desired product attribute taxonomies to be displayed
        $attribute_taxonomies = array('pa_mood', 'pa_potency'); 
    
        // Loop through defined taxonomies
        foreach ( $attribute_taxonomies as $taxonomy ) {
            // Get term names coma separated  string
            $term_names = $product->get_attribute($taxonomy);
            
            if ( $term_names ) {
                $output_terms = array(); // Initialize
    
                // Loop through term names
                foreach ( explode(', ', $term_names) as $term_name ) {
                    $output_terms[] = sprintf( '<span class="attribute-%s">%s</span>', 
                        sanitize_title($term_name), $term_name );
                }
                printf( '<div><strong>%s:</strong> %s</div>', 
                    wc_attribute_label($taxonomy), implode(' ', $output_terms) );
            }
        }
    }
    

    It should work as you expect.


    Addition (based on your comment):

    Showing only one term (and if more, the remaining count):

    add_action( 'woocommerce_after_shop_loop_item_title', 'display_application_attributes', 5 );
    function display_application_attributes() {
        global $product;
    
        // Define your desired product attribute taxonomies to be displayed
        $attribute_taxonomies = array('pa_mood', 'pa_potency'); 
    
        // Loop through defined taxonomies
        foreach ( $attribute_taxonomies as $taxonomy ) {
            // Get term names coma separated  string
            $term_names = $product->get_attribute($taxonomy);
            
            if ( $term_names ) {
                $term_names   = (array) explode(', ', $term_names);
                $terms_count  = count($term_names) - 1;
                $term_name    = current($term_names);
                $count_string = $terms_count > 0 ? ' (+' . $terms_count . ')' : '';
    
                printf( '<div><strong>%s:</strong> <span class="attribute-%s">%s%s</span></div>', 
                    wc_attribute_label($taxonomy), sanitize_title($term_name), $term_name, $count_string
                );
            }
        }
    }
    

    It should work as you expect.