WooCommerce: How to Shorten Product Titles

A very common WooCommerce shop page issue: sometimes (and especially with affiliate stores), WooCommerce product titles are way too long and go over several lines, messing with the overall vertical alignment.

On top of this, you may also want to keep the shop experience consistent, and make all the WooCommerce product titles of the same length. This is how you do it. Enjoy!

WooCommerce. shorten product title on the shop page
WooCommerce. shorten product title on the shop page

Snippet 1 (CSS): Limit all WooCommerce product titles to one line only

// Note: this is simple CSS that can be placed in your custom.css file
// This CSS also adds 3 dots ... at the end of each product title

.woocommerce ul.products li.product h3 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

Snippet 2 (PHP): Limit all WooCommerce product titles to max number of characters

/**
 * @snippet       Product Title Char Limit @ WooCommerce Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

// Note: this is simple PHP that can be placed in your functions.php file
// Note: substr may give you problems, please check Option 3

add_filter( 'the_title', 'bbloomer_shorten_woo_product_title', 9999, 2 );

function bbloomer_shorten_woo_product_title( $title, $id ) {
   if ( is_shop() && get_post_type( $id ) === 'product' ) {
      return substr( $title, 0, 15 ); // last number = characters
   } else {
      return $title;
   }
}

Snippet 3 (PHP): Limit all WooCommerce product titles to max number of words

Thank you nicmare for this snippet!

/**
 * @snippet       Product Title Word Limit @ WooCommerce Shop
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */

function bbloomer_shorten_woo_product_title( $title, $id ) {
   if ( is_shop() && get_post_type( $id ) === 'product' ) {
      return wp_trim_words( $title, 4 ); // last number = words
   } else {
      return $title;
   }
}

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.

112 thoughts on “WooCommerce: How to Shorten Product Titles

  1. Hello,
    Thank you for your great snippet.
    But how can I do the same thing for products displayed by woocommerce defualt recently viewed widget?

    1. Hey Marco, if you used Snippet 1, you just need to specify the correct CSS selectors

  2. Is there a way to show the hidden part of the product title in a tooltip?

    I want to use only 1 line worth of product title, with … at the end and then when you hover over the title, a tooltip appears with the full product title. Possible?

    1. Hey Steve 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 the snippet but I realized it only works on shop page. What about product loop titles? I mean, a snippet that will shorten product titles for products displaying on the homepage. I display products on my homepage but the snippet is unable to shorten the titles on the products displaying on the homepage.

    1. Instead of is_shop, use is_home or is_front_page conditional and see if that does the trick

  4. i changed the class name and it worked

  5. no, it does not work with woocommerce 3.3 in addtional css.
    see screen shot
    (cannot upload screen shot), don’t know y.

    1. You can link to a screenshot if you wish

  6. For anyone asking how to truncate product title only for mobile devices ->

    // Shorten Product title for mobile device only, it will shorten it to number of words
    add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
    function shorten_woo_product_title( $title, $id ) {
        if( wp_is_mobile() && ! is_singular( array( 'product' ) ) && get_post_type( $id ) === 'product' ) {
            return wp_trim_words( $title, 4, '...' ); // change last number to the number of words you want
            } else  { return $title;
                
            }
    }
    
    1. Thanks

  7. How to make the same “trim-trick” with woo-commerce product Tags (keywords) ? ๐Ÿ™‚

    1. Hi Roman, 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!

  8. Thanks a lot! This snippet made my day!

    1. Cheers!

  9. Thanks, the second version works for me. However, if a product name is shorter than the one next to it, the rate star below it and the add to cart button will jump up, not stay in line. What can be the solution?

    1. Maybe you can fix that with a little CSS?

  10. I tried the CSS option on two of my sites and this didn’t work anymore! Any chance you can find another solution?

    1. CSS must work ๐Ÿ™‚ Maybe there is something else messing with it. Try with a different theme and get back to me please

      1. Ok thanks! I tried it in a few different themes and got it to work except the ellipsis won’t show.

        1. Spot on

  11. Hello. How can I truncate the name of the product only on mobile devices (or at a certain screen size)?
    Thanks!

    1. Hi Bogdan, 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. Hello,

    Can you please help?
    I tried all three options, but none worked for me!
    Maybe the new WooCommerce doesn’t accept it, or the classes have changed.
    Can you please help?

    1. Every solution is WooCommerce-independent. For the first one, you just need to change your CSS classes if they’re different than mine

  13. I had applied the CSS, It Works, Thanks

    Another request, can it show in 2lines and if the title is only for 1 line then there should be blank space to align with other products

    1. Hey Suresh, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  14. Thanks…

  15. I use Option 1 (CSS). It works great with woocommerce. Thank you so much for this smart css line.

  16. Cara, vocรช รฉ demais! Muito obrigado!

    1. You’re welcome ๐Ÿ™‚

  17. Hi I can not get this to work.
    I have try all 3 examples byt any work?

    1. Martin, thanks so much for your comment! Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R

  18. Thanks for sharing!It’s really helpful.
    I have some questions:
    1. How to add “…” after the shortened title if i select “option 2”?
    “Option 1” doesn’t work. There is no “custom.css” file in my theme and if i put the code to “addtional css” ,it doesn’t work.

    2. How to display a full title when the mouse move on the shortened title?

    Thanks.

    1. Allen, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

    2. Hi.
      To add “…” you must replace this line:

      return substr( $title, 0, 15 ); // change last number to the number of characters you want

      for this other:

      return substr( $title, 0, 15 ).'...'; // change last number to the number of characters you want
    3. Please try this :

      add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
      function shorten_woo_product_title( $title, $id ) {
      if (get_post_type( $id ) === 'product' ) {
        return wp_trim_words( $title, 4, '...' ); // change last number to the number of words you want
      } else {
      return $title;
      }
      }
      
  19. This worked really well thanks!

    I added:

    is_product_category() || is_product_tag()

    to the if statement so it works on product category and tag archives.

    Now just to figure out how to do it for related products!

    1. Well done Andy ๐Ÿ™‚

  20. Hi,

    Thanks for nice snippets.
    Both trimming by words and by symbols worked nice for me.
    I want one more modification:
    I want title to be trimmed only for new products.
    What additional condition should I add ?

    Regards

  21. hello Dear Support Team thank you for this nice code snippet…

    i got a speacial question in my shop site is it working fine but if i choose a sub catgory from my shop the code dont work
    any solution for sub-categorys?

    1. Hi Ryan, thanks for your comment! Just remove “is_shop() && “, it should then work anywhere in the website ๐Ÿ™‚

  22. Thank you, it helped.

    1. Glad to hear that ๐Ÿ™‚

  23. .woocommerce ul.products li.product h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
    

    is not working for me ๐Ÿ™ please help

    1. Ayesha, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

      1. In every comment u are saying custom work. The truth is you don’t know how to code and are posting rubbish things to attract visitors.

        1. Ah – that’s quite unfair. Thanks for your feedback though

  24. Will this shorten the product title overall or is it just on the shop page? I wanted to limit on the shop page but when viewing single product then you see full name. Can this code achieve that?

    1. Hey Brian, thanks for your comment! The PHP snippets should only work on the shop page ๐Ÿ™‚

  25. Hello Rodolfo Melogli,
    i am trying all three Php and Css code but code are not working. please tell me how to solve.

    Regards,
    Ravi Raj

    1. Hey Ravi, thanks for your comment! I’m not sure, it works for everyone. Try doing some troubleshooting e.g. switch theme / disable plugins to see if the snippets work.

  26. Te felicito tienes la mejor informacion de woocomerce.
    Congratulations, you have the best information on woocomerce.

    Gracias, thanks .

    1. Muchas gracias Juan Luis ๐Ÿ™‚

  27. Thanks Rodolfo!
    It worked.:)

  28. Thanks so much for this! A quick & easy fix; I used #1, which didn’t work at first. Your code has .woocommerce ul.products li.product h3, and upon further inspection, it’s actually h2 in my version of WooCommerce. Once I changed that, it was perfect. ๐Ÿ™‚

    1. Thanks so much for your feedback LC!

  29. OMG It took me all day to find how to shorten the text on my products. When I found this site I copied the code and opened the customizer went to addional css pasted it there. Instant fix. Took me 1 min to do. I wish I found you sooner. Thanks for sharing this information!

    1. Thanks so much for your feedback Andrea!

  30. Hi

    great solutions you give thanks

    I write you guys because I am not where to ask and perhaps you can redirect me

    I have an issue with my images when I grab them from amazon they are perfect in size but when displays on my site they get zoomed and the result is an image which looks too big for the books and the sides or top gets cut out !

    I hope you can help

    Thanks much appreciated

    1. Hello Hans, thanks for your comment! I suggest you to watch my video tutorial: https://businessbloomer.com/master-woocommerce-image-sizes-tutorial/. Let me know if it helps!

  31. What if I want to short the title only in the home page and not in the product page?
    I tried to add the PHP options to mytheme/woocommerce/single-product/short-description.php file but it doesn’t work.

    1. Elad, thanks for your comment! First, you should place this in your child theme’s functions.php file – if you need more guidance, please take a look at this video tutorial: https://businessbloomer.com/woocommerce-customization-hangout/. Second, you can take advantage of “conditional logic”, and run the snippet only on the homepage: https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Let me know ๐Ÿ™‚

      1. I don’t understand it. When I do this:
        https://stackoverflow.com/questions/36176770/limit-woocommerce-product-short-description-in-home-page-and-category-page

        it shorts the description. I tried to use the same logic for titles but then nothing happens.

        1. Elad, I’m honestly not sure, that’s not my snippet ๐Ÿ™‚

  32. Cool idea,option 2 worked for me but i don’t really like to cut the title.

    I think will be cool if “when we cut the title and there are more words hidden the title should have atleast some … like “My title for …” ”

    My opinion

    1. Totally agree with the “…” dislike ๐Ÿ™‚ Technically, product titles should be made of the same length when you add a new product to WooCommerce… a sort of a “rule” for each ecommerce site. I’d rather do this than cutting different-lengths titles ๐Ÿ™‚

  33. This isn’t working for me – I am supposed to insert it in my stylesheet aren’t I? Does it matter where?

    I’m running MAXSTORE PRO theme. Any help is muchly appreciated!!

    1. Hey Demi, cheers for your comment! From what I see you got it to work? ๐Ÿ™‚

  34. hello rodolfo,

    thanks for this awesome snippet.
    i found that this snippet isn’t working with storefront by wootheme.

    which part should i need to change on this code, to make it compatible.

    thanks again. regards.

    1. already solved.

      ups, sorry. i made typo in paste’ing this code.

      thanks a lot rodolfo ๐Ÿ˜€ ure rock

      1. Thanks so much Thomas!

  35. thanks very much for your wonderful tip
    it was a great help to me

    1. Enamul, you’re welcome ๐Ÿ™‚

  36. How could I change the code ? If I want to short WooCommerce products title in Shop page & category pages ?

    Thanks

    JK

    1. Hey JK, thanks for your comment! If you want to apply the snippet to the category pages as well, when it says is_shop() just change it to this:

      if ( ( is_shop() || is_product_category() ) && get_post_type( $id ) === 'product' ) {
      
      

      Hope this helps!

      1. what about the search page results?

        1. Hey Victor thanks for your comment ๐Ÿ™‚ The CSS solution should work in there too – if you’re using the PHP one, you will need to add a is_search() to the snippet. Hope this helps!

  37. hi
    I have the theme UNICASE … and anyway these codes do not work ๐Ÿ™

    have other solutions

    max

    1. Hello Max (ciao!). Thanks for your message but I’m afraid these codes work – it’s just that your theme completely changes WooCommerce CSS classes ๐Ÿ™‚ Try this:

      // CSS Fix for Unicase Theme
      
      .product .product-info .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      }
      
      
    2. My theme is woocart check my website. i have added this but didn’t worked.

      1. Hey Ashok, thanks for your feedback! Which option did you use and where did you add it? This should help me help you ๐Ÿ™‚

  38. Option 2 is work for my Product title

    and I need to shorten Product Description on Shop Page to same lenght too.

    how can do this?

    Thanks

    1. Hey Wiroj, do you mean you need to shorten Product Titles on the Shop Page?

        1. Hey Wiroj, thanks for your comment ๐Ÿ™‚ Just look for the CSS class of the short description and apply the same rule:

          /* change 'whatever' with your class */
          
          .whateverclass {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          }
          
          
          1. Thanks for your answer. Here is Style.css. How to apply that rule?

            1. Wiroj, I’ll need to take a look at the actual website. Is it live?

  39. #3 is not working for me ๐Ÿ™

    1. Solved my issue. I added if ( ( is_shop() || is_product_tag() || is_page() || is_product_category() ) && get_post_type( $id ) === ‘product’ )

  40. Sorry!! i understand… this code is ok:

    add_filter( โ€˜the_titleโ€™, โ€˜shorten_my_titleโ€™, 10, 2 );

    function shorten_my_title( $title, $id ) {
    if ( is_shop() && get_post_type( $id ) === โ€˜productโ€™ && strlen( $title ) > 50 ) {
    return substr( $title, 0, 50 ) . โ€˜โ€ฆโ€™; // change 50 to the number of characters you want to show
    } else {
    return $title;
    }
    }

    thanks all
    max

  41. sorry but I did not understand at that point I have to include this change to the file: theme / media center / function.php

  42. substr is no good idea Rodolfo! Because when your title contains a special char like & o u m l ; then this string gets broken. the result is the substr function hits the middle of the string and you get a display error. better use wp_trim_words as it does not cut any string.

    1. Thanks Nic for your feedback – if you send me the revised snippet I’ll publish it here. R

      1. in this case i would prefer css too! but if you have more complex strings, then i would shorten them via php and a wordpress function
        add_filter( ‘the_title’, ‘shorten_woo_product_title’, 10, 2 );

        function shorten_woo_product_title( $title, $id ) {
        if ( is_shop() && get_post_type( $id ) === ‘product’ ) {
        return wp_trim_words( $title, 4 ); // change last number to the number of WORDS you want
        } else {
        return $title;
        }
        }

        1. Fantastic, thanks so much! Updating the page in a minute. R

  43. Hi, thanks for the great solution, the option 1 works great for me, however 1 line for a title is too short in my case, is there anyway to make it as 2 lines so the title of product shows more clear,

    thanks

    1. Thanks for your feedback! I think your best option is to set the number of words, and more or less make them 2 lines long ๐Ÿ™‚ Otherwise you don’t have much choice!

  44. Hi,

    Is it possible to it the other way away? Like adding blank space so all products are in sync with height?

    1. John, thanks for your question! I guess you could try gibing the product title height a fixed height via CSS, and make that height equal to your longest title’s height. Would this help?

  45. Hi

    This:

    .woocommerce ul.products li.product h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

    Worked!!

    I placed it in the “Custom.css” and now the products now don’t go to multiple lines and cause the entire homepage to look messed up!!

    Great hack!

  46. Hello –

    For everyone this function.php is located in /themes/yourthemname folder.

    This is great for pages. Is there a way to allow for FULL title to show on the product detail page and only have the shorten apply to all others? Also – is there a way to make it trim up to the end of a word instead of hard character cut off? Here’s what I’m using now:

    add_filter( ‘the_title’, ‘shorten_my_title’, 10, 2 );

    function shorten_my_title( $title, $id ) {
    if ( is_shop() && get_post_type( $id ) === ‘product’ && strlen( $title ) > 50 ) {
    return substr( $title, 0, 50 ) . ‘…’; // change 50 to the number of characters you want to show
    } else {
    return $title;
    }
    }

    Thanks great information Rodolfo!

    1. Thank you Digi for your feedback. You can play with “is_shop()” to decide where you want the title to be trimmed. Just check Woocommerce conditional tags to decide where you want that function to work.

      For the other question, I’m sure there is a way to make it trim at the end of a word, for example take a look at this article on Stackoverflow

      Best of luck!

  47. Hi Rodolfo, I tried inserting the code in functions.php at the end. did not work for me. Any suggestions?
    Thanks,

    1. Hey Navin, thanks for your comment! That’s weird it didn’t work for you, probably your theme or extensions are already working on that filter. Try remove the “10,2” at the end of the filter – or try remove the “is_shop() &&” inside the function and let me know.

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.