Ecommerce Shopify WordPress Discussion

Auto truncate WooCommerce Single Product Description with a read more functionality

I want to truncate the long Product Description with a "read more"/"read less" toggle. I have three paragraphs of text in my description, and I want to truncate the description with a "...read more" link after the first or midway through the second sentence in the first paragraph. I have tried the code below in my child theme functions.php file, but it only truncates the first paragraph, and still shows the remaining two paragraphs of text below it: add_action( 'woocommerce_after_single_product_summary', 'custom_woo_prod_description' ); function custom_woo_prod_description() { wc_enqueue_js(' var show_char = 400; var ellipses = "… "; var description_content = $(".woocommerce-Tabs-panel--description").html(); if (description_content.length > show_char) { var a = description_content.substring(0, show_char); var html = "" + a + ellipses + "Read more" + content + "Read less"; $(".woocommerce-Tabs-panel--description").html(html); } $(".read-more").click(function(e) { e.preventDefault(); $(".woocommerce-Tabs-panel--description .truncated").toggle(); }); $(".read-less").click(function(e) { e.preventDefault(); $(".woocommerce-Tabs-panel--description .truncated").toggle(); }); '); } Can you suggest an edit so that is truncates the other paragraphs as well? The code posted only truncates the first paragraph.
To effectively truncate the product description with a "read more" / "read less" toggle, you can use the following revised code instead: add_action( 'woocommerce_after_single_product_summary', 'custom_woo_prod_description' ); function custom_woo_prod_description() { $chars_length = 400; // Number of desired characters length $css_selector = '.woocommerce-Tabs-panel--description'; // Targeted CSS selector // Read more or less buttons: $more_link = sprintf( '… <a class="read-link" data-id="more">%s</a>', __('Read more', 'woocommerce') ); $less_link = sprintf( '<a class="read-link" data-id="less">%s</a>', __('Read less', 'woocommerce') ); wc_enqueue_js( "const n = {$chars_length}, s = '{$css_selector}', d = $(s).html(); function cleanTruncate(a, b){ return a.substr(0, b + a.substr(b).indexOf(' ')); } if (d.length > n) { const t = cleanTruncate(d, n), m = t+'{$more_link}', l = d+'{$less_link}'; $(s).html(m); $(document.body).on('click', s+' .read', function(e) { e.preventDefault(); if ( $(this).data('id') === 'more' ) { $(s).html(l); } else { $(s).html(m); } }); }" ); } Code goes in functions.php file of your child theme (or in a plugin). Tested and work.

February 13, 2024

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.