Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – 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 );
        }
}
Tags:

2

Answers


  1. 0

    Following the snippet on your post, since you’re simply aiming to retrieve the attribute values, you can directly collect the values from the product meta key _product_attributes. Please see the following snippet and see if it helps.

    add_action( 'woocommerce_after_shop_loop_item_title', function() {

     global $product;

     $product_id = $product->get_id();
     $attributes = get_post_meta( $product_id, '_product_attributes', true );
     $attributes = $attributes ? maybe_unserialize( $attributes ) : [];

     foreach ( $attributes as $name => $attribute ) {
        $attribute_value = isset( $attribute[ 'value' ] ) ? $attribute[ 'value' ] : '';
        $attribute_values = $attribute_value ? explode( '|', $attribute_value ) : [];

        foreach ( $attribute_values as $value ) {
            echo sprintf( "<span class='attribute-%s'>%s</span>", sanitize_key( $value ), trim( $value ) );
        }
    }
} );

    Hope this helps.

    Login or Signup to reply.
  2. 0

    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_applications_attribute_pa_mood', 5 );
function display_applications_attribute_pa_mood() {
    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search