Home » WooCommerce: Truncate Short Description With “Read More” Toggle

WooCommerce: Truncate Short Description With “Read More” Toggle

by adminkys

In this example we’ll see how to truncate the WooCommerce single product short description and place a “read more” link to reveal the hidden content…

You can also apply this to the long description, a custom product tab, the product gallery, and whatever can be truncated. Enjoy!

After applying the code below, a… long “short description” is now limited to 40 characters and a brand new “Read more” link appears. On click, the hidden text is revealed.

PHP Snippet: Truncate Short Description & Replace With “Read More” Link @ WooCommerce Single Product Page

Note: the “show_char” variable defines the number of visible characters of the short description. In the example below I’m using 40.

/**
 * @snippet       Truncate Short Description @ WooCommerce Single
 * @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_short_description_truncate_read_more' );

function tutoraspire_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 + "" + ellipses + "Read more" + b + "";
$(".woocommerce-product-details__short-description").html(html);
}
$(".read-more").click(function(e) {
e.preventDefault();
$(".woocommerce-product-details__short-description .truncated").toggle();
});
' );
}

You may also like