WooCommerce: Truncate Short Description With “Read More” Toggle

You can apply this simple jQuery snippet to any piece of WooCommerce content.

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… however 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: Programmatically 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 3.9
 * @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();
		});
	');
}

Where to add this snippet?

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.

63 thoughts on “WooCommerce: Truncate Short Description With “Read More” Toggle

  1. 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.

    1. 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();
            });
         ');
      }
      
        1. 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.

          1. Sorry I meant to add error displays on single product pages!

  2. 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.

    1. 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!

  3. 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.

  4. Yeah it does not work. Does not truncate at all.

    1. Maybe your theme uses custom classes, in such case you need to change the snippet slightly

  5. 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?

    1. 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

      1. Thanks for getting back to me on this. I’m not a developer. Can you make this happen for my customer (paid gig)?

        1. Hey Paul, yes, if you’d like to get a quote, feel free to contact me here!

          1. I was able to get it to work with multiple paragraphs by editing the line that starts with “var html”:

            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>";
            
  6. 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?

    1. Hi Theo, try using ‘woocommerce_before_single_product’ instead of ‘woocommerce_after_single_product’

  7. 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?

    1. Hi Alex, no you need to find the long description DIV class

  8. 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

    1. You’ll probably need to change the CSS class according to your custom setup: .woocommerce-product-details__short-description

  9. 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

    1. Ciao Francesco, you’ll need a bit of CSS or HTML there

  10. 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

    1. Works for me, sorry

  11. 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

    1. 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!

  12. 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

    1. 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!

  13. 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

    1. Just tested and got no issues. Must be something else, sorry

      1. 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.

        1. Can you try with no plugins but Woo and with Storefront theme?

          1. 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?”

            1. 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

              1. Many thanks.
                This mean that your code only works fine if there is no additional paragraphs below the position of show_char value.

                1. I guess so. If you find a fix, feel free to post it here

                  1. Hi Robert,

                    Did you find a fix for this?

  14. Sorry bro but your code need a little customization , thanks for the idea 😀

    1. Sorry bro, maybe you want to share that here?

  15. Hi

    is it possible to ‘simply’ truncate the text after a number of characters? ie with […] etc?

    How much approx for this custom work?

    1. This is what it does. Change “40” to whatever number of chars and let me know

  16. 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

    1. Thanks!

  17. 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.

    1. 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!

  18. Hi
    How to use this kind of snippet to attribute archive description for woocommerce?
    Regards
    Jeremy

    1. 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!

  19. Not working bro!

    Please check and fix this code, thanks

    1. Working for me bro! It could be you need customization

  20. 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?

    1. 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!

  21. 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

    1. You will need to customize it if you want to target the HTML. This only gets the text (no HTML tags)

  22. How to add and show “read less” link after clicking “read more”

    1. 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!

  23. This creates a layout issue.
    *It narrows the content. Plz reply.

    1. Screenshot?

  24. Doing this will surely ruin your SEO too. Google isn’t kind to sites that hide their content.

    1. 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!

  25. I have tried the code in the descriptions of the categories (I have modified it) but everything is neglected 🙁

    1. What code did you use?

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 :)

Your email address will not be published.