Truncate WooCommerce Product Description With Toggle

I’ve said in previous blog posts that I enjoy reading requests and requirements from WooCommerce FaceBook groups and trying to implement them on my own as a learning experience and to gain more knowledge of WooCommerce development. In this post, we are going to truncate the long(er) product Description into a clickable ‘Read more’ type of option. Learn with me by reading below.

Code, content, and community for developers.

The LAMP stack and the PHP technologies and frameworks it runs.

Note: All of the examples in this post are part of a development/learning WooCommerce install using the default Storefront theme. PHP code is placed in the child theme’s function.php file.

Truncate Product Description

The idea for this article originated from a FaceBook post I saw in a WooCommerce group where the poster wanted to truncate the single product short description. For a better learning experience, I decided to target the (often) longer product Description.

Typically, a single product has a longer Description on the Single Product page after the product metadata:

We can target the woocommerce_after_single_product_summary hook with our own callback function in the add_action() function’s second parameter. Using jQuery in the wc_enqueue_js() function and targeting the .woocommerce-Tabs-panel–description CSS class, I truncate the product Description text after 45 characters and place a clickable ‘… Read more’ link.

add_action( 'woocommerce_after_single_product_summary', 'custom_woo_prod_description' );

function custom_woo_prod_description()
{
	wc_enqueue_js( '
      var num_chars = 45;
      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();
      });
   ' );
}

Now we can see the previous product Description has been replace by the ‘ … Read more’ link.

You can simply click on the ‘… Read more’ text link and see (toggle) the complete (remaining) product Description.

If you see any mistakes in the code or know of a better way to accomplish this functionality, please leave a comment below. Thank you 👍

Credit Resources

I was able to learn about and eventually write this blog post thanks to this fantastic resource that got me halfway there: https://www.businessbloomer.com/woocommerce-truncate-short-description-with-read-more-toggle/

Thank you for reading this post. Please share it with someone else who would enjoy it as well.

---

Disclaimer: The majority of examples in this post, are performed in a personal development/learning workstation environment and should not be considered production quality or ready. Your particular goals and needs may vary. Like always, just because you can do something doesn’t mean you should. My opinions are my own.

More ways I can help

• Need hosting for your next web application or WordPress site? I highly recommend Hostinger and use them to host my niche bass fishing site. The service is second to none.
• Desktop and mobile wallpapers, digital downloads, photography services, Shopify and WooCommerce customizations, and content writing – all in one E-commerce Shop. Find your next digital purchase today!
• Take your Laravel applications next level with Battle Ready Laravel by Ash Allen. Learn how to improve the performance, maintainability, and security of your Laravel projects in this e-book.

Disclosure: Some of this blog post’s services and product links are affiliate links. At no additional cost to you, should you make a purchase by clicking through one of them, I will receive a commission.

Code, content, and community for developers.

The LAMP stack and the PHP technologies and frameworks it runs.

---

📰 OpenLampTech has sponsorship opportunities for your brand, product, or service in the weekly newsletter. As an independent publication, collaboration is very affordable.

---