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 businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 6
* @community https://businessbloomer.com/club/
*/
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();
});
' );
}
Good Afternoon,
Your code worked flawlessly on the product description page when clicking on the product. I am trying to mimic this code but for the shop page once i select a certain category. It shows up the product with the full product short description which i am trying to lessen that so we do not require our customers a bunch of scrolling by reading through everything then off to the next product. Is there a way i can edit the code to get it to work on the product page i am explaining?
Hello Matt, 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 brother,
Is it possible to add read less as like read more? the code only works for the first paragraph
Hey Sabbir, yes, you just need an additional line of jQuery for that
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
I am also experiencing this same issue. Did you find a solution? Let me know please
The class needs to be replaced in multiple rows, try that!
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!
Here is the code to truncate by word instead characters.
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_words = 10; // Numero di parole da mostrare var ellipses = "... "; var content = $(".woocommerce-product-details__short-description").text().trim(); // Usiamo .text() per ottenere solo il testo var words = content.split(" "); var displayed_words = words.slice(0, show_words).join(" "); // Uniamo le parole troncate if (words.length > show_words) { var html = "" + displayed_words + ellipses + "<a>Leggi di più</a>" + content + "<a>Leggi meno</a>"; $(".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(); }); '); }Cheers!
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?