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!
Let’s truncate this long list of tags on the WooCommerce Single Product page!
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 tutoraspire.com FREE
* @author Tutor Aspire
* @compatible WooCommerce 6
* @donate $9 https://www.tutoraspire.com
*/
add_action( 'woocommerce_after_single_product', 'tutoraspire_woocommerce_tag_list_truncate' );
function tutoraspire_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 + "" + ellipses + "+, " + b + "";
$(".tagged_as").html(html);
$(".read-more").click(function(e) {
e.preventDefault();
$(".tagged_as .truncated").toggle();
});
');
}
