Adding Tags To Your Product Page Is Great For Adding Easy To Consume Data
By default Woocommerce will display your tags, but maybe you want to put them somewhere else or process them a little differently.
Here’s how you get them on your product page.
Note, I am going to print them above my add to cart form, but you may want to print them elsewhere.
For a guide on where to print your tags you can refer to this product page hook guide by Business Bloomer.
We are going to place the following snippet in our functions.php
The Snippet (in functions.php)
/**
*
* Add Product Tags Above The Add To Cart Form
*
*/
add_action( 'woocommerce_before_add_to_cart_form', 'wpd_print_tags_under_description' );
function wpd_print_tags_under_description() {
// This will hold all of our product tags
$tags = array();
// get an array of the WP_Term objects for a defined product ID (get_the_id() will return the product id of the current object)
$terms = wp_get_post_terms( get_the_id(), 'product_tag' );
// Loop through each product tag for the current product
if ( count( $terms ) > 0 ) {
foreach( $terms as $term ) {
// Product Tag Name
$term_name = $term->name;
// Product Tag Link
$term_link = get_term_link( $term, 'product_tag' );
// Set the product tag names in an array
$tags[] = '<span class="product-tag-badge">' . $term_name . '</span>';
}
// Combine all of the product tags into one string for output
$tags = implode( '', $tags );
// Output
echo $tags;
}
}
A Quick Bit Of Styling
span.product-tag-badge {
border-radius: 3px;
background: #f7f7f7;
padding: 5px 10px;
box-shadow: 0px 2px 2px 0px #e3e3e3;
font-size: 11px;
margin: 5px;
display: inline-block;
line-height: initial;
min-width: 60px;
text-align: center;
}
Would You Prefer The Product Tags To Have Links?
/**
*
* Add Product Tags Above The Add To Cart Form
*
*/
add_action( 'woocommerce_before_add_to_cart_form', 'wpd_print_tags_under_description' );
function wpd_print_tags_under_description() {
// This will hold all of our product tags
$tags = array();
// get an array of the WP_Term objects for a defined product ID (get_the_id() will return the product id of the current object)
$terms = wp_get_post_terms( get_the_id(), 'product_tag' );
// Loop through each product tag for the current product
if ( count( $terms ) > 0 ) {
foreach( $terms as $term ) {
// Product Tag Name
$term_name = $term->name;
// Product Tag Link
$term_link = get_term_link( $term, 'product_tag' );
// Set the product tag names in an array
$tags[] = '<a href="' . $term_link . '"><span class="product-tag-badge">' . $term_name . '</span></a>';
}
// Combine all of the product tags into one string for output
$tags = implode( '', $tags );
// Output
echo $tags;
}
}
Is it possible to turn this into a shortcode so I can put the tags in a theme-applied sidebar?
Hi there,
Yes, very easily, the code below would register it as a shortcode
add_shortcode( ‘print-product-tags’, ‘dwc_print_tags_under_description’ );
Then you could either output it using [print-product-tags] or if you were doing it in code you would use
Keep in mind this would have to be done within the product page or within the loop on a catalogue item, so if the sidebar was on the product page that would be fine
Apologies for the late response!
Thanks, Chris
Hello, awesome help! Do you know how to display Tags on product archive/shop pages just below the product title?
I did this with the product short description already, but want to add tags as well.
Example of short description:
add_action( ‘woocommerce_after_shop_loop_item_title’, function() {
global $post;
$short_description = apply_filters( ‘woocommerce_short_description’, $post->post_excerpt );
if ( $short_description ) {
echo ‘<div class=”my-product-entry-description”>’ . wp_kses_post( $short_description ) . ‘</div>’;
}
}, 50 );
Hope you can help me out 🙂
Hey mate, sorry about the late reply. Yes of course I can help you out 🙂 i’ve rewritten your code to include my code, you can copy and paste the following. I’ve also changed a few things so it’s a bit cleaner. Tested and working on my own website. add_action( ‘woocommerce_after_shop_loop_item_title’, ‘wpd_add_tags_description_to_product_loop’, 50 ); function wpd_add_tags_description_to_product_loop() { global $product; if ( is_object( $product ) ) { $short_description = apply_filters( ‘woocommerce_short_description’, $product->get_short_description() ); if ( $short_description ) { echo ‘<div class=”my-product-entry-description”>’ . wp_kses_post( $short_description ) . ‘</div>’; } $product_id = $product->get_id(); // This will hold all of our product tags $tags… Read more »