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 );
}
}
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.