Truncating Woocommerce Product Description

  • Resolved amanhstu

    (@amanhstu)


    1 year, 7 months ago

    I am trying to truncate all woocommerce product description in product single page. I am using the hook “woocommerce_after_single_product_summary” . My code is below.

    add_action('woocommerce_after_single_product_summary', 'custom_woo_prod_description');

function custom_woo_prod_description()
{
  wc_enqueue_js('
      var num_chars = 10;
      var replace_ellipses = " ... ";
      var description_content = $(".woocommerce-Tabs-panel--description").html();
      if (description_content.length > num_chars) {
         var a = description_content.substr(0, num_chars);
         var b = description_content.substr(num_chars - description_content.length);
         var html = a + "<span class=\'truncated\'>" + replace_ellipses + "<a class=\'read-more\'>Read more</a></span><span class=\'truncated\' style=\'display:none\'>" + b + "</span>";
         $(".woocommerce-Tabs-panel--description").html(html);
      }
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".woocommerce-Tabs-panel--description .truncated").toggle();
      });
   ');
}

    But somehow its not working. I have used the theme builder for elementor to create the product single page template. Any help ?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Add “p” to $(“.woocommerce-Tabs-panel–description”), so set

    var description_content = $(".woocommerce-Tabs-panel--description p").html();

    It should work now.

    Thread Starter amanhstu

    (@amanhstu)

    @techedge83 Just did. But seems no result still.. its not working at all

    Yeah, sorry, I didn’t look at your php but just the js.

    You don’t need to use an action hook, since wc_enqueue_js will output the code in the footer.

    Simply use

    wc_enqueue_js('
      var num_chars = 10;
      var replace_ellipses = " ... ";
      var description_content = $(".woocommerce-Tabs-panel--description p").html();
      if (description_content.length > num_chars) {
         var a = description_content.substr(0, num_chars);
         var b = description_content.substr(num_chars - description_content.length);
         var html = a + "<span class=\'truncated\'>" + replace_ellipses + "<a class=\'read-more\'>Read more</a></span><span class=\'truncated\' style=\'display:none\'>" + b + "</span>";
         $(".woocommerce-Tabs-panel--description").html(html);
      }
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".woocommerce-Tabs-panel--description .truncated").toggle();
      });
   ');
    Thread Starter amanhstu

    (@amanhstu)

    yeah.. in fact I ad hire a developer who fix this.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Truncating Woocommerce Product Description’ is closed to new replies.