WooCommerce: How to Shorten Product Titles

A very common issue: sometimes (mostly with affiliates online stores), WooCommerce product titles are way too long. 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.

The issue: WooCommerce product titles are too long – let’s set a character length limit on the shop page

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

Option 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;
}

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

// 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', 'shorten_woo_product_title', 10, 2 );
function shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return substr( $title, 0, 15 ); // change last number to the number of characters you want
} else {
return $title;
}
}

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

Thank you nicmare for this snippet!

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;
}
}

Where to add this snippet?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). 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+.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce Customization?

Check out these free video tutorials!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a 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.

86 thoughts on “WooCommerce: How to Shorten Product Titles

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

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

  3. Thanks…

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

  5. Cara, vocΓͺ Γ© demais! Muito obrigado!

    1. You’re welcome πŸ™‚

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

  7. 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;
      }
      }
      
  8. 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!

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

  10. 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 πŸ™‚

  11. Thank you, it helped.

    1. Glad to hear that πŸ™‚

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

  13. 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 πŸ™‚

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

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

    Gracias, thanks .

    1. Muchas gracias Juan Luis πŸ™‚

  16. Thanks Rodolfo!
    It worked.:)

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

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

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

  20. 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:
        http://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 πŸ™‚

  21. 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 πŸ™‚

  22. 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? πŸ™‚

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

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

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

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

  26. 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 πŸ™‚

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

  28. #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’ )

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

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

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

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

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

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

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

  36. 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: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.