Ecommerce Shopify WordPress Discussion

Move Woocommerce long description and hide content behind read more

I am trying to move the long product description in Woocommerce from the tabs below the main summary to within the main summary itself (preferably below the add to cart button). I've unset the description tab, and also removed the short description, and moved the description to where I want it. Displaying it in full isn't an issue. But I'd also like to be able to truncate it and hide the majority behind a 'read more' link. After playing around with various solutions I've found out there, one of two things happens: a) I can add the read more but have to strip the formatting, so the entire description comes out as one long paragraph instead of being broken up. or b) If I don't strip the formatting, the 'read more' only works for the first paragraph, and the rest of the content is displayed after the 'read more' link. This is what I have so far - positioning the description, adding a div class around it so it can be targeted by Javascript, and then using an existing solution to add the read more itself. add_action( 'woocommerce_single_product_summary', 'custom_template_single_long_description', 30 ); function custom_template_single_long_description() { ob_start(); the_content(); $content= ob_get_clean(); echo '<div class="long-description">' . $content. '</div>'; wc_enqueue_js( ' var num_chars = 100; var replace_ellipses = " ... "; var description_content = $(".long-description").html(); if (description_content.length > num_chars) { var a = description_content.substr(0, num_chars); var b = description_content.substr(num_chars - description_content.length); var html = a + "<span class=\'truncated\'>" + replace_ellipses + "<a class=\'read-more\'>Read more</a></span><span class=\'truncated\' style=\'display:none\'>" + b + "</span>"; $(".long-description").html(html); } $(".read-more").click(function(e) { e.preventDefault(); $(".long-description .truncated").toggle(); }); ' ); } With this, the first 100 characters end in 'Read more', but subsequent paragraphs are shown after the Read more. I'd like it all hidden but also for paragraph breaks to be maintained on expanding.
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.