I am trying to display WooCommerce product tags on the home page and category pages. Along with the product title the theme should display any tags in alphabetical order, separated by a “·”.

For example: Tag 1 · Tag 2 · Tag 3

This is what I have at the moment:

<?php echo get_the_tag_list('<span class="woocommerce-display-tag">Tags: ',' · ','</span>');?>

The output is blank.

How can I get this to work?

I am trying to display WooCommerce product tags on the home page and category pages. Along with the product title the theme should display any tags in alphabetical order, separated by a “·”.

For example: Tag 1 · Tag 2 · Tag 3

This is what I have at the moment:

<?php echo get_the_tag_list('<span class="woocommerce-display-tag">Tags: ',' · ','</span>');?>

The output is blank.

How can I get this to work?

• woocommerce-offtopic
• tags

2 Answers 2

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 '

You can now use the wc_get_product_tag_list() function to get a list of the product's tags. It supports providing a separator along with before and after elements.

Example

<?php
    global $product;
?>
    <div class="product-tags">
        <?php echo wc_get_product_tag_list( $product->get_id(), ', ' ); ?>
    </div>