How to display WooCommerce product tag names on home and category pages

Question

I think get_the_tag_list is only used for the default WordPress tags. WooCommerce product tags are a custom taxonomy called product_tag. Therefore you cannot use this function to return these tags. (anyone please correct me if I am wrong here)

Instead you could use the WordPress get_the_terms() function, to get a “similar” result.

Bare bones:

// get product_tags of the current product
$current_tags = get_the_terms( get_the_ID(), 'product_tag' );

//only start if we have some tags
if ( $current_tags && ! is_wp_error( $current_tags ) ) { 

    //create a list to hold our tags
    echo '<ul class="product_tags">';

    //for each tag we create a list item
    foreach ($current_tags as $tag) {

        $tag_title = $tag->name; // tag name
        $tag_link = get_term_link( $tag );// tag archive link

        echo '<li><a href="'.$tag_link.'">'.$tag_title.'</a></li>';
    }

    echo '</ul>';
}

If you want to use a special separator and stuff, you will need to fiddle around.

Update for separators:

You have some options for how you want to remove the last separator, or dealing with separators in general here.

The first method is using CSS only. For this we first wrap every $tag_title in an HTML element (here a <span>). We do this so that we can target every title.

//for each tag we create a list item
foreach ($current_tags as $tag) {

    $tag_title = $tag->name; // tag name

    echo '<span>'.$tag_title.'</span>';
}

Than we just add 2 new CSS styles (used your markup):

/* add " · " after each span item inside .woocommerce-Price-amount */
.woocommerce-Price-amount span:after { content: " · "; }

/* set content to nothing/remove " · " on the last span element */
.woocommerce-Price-amount span:last-child:after { content: ""; }

You can also add a separator via PHP.
For this, we first need to get a new array of all keys of our $current_tags array. Then we look for the last found key in this new array. After this we use a foreach loop and in that we compare the current key with the last found key. If these two are the same, we know that we have the last item.

Change your if function:

//only start if we have some tags
if ( $current_tags && ! is_wp_error( $current_tags ) ) { 

    //create a list to hold our tags
    echo '<span class="woocommerce-Price-amount amount">';

    // get all keys from the $current_tags array
    $get_keys = array_keys($current_tags);

    // get the last key from our keys
    $last_key = array_pop($get_keys);

    //for each tag we create a list item
    foreach ($current_tags as $key => $value) {

        $tag_title = $value->name; // tag name

        if($key == $last_key) {
            echo $tag_title;
        } else {
            echo $tag_title.' · ';
        }

    }
    echo '</span>';
}

P.S. watch your code! In the snippet you posted is an error on the end echo '</span> }. You’re missing an '

Related Posts: