输出Woocommerce产品属性以使用CSS存档页面和样式

Question

In WooCommerce, I am trying to output product attributes to archive pages. I have successfully output them using the code below but am unable to style them individually.

add_action( 'woocommerce_after_shop_loop_item_title', 'custom_display_post_meta', 9 );
function custom_display_post_meta() {
    global $product;
    $attr = array('pa_pg', 'pa_vg', 'pa_nc');
    foreach ( $attr as $attribute ) {
        $values = wc_get_product_terms( $product->id, $attribute, array( 'fields' => 'names' ) );
        echo '<div class="new-product-meta">';
        echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
        echo '</div>';
    }
}

I should need to wrap a separate class names in <div> around each one these, like 'pa_pg', 'pa_vg', 'pa_nc'.

For instance I get 3 <div> with the same class names.

Any help on this please?

Answer 1

simply changing

echo '<div class="new-product-meta">';

to

echo '<div class="new-product-meta '.$attribute.'">';

has given me the result i needed. i should have specified i was using woocommerce 2.6.4. also, someone edited part of the original question so it doesn't make sense.