If you use WooCommerce product tags, it’s possible that a product may belong to 10 or more of them. When that happens, the single product page displays a long list of tag links, which may take too much space (see the below screenshot to visualize this).
Today’s snippet is indeed a way to truncate that list to – say – 3 tags only, and add a “+” to show the rest upon click. In this way if the customer is really interested in that they can expand the view, otherwise tags will take up a single line only. Enjoy!
PHP Snippet: Truncate Tag List & Show Read More @ Single Product Page
Note: the snippet truncates the tag list to 3 elements. Change slice(0, 3) and slice(3) accordingly if you need to use a different number of tags.
/**
* @snippet Truncate Tags @ Single Product
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 6
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'woocommerce_after_single_product', 'bbloomer_woocommerce_tag_list_truncate' );
function bbloomer_woocommerce_tag_list_truncate() {
wc_enqueue_js('
var ellipses = "... ";
var delimiter = ",";
var content = $(".tagged_as").html();
var a = content.split(delimiter).slice(0, 3);
var b = content.split(delimiter).slice(3);
var html = a + "<span class=\'truncated\'>" + ellipses + "<a class=\'read-more\'>+</a></span><span class=\'truncated\' style=\'display:none\'>, " + b + "</span>";
$(".tagged_as").html(html);
$(".read-more").click(function(e) {
e.preventDefault();
$(".tagged_as .truncated").toggle();
});
');
}
Screenshot of the “after”:
Hi Rodolfo,
Thank you the code works like a charm!
Lyse
Cheers!
Hi Didn’t truncate either after adding to functions.php or settings.css. I’m using Flatsome 3 child theme. It did nothing in fact. Many thanks. David
Does it work with a default theme e.g. Storefront? Flatsome may be the problem and further customization may be needed.