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
 * @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();
		});
	' );
}

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce Visual Hook Guide: Single Product Page
    Here’s a visual hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments! […]
  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
  • WooCommerce: Show Number Of Products Sold @ Product Page
    WooCommerce database already stores the number of products sold for you. Therefore, you may want to show such number on the product page, close to the Add To Cart button. As we’ve seen in my book Ecommerce and Beyond, showing the number of sales for each product can increase your sales conversion rate. All you […]

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. Follow @rmelogli

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

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

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

  2. Hello brother,
    Is it possible to add read less as like read more? the code only works for the first paragraph

    1. Hey Sabbir, yes, you just need an additional line of jQuery for that

  3. Hi, is it possible it should be cut based on lines, not based on characters?

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

  4. Hi, I’m experiencing an error – once the read more button has dropped over a list then it doesn’t work.

    1. Not sure I fully understand it, sorry about that. Maybe it’s just a CSS issue?

  5. Hello,

    I get a console error. view the picture: https://prnt.sc/GV9h0ZmxPX46

    1. Hi there, what class has your short description? My code uses “woocommerce-product-details__short-description”, but yours may be different

      1. Hello,

        I use a custom class: .lees-meer-lees-minder

        https://prnt.sc/FjdKAxiKbLJ- see image

        1. That’s the short description class?

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

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

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

    1. Hi there, you need to change the var content

      1. I am also experiencing this same issue. Did you find a solution? Let me know please

        1. The class needs to be replaced in multiple rows, try that!

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

    1. Not sure I fully understand. Context please?

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

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

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

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

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

  13. 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>";
            
  14. 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’

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

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

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

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

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

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

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

  22. Sorry bro but your code need a little customization , thanks for the idea πŸ˜€

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

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

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

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

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

  27. Not working bro!

    Please check and fix this code, thanks

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

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

  29. 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)

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

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

    1. Screenshot?

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

  33. 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? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. 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 the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *