Display Variable Product Attributes and Terms on Woocommerce Archives

Question

I am trying to accomplish a attribute and term list on the shop page using the hook woocommerce_shop_loop_item_title. The goal is to get the attribute(s) and term(s) for the product and then to display it like this example:

Color: Red, Blue, Green

Size: Small, Medium, Large

Dimensions: 90*90, 100*100 and 120*120

but without the spaces between the rows.

It should "fetch" all the attributes used with the product and the attributes terms.

I've tried this but got fatal error.

add_action( 'woocommerce_shop_loop_item_title', 'variable_att_and_terms_on_loop');
function variable_att_and_terms_on_loop() {

    foreach( $product->get_variation_attributes() as $taxonomy => $terms_slug ) {

    $taxonomy_label = wc_attribute_label( $taxonomy, $product );

    foreach($terms_slug as $term) {
        $term_name  = get_term_by('slug', $term, $taxonomy)->name;
        $attributes_and_terms_names[$taxonomy_label][$term] = $term_name;
    }
}
foreach ( $attributes_and_terms_names as $attribute_name => $terms_name ) {
    $terms_string = implode( ', ', $terms_name );
    echo '<p>' . $attribute_name . ': ' . $terms_string . '</p>';
}
}

I've also tried this:

add_action('woocommerce_shop_loop_item_title','add_attribute', 5);
function add_attribute() {
    global $product;

    $product_attributes = array( 'pa_weight', 'pa_quantity', 'pa_length', 'pa_color' );
    $attr_output = array();

    foreach( $product_attributes as $taxonomy ){
        if( taxonomy_exists($taxonomy) ){
            $label_name = get_taxonomy( $taxonomy )->labels->singular_name;
            $value = $product->get_attribute('pa_weight');

            if( ! empty($value) ){
                $attr_output[] = '<span class="'.$taxonomy.'">'.$label_name.': '.$value.'</span>';
            }
        }
    }
    echo '<div class="product-attributes">'.implode( '<br>', $attr_output ).'</div>';
}

without any result. After trying the new result below from LoicTheAztec, this is what I get:

LoicTheAztec · Accepted Answer · 2020-06-14T10:25:39.637

3

Uppdate 2020 - Removed an error when trying to get the term name from a term slug.

In your first code snippet there are some mistakes:

the $product variable was not defined
The function needed to be restricted to variable products only
the $attributes_and_terms_names variable was not initialized…

Here is the revisited code (without the spaces between the rows):

add_action( 'woocommerce_shop_loop_item_title', 'variable_att_and_terms_on_loop');
function variable_att_and_terms_on_loop() {
    global $product;

    if( ! $product->is_type('variable') ) return; // Only for variable products

    $variation_attributes = $product->get_variation_attributes();

    if( sizeof($variation_attributes ) == 0 ) return; // Exit if empty

    $attributes = array(); // Initializing

    foreach( $product->get_variation_attributes() as $taxonomy => $terms_slug ) {
        $taxonomy_label = wc_attribute_label( $taxonomy, $product );

        $terms_name = array();

        foreach($terms_slug as $term_slug ) {
            // We try to get the term name when it's a term slug
            $term         = get_term_by('slug', $term_slug, $taxonomy);
            $terms_name[] = ! is_a($term, 'WP_Term') ? $term_slug : $term->name; 
        }
        $attributes[] = $taxonomy_label . ':&nbsp;' . implode( ', ', $terms_name );
    }

    echo '<div class="product-attributes">';
    echo '<span>' . implode('</span><br><span>', $attributes) . '</span>';
    echo '</div>';
}

Code goes in function.php file of your active child theme (active theme). Tested and works.

edited Jun 14 '20 at 10:25

answered May 02 '19 at 00:06

LoicTheAztec

229,944
23
356
399

thank you, that works. Just one minor detail; it inserts a new row/ line after the attribute and puts the terms on a new line. – May 02 '19 at 09:04
I've updated my initial question and included a picture that shows the result. – May 02 '19 at 09:06
@KevinAronsson Updated - My actual answer just answers your initial question… Dimensions and weight are something else that requires something different and should be asked in a new question. Asking multiple questions at once is not allowed and something to avoid. – LoicTheAztec May 02 '19 at 09:41
I understand that, but in my initial question I clearly explain how I need the data presented. But that's fine. Can you help with not making the terms on a new line as shown in the picture? – May 02 '19 at 10:00
@KevinAronsson Updated to get attribute name and terms on the same line. – LoicTheAztec May 02 '19 at 10:07
awesome, thank you very much for your help. I truly appreciate it. – May 02 '19 at 10:10
@KevinAronsson I have removed the ``tag because it seems that the problem is your theme CSS rules related to this html tag. – LoicTheAztec May 02 '19 at 10:13
so how would we get the link to the attribute added? e.g.: ?attribute_pa_size=xl – Solomax Mar 04 '21 at 14:39
Use `$term_link = get_term_link($term, $taxonomy);` … see https://developer.wordpress.org/reference/functions/get_term_link/ – LoicTheAztec Mar 04 '21 at 14:45
@Solomax You should better ask a new related question (adding in your question your own real code attempt) as I don't catch what you want… I can't answer as a comment… – LoicTheAztec Mar 04 '21 at 22:04

Display Variable Product Attributes and Terms on Woocommerce Archives

1 Answers1

Linked