How To Truncate Short Description With “Read More” Toggle in WooCommerce?

How to Truncate Short Description With “Read More” Toggle in WooCommerce?

Providing an engaging and streamlined shopping experience is crucial for customer satisfaction. WooCommerce, the popular WordPress e-commerce plugin, offers a plethora of customization options.

Display Long Descriptions Instead Of Short Ones on Single Product Pages

In this blog post, we’ll explore a simple yet effective technique to truncate the short description of your products and incorporate a “Read More” toggle, ensuring a cleaner and more user-friendly product page.

Why Truncate?

When it comes to showcasing product information, brevity is often key. A concise product description provides a quick overview, enticing potential buyers to explore further. However, for those instances where additional details are necessary, a “Read More” option comes in handy, striking a balance between informativeness and a clutter-free interface.

Truncate Short Description With “Read More” Toggle in WooCommerce

Truncate short description in WooCommerce with ease using a ‘Read More’ toggle. Enhance user experience and maintain a clean product page. Follow our step-by-step guide for seamless customization.

Step 1: Log in to your WordPress admin panel. Go to “Appearance” -> “Theme Editor.“

Step 2: Locate and select the “Theme Functions” file or functions.php your child theme.

Step 3: Copy the provided PHP code and paste it at the end of the selected file.

/*
 Description: Truncate Short Description @ WooCommerce Single Author: Mudassar Shakeel
 Websites:https://mcstarters.com/
*/
 
add_action( 'woocommerce_after_single_product', 'mcstarters_woocommerce_short_description_truncate_read_more' );
 
function mcstarters_woocommerce_short_description_truncate_read_more() { 
   wc_enqueue_js( '
      var show_char = 40;
      var ellipses = "... ";
      var content = $(".woocommerce-product-details__short-description").html();
      if (content.length > show_char) {
         var a = content.substr(0, show_char);
         var b = content.substr(show_char - content.length);
         var html = a + "<span class=\'truncated\'>" + ellipses + "<a class=\'read-more\'>Read more</a></span><span class=\'truncated\' style=\'display:none\'>" + b + "</span>";
         $(".woocommerce-product-details__short-description").html(html);
      }
      $(".read-more").click(function(e) {
         e.preventDefault();
         $(".woocommerce-product-details__short-description .truncated").toggle();
      });
   ' );
}

Step 4: Click the “Update File” button to save your changes.

After implementing the code, visit your WooCommerce product pages and ensure that the short descriptions are truncated as intended.

Conclusions

Enhance the user experience on your WooCommerce store by implementing this “Read More” toggle for truncated short descriptions. Your customers will appreciate the clean design and easy access to additional product details. Happy selling!

FAQs