Shorten WooCommerce Product Titles

WooCommerce Logo

Posted on October 6, 2014 in Development, Web

WooCommerce is a free and the most popular e-commerce solution for WordPress. It is packed with features and has everything you need to run a small to mid size online shop. It is not as powerful or customizable as Magento, but it is incomparably easier to set up, host and manage. It is under active development and regularly patched and there are also plentiful commercial themes and third-party plugins for it which further extend its capabilities. WooCommerce is what I usually recommend to my clients unless they need an e-commerce behemoth like Magento.

Today I am going to share a little trick for WooCommerce. Depending on your theme, your product titles in the product category view may occasionally be too long. They may overflow their container or break the theme layout in some other way. Or you may wish to keep their length standardized if only so that the page looks cleaner and neater. In other words, you may want to shorten your WooCommerce product titles.

One way to do that is with CSS. You might be able to set overflow:hidden; text-overflow: ellipsis; white-space: nowrap; on your element. This is nice and simple but has some limitations – you also need to set the width of the element and it’s a pain to make it work with pure CSS if the text extends across several lines (it is possible, but the CSS rules and the HTML markup get unnecessarily convoluted).

By far an easier solution is to create a WordPress filter that automatically truncates the product titles:

Just put the above in your theme’s functions.php and you’re done. It will shorten the product titles on the main shop page and when browsing a specific product category or product tag page. Product titles on the product details page will be unaffected.

Update:

If you would like to limit the title length to a specific number of words instead of characters, use this filter instead (modify the number of words – in the snippet set to 5 – as required):

Enjoyed this post? Share it with others.
Email this to someoneShare on FacebookShare on Google+Tweet about this on Twitter

Responses (53)

  1. […] from here by Pixel […]

  2. Milan
    March 1, 2015 at 7:23 am · Reply

    Thanks a lot,
    I was looking for this for days, and it works as advertised 🙂 The only problem is that the titles stay long in widgets and shortcodes (related products, upsell, etc.)
    Any ideas?
    And thanks again for this great solution!

    • pixel.ninja
      pixel.ninja
      March 1, 2015 at 7:52 pm ·

      My pleasure, Milan. I’m glad you found the post helpful.

      Whether the title shortening function is applied is decided by this line:

      So you’d need to add a condition that evaluates to true for the widgets/shortcodes.

      WooCommerce has an inbuilt function to check whether you’re on a product page ( is_product() ). You could use that for the related products (if you’re talking about the related products that get displayed under the main product on a product details page). But the issue here is that this will also shorten the main product title which is probably undesirable. So you might have to write your own similar function, such as is_related_products().

      Another possibility is to override the WooCommerce template for displaying the related products (/plugins/woocommerce/templates/single-product/related.php). You’ll see that in this file there’s this line of code which is responsible for rendering of the related products:

      This line then calls the following template: /plugins/woocommerce/templates/content-product.php

      So you could first create a new custom template for the related products based on the content-product.php and then override the related.php file in your theme and have it use your custom template instead of the content-product one.

      Similar with the widgets.

      That’s just from the top of my head. There might be an easier way to do it, but I’d need more time to look into it.

  3. Autumn
    March 19, 2015 at 8:34 pm · Reply

    Any chance you can give us the code to shorten the title in the widgets? I’m using a “feature widget” and while I can shorten the widget title on my shop page and individual product page using CSS … it will not let me shorten it on any of the categories pages. I don’t get it. I need a code for dummies to whip this featured products widget into shape. 🙂 Any examples?

    • pixel.ninja
      pixel.ninja
      March 20, 2015 at 1:15 am ·

      Hi Autumn, thanks for stopping by! Could you give me a link to your website, so that I can have a look at the widget and the source code? If you’re fine with the CSS solution, it should be very easy to use it for the widgets too.

  4. Lennart
    October 14, 2015 at 10:23 pm · Reply

    Thank you very much. So easy!! I am a happy man, thanks to you! Keep up the good work!

    • pixel.ninja
      pixel.ninja
      October 14, 2015 at 11:08 pm ·

      Woot, woot! Glad it was useful!

  5. Jorge
    November 16, 2015 at 8:29 pm · Reply

    How can i set this code on ‘Related Products’?

    Thanx!

    • pixel.ninja
      pixel.ninja
      November 17, 2015 at 1:28 am ·

      Hi Jorge, thanks for visiting! Please see my reply above to Milan. He asked about the same thing.

  6. Piki
    January 3, 2016 at 6:04 am · Reply

    Jorge,

    put is_page() in code. Like if ( ( is_shop() || is_page() || is_product_tag() || is_product_category()

    Works for me.
    God luck.
    THX pixel.ninja

    • pixel.ninja
      pixel.ninja
      January 3, 2016 at 1:46 pm ·

      You’re most welcome! I’m glad you found it useful.

  7. Marcio
    January 8, 2016 at 7:35 am · Reply

    Can it be done to number of words instead of number of characters?

    • pixel.ninja
      pixel.ninja
      January 8, 2016 at 11:47 am ·

      Marcio, thanks for the question! Yes, it most certainly can be done to a specific number of words. I updated the post and added the snippet for the filter that uses words instead of characters.

  8. Linguistik
    February 1, 2016 at 11:45 pm · Reply

    This plugin uses similar functions, bundeld in a small plugin with the option to set the title length at the backend. Works fine for me.
    https://de.wordpress.org/plugins/woo-title-limit/

  9. jkkenzie
    May 13, 2016 at 1:34 pm · Reply

    How did you know 5 words is the magic number of words in a product title?? Am joking, that is good!!

    • pixel.ninja
      pixel.ninja
      May 13, 2016 at 1:56 pm ·

      Easy, 4 is too short, 6 is too long 🙂 Glad you found it helpful.

  10. Sonali
    July 17, 2016 at 2:10 pm · Reply

    Thanks! This was really useful. I wanted to also truncate the titles on the product attribute archive pages. What should I include in the code for that?

    • pixel.ninja
      pixel.ninja
      July 17, 2016 at 3:00 pm ·

      Hi Sonali,

      Thanks! I’m glad you found the post useful. For the product attribute archive pages, try adding the is_product_taxonomy() function into the opening if statement, like this:

  11. Sonali
    July 18, 2016 at 8:43 pm · Reply

    Thank you very much! The code you provided for include product attribute pages worked like a charm!

    • pixel.ninja
      pixel.ninja
      July 18, 2016 at 9:33 pm ·

      Awesome, you’re most welcome!

  12. Eduardo da Costa
    August 16, 2016 at 6:00 pm · Reply

    With this plugin you can set a limit for product titles for the different views (shop, category, product). Also works for the woocommerce widget.
    https://wordpress.org/plugins/woo-title-limit/

    • pixel.ninja
      pixel.ninja
      August 16, 2016 at 6:18 pm ·

      Nice find. Thanks for sharing, Eduardo.

  13. Karl
    October 12, 2016 at 11:23 pm · Reply

    Hi, I’m also using this and like some people above I’d like to keep product page title standard, but shorten related product titles below. Ideally I would like not to override the Woo templates, but I don’t know how one would build a function like is_related_products() to target only those titles?

    • pixel.ninja
      pixel.ninja
      October 13, 2016 at 11:59 am ·

      Hi Karl, I’m not entirely sure from the top of my head, I’d have to look into it, which I can’t do right now 🙁 WooCommerce already has a bunch of functions and hooks concerning the related products, so that might be a good place to start.

  14. Miguel
    October 14, 2016 at 4:32 am · Reply

    Great tutorial!
    Is there a way to explode the title and print the words randomly?

    Thanks!

    Miguel

    • pixel.ninja
      pixel.ninja
      October 14, 2016 at 11:16 am ·

      Hi Miguel,

      You mean you’d like to randomize the order of the words in the product’s name? Sure, that’s quite straightforward, you can use shuffle() for that:

  15. Joseph
    November 24, 2016 at 5:46 pm · Reply

    I have no idea why but none of the above codes works on my site. The title maintains its length after I added the code to functions.php

    Any idea why?

  16. Joseph
    November 24, 2016 at 5:51 pm · Reply

    I have found the problem. I had to add is_product() to shorten the title on the product page!

    Thanks for the code! Now I am happy! 🙂

    • pixel.ninja
      pixel.ninja
      November 24, 2016 at 6:06 pm ·

      Joseph, right on, the function intentionally doesn’t shorten the title on the product page itself as most people will probably want to show the full title there. I’m glad you figured it out and found the solution for your use case. Nice work!

  17. Som
    February 6, 2017 at 12:31 pm · Reply

    Does anybody have any idea WHY when I’m shortening title in the way described above I see Unicode Character ‘REPLACEMENT CHARACTER’ (U+FFFD) at the end? (I’m using Thai characters and it happens at category pages only).

  18. Som
    February 7, 2017 at 9:53 am · Reply

    Fortunately, hostGator had this module enabled by default, I’m applied your changes and everything works fine now, THANK YOU!

    • pixel.ninja
      pixel.ninja
      February 7, 2017 at 11:55 am ·

      Fantastic! I’m glad that it was helpful and that you sorted it out. Thanks for reporting back.

  19. Heemang
    February 18, 2017 at 9:55 pm · Reply

    Thanks a lot. Can your please tell how to shorten the title of products on home page?

    • pixel.ninja
      pixel.ninja
      February 19, 2017 at 2:12 am ·

      HI Heemang,

      You’re welcome.

      Shortening the product titles on homepage is trickier as it really depends on how the products are displayed there. This differs from theme to theme. Likely it’s through some custom widget which complicates things because there isn’t a universal function like is_shop() for widgets. So you will need to have a look at your theme, track down how it displays the products on the homepage and take it from there. You could write a similar function that would evaluate to true inside the homepage widget or you could override the widget template. You could also try to use the WordPress is_home() and is_front_page() and see if that works.

      I’m sorry I don’t have a more specific answer for you – as I mentioned above, it’ll depend on your theme implementation. Still, I hope this will help at least a little and point you in the right direction. Best of luck!

  20. Moji
    June 4, 2017 at 6:20 pm · Reply

    hi ,
    thanks for usful argument, as you see i can’t show the full title of any product . i used this codes but nothing has changed .

    • pixel.ninja
      pixel.ninja
      June 4, 2017 at 7:01 pm ·

      Hi Moji,

      The snippet should work. Maybe if you can share a link to your site and describe exactly what you did, I might be able to figure out what the issue is and point you in the right direction.

  21. Moji
    June 7, 2017 at 3:51 am · Reply

    hi again ,

    this is my site

    http://www.sanmarcodeigiustiniani.it/

    • pixel.ninja
      pixel.ninja
      June 7, 2017 at 2:40 pm ·

      Moji,

      Looking at your site, none of your product titles seem to be particularly long. Did you adjust the character in the snippet function, set to 60 by default, to what works for you? Also, it seems that you’re using a custom template for the product category pages – how are you displaying the product title there? Are you using the the_title() WordPress function? The snippet is a filter on the the_title() function, so if you’re grabbing and displaying the product title in some other way, the filter wouldn’t be applied properly.

  22. Moji
    June 10, 2017 at 8:01 pm · Reply

    hi ,
    thanks for risponse ,
    i didn’t use any command or function use !!! i worte titles in product name and as you see this is not completed , take a look here : http://www.sanmarcodeigiustiniani.it/index.php/negozio/?orderby=date

    as you see every product has a name but are not completely shown as title .

    • pixel.ninja
      pixel.ninja
      June 12, 2017 at 4:02 pm ·

      I’m a little confused as to what you’re trying to achieve – the purpose of the snippet is to shorten the product titles, but at the same time you’re saying that the product name is not shown in full, which is contradictory.

      That being said, looking at your site, it seems that the snippet is working – the titles on the page you linked are shortened. If they’re shortened too much, you just need to increase the character or word limit in the snippet and set it to whatever works for you.

  23. Moji
    June 13, 2017 at 2:41 am · Reply

    i’m so sorry for my bad english , if you go in this page (http://www.sanmarcodeigiustiniani.it/index.php/negozio/?orderby=date ) , as you see i have product title so shorten . i do one example : first book with name (Konstantin Bal’mont, Andrej Belyi …) . as you see this is not his complete title .

    how can i increase the character or word limit in the snippet ?

    thank you very much .

    • pixel.ninja
      pixel.ninja
      June 13, 2017 at 4:03 am ·

      No problem.

      The character or word limit is dictated by these lines, depending on which snippet you’re using:

      and

      The character based snippet checks if the title is longer than 60 characters and if yes, it shortens it to 60 characters. The word based snippet does the same – it check if the title is longer than 5 words and if yes, it shortens it to that. So you can just adjust these numbers accordingly (the if ( ... ) is the check, the return ... part determines how long the shortened title will be).

      I should add that if you have HTML tags in the titles (and I saw you use <br> in some of the titles), it may not work exactly as expected as the tags themselves are added to the title length or considered words. To make it work with HTML tags in the titles, the code would need some more work.

  24. Moji
    June 14, 2017 at 4:02 am · Reply

    hi ,

    thanks for your patience , you are so kind . i used that snippet and put that on my child function.php then i changed those valors but that’s not work . it must be a error on my site . i just begin to learn to how can make a site and this is my first one . :)))

    • pixel.ninja
      pixel.ninja
      June 14, 2017 at 1:33 pm ·

      You’re most welcome. Yeah, the snippet typically works, but as I mentioned in one of my previous posts there are other parts of the theme that may influence how the title displays, so it’s difficult for me to pin down what the issue might be without actually digging into your theme and seeing the source code. I hope you’ll figure it out, best of luck. Not bad for a first project, keep it up!

  25. Moji
    June 17, 2017 at 4:19 am · Reply

    hi ,

    thank you so much for your help ,
    best regard
    Moji

  26. Jure
    July 7, 2017 at 4:42 pm · Reply

    Hello Pixel Ninja,
    found this post and code seems to work fine, except on my first page. I’m using an ordinary wp page with a homepage.php template.

    I have a custom slider on it and am using woocommerce shortcodes to display Bestselling and Recently added products. And it doesn’t seem to work with shortcodes.

    My character count is set to 25.

    Please take a look and let me know if there is a solution 🙂

    Regards, Jure

    • pixel.ninja
      pixel.ninja
      July 7, 2017 at 5:43 pm ·

      Hi Jure,

      Yeah, that would be because the original snippet doesn’t check for homepage. Try adding the homepage detection into the if conditional. Have a look at is_home() and is_front_page() WordPress functions. They’re both for checking whether you’re on the homepage, but there’s a slight difference between them. I think for your user case using is_front_page() is the way to go. So the conditional in the snippet would look like this:

      Give that a try and see if it works.

  27. Matt
    July 11, 2017 at 1:46 pm · Reply

    Would love it if this worked on the related products. Otherwise it’s great!

    • pixel.ninja
      pixel.ninja
      July 11, 2017 at 2:30 pm ·

      Thanks, Matt! Yeah, I hear you. Perhaps when I have some time I’ll look into it and see if there’s a way to make it work with related products as well.

  28. Darren
    September 7, 2017 at 8:35 am · Reply

    Hi,
    How do I make a product title longer as I need to include a sku number which is being chopped off when export to a pdf packing slip?. Thanks in advance.

    • Richard
      Richard
      September 7, 2017 at 11:50 am ·

      Hi Darren,

      That sounds like a different sort of problem than what this post is about. It will most likely be related to the plugin you’re using to export the packaging slips. I’d have to look at your setup to see what the issue might be, it’s hard to tell otherwise. Sorry!

Leave a reply

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