20 Jun
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', 'dwc_print_tags_under_description' );
function dwc_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 ) {
$term_name = $term->name;
// 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', 'dwc_print_tags_under_description' );
function dwc_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 class="product-tag-badge" href="'.$term_link.'">' . $term_name . '</a>';
}
// Combine all of the product tags into one string for output
$tags = implode( '', $tags );
// Output
echo $tags;
}
}
Related Post
Subscribe
Login
0 Comments
Supercharge your WooCommerce store with WP Davies
Copyright © 2021 Design by WP Davies