Move Woocommerce long description and hide content behind read more
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.
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