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

Published By :Iram S. WooCommerce
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.

Affiliate Banner 1

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.

Affiliate Banner 2 

/*
 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

What is the purpose of the “Read More” toggle?

The “Read More” toggle is a feature that allows users to view the full content of a truncated short description. By clicking the “Read More” link, additional text is revealed, giving customers the option to explore more details about the product without cluttering the initial view.

How to truncate long text and show the read more / less button?

Truncating long text and implementing a “Read More / Read Less” button in HTML and JavaScript can be achieved with a few lines of the above code.

You Might Also Like