Home » WooCommerce: Truncate Tag List @ Single Product Page

WooCommerce: Truncate Tag List @ Single Product Page

by adminkys

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();
      });
   ');
}

Screenshot of the “after”:

You may also like