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!
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 CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 6
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'woocommerce_after_single_product', 'bbloomer_woocommerce_short_description_truncate_read_more' );
function bbloomer_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();
});
' );
}