WooCommerce: Truncate Short Description With “Read More” Toggle
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 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();
});
' );
}
You can place PHP snippets at the bottom of your child theme functions.php file (delete "?>" if you have it there). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"
Does this snippet (still) work?
Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.3.
If you think this code saved you time & money, feel free to join 14,000+ WooCommerce Weekly subscribers for blog post updates or 250+ Business Bloomer supporters for 365 days of WooCommerce benefits. Thank you in advance :)
Need Help with WooCommerce?
Check out these free video tutorials. You can learn how to customize WooCommerce without unnecessary plugins, how to properly configure the WooCommerce plugin settings and even how to master WooCommerce troubleshooting in case of a bug!
Rodolfo Melogli
Business Bloomer Founder
Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.
Hi Av, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello !
Thanks for this code!
I tried to integrate it, I adapted it to the classes used by Divi, but it crashes my site and I have an error indicated on line 6, indicating “Syntax error, unexpected T_VAR, expecting ‘,’ or ‘)”.
I admit that it’s beyond my skills…
Any idea how to get me out of this, maybe?
Thank you!
Hello Aline, thanks so much for your comment! I’m afraid this sounds like an error on your end, and may need troubleshooting. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Thanks for the code! Works well for me.
I noticed a few people had problems with it only truncating the first paragraph in the description, I was able to modify the code a little to allow it to work with multiple paragraphs.
Question,
Thankyou for your code, it’s work great but can we twist it from max character to max word?
.
Ex: Happy nice day…Read more, instead of Happy nice d…Read more
.
I want to keep full the last word , not break it.
Hey Tim thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Thanks for this, wasn’t quite what I was looking for but gave me an idea using the ‘Read More’ facility in the text editor.
Basically I just insert the read more snippet in where I want and use a simple split function to separate the content instead of substring. That way I can control whats visible and whats not.
Thank you! This snippet works great for short descriptions with one paragraph only. Any other paragraphs after the first one seem to get ignored and still show anyway. Would you happen to know why this happens, even though you’re targeting the short description?
Thanks for your comment Paul. Yes, I have a feeling that if you have multiple paragraphs, the substr function will truncate in the middle of a paragraph breaking the whole HTML. If you have multiple paragraphs or complex HTML, I’d instead look into truncating by “number of paragraphs” e.g. hide all paragraphs after the first. This would mean you can’t use substr – different jQuery is needed in such case
Snippet loads great but always late so what happens is that normal complete description is shown first and after a split second it gets hidden by the snippet resulting in a small layout shift. Is there any way i can load this snippet earlier so i don’t get this?
Thanks for the great tutorials! A real help to understand Woocommerce better!
I was wondering if I want the long description to be truncated instead of the short description. Is is enough to just change “short” in the code with “long” to make it work?
Thanks for taking the time out to write this article
I’ve tried to add the code provided in my child themes functions.php, however it doesn’t seem to be having any effect on my product pages short description. Am I correct in thinking that I just need to add the snippet provided into my functions.php or am I missing something?
I have tried it in 2 different theme and same results not working , i post the code on functions.php and to be more sure i tried to add it in style.css as well and no results
Hi Brian, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Dinesh, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
I’ve tried this code and it runs OK as long as the short description has only one paragraph. If the short description has more than one paragraph then the paragraphs that are below the position of ‘show_char’ are showed.
Let’s explain, this is the short description
“What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Where does it come from?”
And this is what is showed by the function
“What is Lorem Ipsum?
Lorem I… Read more
Where does it come from?”
And when clicking on ‘…Read more’ then is showed OK.
Is possible fix this issue that id there are some paragraphs below the ‘show_char’ will not be showed until ‘…Read more’ will be clicked?
Really I don’t know how you have tested, but if you use as short description the 3 paragraphs I’ve placed between quotes you should see that before clicking ‘Read more’ below is showed the third paragraph ‘”Where does it come from?” that is supposed not to be showed before to click on ‘Read more’. You can test if you want with a longer third paragraph to show the issue more evident if you want.
Yes I’ve tested with a new test install of wordpress with only woocommerce and storefront and the results are the same, so it’s not a problem of any plugins or customizations.
Have you tested and get different results with exactly the short test description I’ve provided ?
The text to use is without quotes ( 3 paragraphs)
“What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Hello,
I just want to say thank you.
I was using this snippet on my website. Suddenly this started affecting the description display.
To be sure if something was wrong, I check it again here and saw you’ve updated the snippet to solve this issue.
Awesome work Rodolfo.
Thanks
Hi John, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Jeremy, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
This works perfectly! Thanks. I just got one question. Is there a way to limit the text by word count instead of character count. So it shows not 40 characters but 40 words?
Hi Dennis, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Rodolfo!
I tried the code but there are certain parts of the short description that do not take and come out of reading more, for example when there are line breaks or bold text.
Hi Ibrahim, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello Stef 🙂 There is nothing sure about SEO. If the product page is informative and you’re hiding little text as opposed to the rest, Google won’t penalize you. Unless you have previous experience with this, in which case I’d be curious. Cheers!
Questions? Feedback? Support? Leave your Comment Now! _____
If you are writing code, please wrap it between shortcodes: [php]code_here[/php]. Failure to complying with this (as well as going off topic, not writing in English, etc.) will result in comment deletion. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining BloomerArmada to get blog comment reply priority, ask me 1-to-1 WooCommerce questions and enjoy many more perks. Thank you :)
With 100,000 (and growing) monthly organic sessions, Business Bloomer is the most consistent, most active and most complete WooCommerce development/customization blog.
Of course this website itself uses the WooCommerce plugin, the Storefront theme and runs on a WooCommerce-friendly hosting.
Hi, is it possible it should be cut based on lines, not based on characters?
Hi Av, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi, I’m experiencing an error – once the read more button has dropped over a list then it doesn’t work.
Not sure I fully understand it, sorry about that. Maybe it’s just a CSS issue?
Hello,
I get a console error. view the picture: https://prnt.sc/GV9h0ZmxPX46
Hi there, what class has your short description? My code uses “woocommerce-product-details__short-description”, but yours may be different
Hello,
I use a custom class: .lees-meer-lees-minder
https://prnt.sc/FjdKAxiKbLJ- see image
That’s the short description class?
Hello !
Thanks for this code!
I tried to integrate it, I adapted it to the classes used by Divi, but it crashes my site and I have an error indicated on line 6, indicating “Syntax error, unexpected T_VAR, expecting ‘,’ or ‘)”.
I admit that it’s beyond my skills…
Any idea how to get me out of this, maybe?
Thank you!
Hello Aline, thanks so much for your comment! I’m afraid this sounds like an error on your end, and may need troubleshooting. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
I use Flatsome theme and it doesn’t work
The short description in my product page has class=”product-short-description”
What do I have to do to make it work
Hi there, you need to change the var content
Hi there, is it possible with the snippet to only add a class to the “read more” text without the toggle function? Unfortunately I can’t fix that.
Not sure I fully understand. Context please?
Thanks for the code! Works well for me.
I noticed a few people had problems with it only truncating the first paragraph in the description, I was able to modify the code a little to allow it to work with multiple paragraphs.
This is my modified code:
add_action( 'woocommerce_before_single_product', 'bbloomer_woocommerce_short_description_truncate_read_more' ); function bbloomer_woocommerce_short_description_truncate_read_more() { wc_enqueue_js(' var show_char = 400; var ellipses = "... "; var content = $(".woocommerce-product-details__short-description").html(); if (content.length > show_char) { var a = content.substring(0, show_char); var html = "<span class=\'truncated\'>" + a + ellipses + "<a class=\'read-more\'>Read more</a></p></span><span class=\'truncated\' style=\'display:none\'>" + content + "<a class=\'read-less\'>Read less</a></span>"; $(".woocommerce-product-details__short-description").html(html); } $(".read-more").click(function(e) { e.preventDefault(); $(".woocommerce-product-details__short-description .truncated").toggle(); }); $(".read-less").click(function(e) { e.preventDefault(); $(".woocommerce-product-details__short-description .truncated").toggle(); }); '); }Nice
All codes here throw this error in dev console for me. Anyone else experiencing this?
jquery.min.js?ver=3.6.0:2 Uncaught TypeError: Cannot read properties of undefined (reading ‘length’)
at HTMLDocument.
Sorry I meant to add error displays on single product pages!
Thank You George!
Would you be able to share with us the same code but for the long description instead of the short one?
TIA
Cheers
Question,
Thankyou for your code, it’s work great but can we twist it from max character to max word?
.
Ex: Happy nice day…Read more, instead of Happy nice d…Read more
.
I want to keep full the last word , not break it.
Hey Tim thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Thanks for this, wasn’t quite what I was looking for but gave me an idea using the ‘Read More’ facility in the text editor.
Basically I just insert the read more snippet in where I want and use a simple split function to separate the content instead of substring. That way I can control whats visible and whats not.
Cool
Yeah it does not work. Does not truncate at all.
Maybe your theme uses custom classes, in such case you need to change the snippet slightly
Thank you! This snippet works great for short descriptions with one paragraph only. Any other paragraphs after the first one seem to get ignored and still show anyway. Would you happen to know why this happens, even though you’re targeting the short description?
Thanks for your comment Paul. Yes, I have a feeling that if you have multiple paragraphs, the substr function will truncate in the middle of a paragraph breaking the whole HTML. If you have multiple paragraphs or complex HTML, I’d instead look into truncating by “number of paragraphs” e.g. hide all paragraphs after the first. This would mean you can’t use substr – different jQuery is needed in such case
Thanks for getting back to me on this. I’m not a developer. Can you make this happen for my customer (paid gig)?
Hey Paul, yes, if you’d like to get a quote, feel free to contact me here!
I was able to get it to work with multiple paragraphs by editing the line that starts with “var html”:
Snippet loads great but always late so what happens is that normal complete description is shown first and after a split second it gets hidden by the snippet resulting in a small layout shift. Is there any way i can load this snippet earlier so i don’t get this?
Hi Theo, try using ‘woocommerce_before_single_product’ instead of ‘woocommerce_after_single_product’
Hi Rodolfo,
Thanks for the great tutorials! A real help to understand Woocommerce better!
I was wondering if I want the long description to be truncated instead of the short description. Is is enough to just change “short” in the code with “long” to make it work?
Hi Alex, no you need to find the long description DIV class
Hello
Thanks for taking the time out to write this article
I’ve tried to add the code provided in my child themes functions.php, however it doesn’t seem to be having any effect on my product pages short description. Am I correct in thinking that I just need to add the snippet provided into my functions.php or am I missing something?
Thanks
You’ll probably need to change the CSS class according to your custom setup: .woocommerce-product-details__short-description
Hello I put the code in my theme and it works fine … I would like to know how to put in bold the Read More thanks and congratulations for the article
Ciao Francesco, you’ll need a bit of CSS or HTML there
Hello,
I have tried it in 2 different theme and same results not working , i post the code on functions.php and to be more sure i tried to add it in style.css as well and no results
Works for me, sorry
Hey, i would like to Truncate the Long description like described with the “read more” part etc..
our long description is within the product tab.
can you provide us the snippet 😉 you say something about “however you can also apply this to the long description,….” but I cant get it 🙂
best regards
Hi Brian, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
I want to use code for shop short description but it is not working, please help me for custom this code for shop page.
Thanks
Hi Dinesh, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
I’ve tried this code and it runs OK as long as the short description has only one paragraph. If the short description has more than one paragraph then the paragraphs that are below the position of ‘show_char’ are showed.
Let’s explain, this is the short description
“What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Where does it come from?”
And this is what is showed by the function
“What is Lorem Ipsum?
Lorem I… Read more
Where does it come from?”
And when clicking on ‘…Read more’ then is showed OK.
Is possible fix this issue that id there are some paragraphs below the ‘show_char’ will not be showed until ‘…Read more’ will be clicked?
Many thanks in advance for your help
Just tested and got no issues. Must be something else, sorry
Really I don’t know how you have tested, but if you use as short description the 3 paragraphs I’ve placed between quotes you should see that before clicking ‘Read more’ below is showed the third paragraph ‘”Where does it come from?” that is supposed not to be showed before to click on ‘Read more’. You can test if you want with a longer third paragraph to show the issue more evident if you want.
Can you try with no plugins but Woo and with Storefront theme?
Yes I’ve tested with a new test install of wordpress with only woocommerce and storefront and the results are the same, so it’s not a problem of any plugins or customizations.
Have you tested and get different results with exactly the short test description I’ve provided ?
The text to use is without quotes ( 3 paragraphs)
“What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Where does it come from?”
You’re right, I tested it again and with 3 paragraphs it messes up. I found this: https://stackoverflow.com/questions/52631105/truncate-multiple-paragraph-inside-div-but-keep-html-formatting – hope it helps
Many thanks.
This mean that your code only works fine if there is no additional paragraphs below the position of show_char value.
I guess so. If you find a fix, feel free to post it here
Hi Robert,
Did you find a fix for this?
Sorry bro but your code need a little customization , thanks for the idea 😀
Sorry bro, maybe you want to share that here?
Hi
is it possible to ‘simply’ truncate the text after a number of characters? ie with […] etc?
How much approx for this custom work?
This is what it does. Change “40” to whatever number of chars and let me know
Hello,
I just want to say thank you.
I was using this snippet on my website. Suddenly this started affecting the description display.
To be sure if something was wrong, I check it again here and saw you’ve updated the snippet to solve this issue.
Awesome work Rodolfo.
Thanks
Thanks!
Hello there,
Can this be used for product description also? I’m trying to add $product->post->post_content but it doesn’t work thanks in advance.
Hi John, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi
How to use this kind of snippet to attribute archive description for woocommerce?
Regards
Jeremy
Hi Jeremy, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Not working bro!
Please check and fix this code, thanks
Working for me bro! It could be you need customization
This works perfectly! Thanks. I just got one question. Is there a way to limit the text by word count instead of character count. So it shows not 40 characters but 40 words?
Hi Dennis, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Rodolfo!
I tried the code but there are certain parts of the short description that do not take and come out of reading more, for example when there are line breaks or bold text.
If it could be solved, you make me a world
You will need to customize it if you want to target the HTML. This only gets the text (no HTML tags)
How to add and show “read less” link after clicking “read more”
Hi Ibrahim, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
This creates a layout issue.
*It narrows the content. Plz reply.
Screenshot?
Doing this will surely ruin your SEO too. Google isn’t kind to sites that hide their content.
Hello Stef 🙂 There is nothing sure about SEO. If the product page is informative and you’re hiding little text as opposed to the rest, Google won’t penalize you. Unless you have previous experience with this, in which case I’d be curious. Cheers!
I have tried the code in the descriptions of the categories (I have modified it) but everything is neglected 🙁
What code did you use?