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://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();
});
' );
}
