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:
// Automatically shortens WooCommerce product titles on the main shop, category, and tag pages
// to a set number of characters
function short_woocommerce_product_titles_chars( $title, $id ) {
if ( ( is_shop() || is_product_tag() || is_product_category() ) && get_post_type( $id ) === 'product' ) {
// Kicks in if the product title is longer than 60 characters
if ( strlen( $title ) > 60) {
// Shortens it to 60 characters and adds ellipsis at the end
return substr( $title, 0, 60 ) . '...';
}
}
return $title;
}
add_filter( 'the_title', 'short_woocommerce_product_titles_chars', 10, 2 );
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):
// Automatically shortens WooCommerce product titles on the main shop, category, and tag pages
// to a specific number of words
function short_woocommerce_product_titles_words( $title, $id ) {
if ( ( is_shop() || is_product_tag() || is_product_category() ) && get_post_type( $id ) === 'product' ) {
$title_words = explode(" ", $title);
// Kicks in if the product title is longer than 5 words
if ( count($title_words) > 5 ) {
// Shortens the title to 5 words and adds ellipsis at the end
return implode(' ', array_slice( $title_words, 0, 5) ) . '...';
}
}
return $title;
}
add_filter( 'the_title', 'short_woocommerce_product_titles_words', 10, 2 );
Loading tweets...
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!
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.
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?
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.
Thank you very much. So easy!! I am a happy man, thanks to you! Keep up the good work!
Woot, woot! Glad it was useful!
How can i set this code on ‘Related Products’?
Thanx!
Hi Jorge, thanks for visiting! Please see my reply above to Milan. He asked about the same thing.
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
You’re most welcome! I’m glad you found it useful.
Can it be done to number of words instead of number of characters?
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.
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/
Nice.
How did you know 5 words is the magic number of words in a product title?? Am joking, that is good!!
Easy, 4 is too short, 6 is too long 🙂 Glad you found it helpful.
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?
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 openingifstatement, like this:... if ( ( is_shop() || is_product_tag() || is_product_category() || is_product_taxonomy()) && get_post_type( $id ) === 'product' ) { ...Thank you very much! The code you provided for include product attribute pages worked like a charm!
Awesome, you’re most welcome!
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/
Nice find. Thanks for sharing, Eduardo.
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?
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.
Great tutorial!
Is there a way to explode the title and print the words randomly?
Thanks!
Miguel
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:... $title_words = explode(" ", $title); shuffle($title_words); ...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?
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! 🙂
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!
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).
Som,
It’ll be due to the fact that the Thai characters are (probably) UTF-8 encoded. The PHP
substrfunction works reliably with ASCII characters, but not with multibyte characters. When you use thesubstrfunction, part of the last Thai character’s UTF-8 representation gets cut off which then results in the ‘replacement character’. Try usingmb_substrinstead and setting the encoding accordingly. These two links might be helpful: http://php.net/manual/en/function.mb-substr.php and https://spalinux.com/2011/11/get-part-from-thai-sentence-using-php-multibyte-string.Please note that
mbstringis a non-default PHP extension and you may have to install it on your server or ask your web host to do it for you (http://php.net/manual/en/mbstring.installation.php).I hope this helps. Good luck!
Fortunately, hostGator had this module enabled by default, I’m applied your changes and everything works fine now, THANK YOU!
Fantastic! I’m glad that it was helpful and that you sorted it out. Thanks for reporting back.
Thanks a lot. Can your please tell how to shorten the title of products on home page?
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 totrueinside the homepage widget or you could override the widget template. You could also try to use the WordPressis_home()andis_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!
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 .
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.
hi again ,
this is my site
http://www.sanmarcodeigiustiniani.it/
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 thethe_title()function, so if you’re grabbing and displaying the product title in some other way, the filter wouldn’t be applied properly.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 .
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.
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 .
No problem.
The character or word limit is dictated by these lines, depending on which snippet you’re using:
if ( strlen( $title ) >= 60) { // Kicks in if the product title is longer than 60 characters return substr( $title, 0, 60 ) . '...'; // Shortens it to 60 characters and adds ellipsis at the end }and
if ( count($title_words) > 5 ) { // Kicks in if the product title is longer than 5 words // Shortens the title to 5 words and adds ellipsis at the end return implode(" ", array_slice($title_words, 0, 5)) . '...'; }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, thereturn ...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
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 . :)))
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!
hi ,
thank you so much for your help ,
best regard
Moji
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
Hi Jure,
Yeah, that would be because the original snippet doesn’t check for homepage. Try adding the homepage detection into the
ifconditional. Have a look atis_home()andis_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 usingis_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.
Would love it if this worked on the related products. Otherwise it’s great!
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.
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.
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!
hi,
my site is https://www.lefree.in/
the codes works fine on the category page
but on my home page there are different product sliders like latest on sale featured product etc.
it is not working on them and related products, can you help me how to do that?
Hi Nikhil,
It seems that you figured it out in the meantime? I can see some of the product titles on your homepage shortened.
hi. i see you use flatsome. can you pls tell me which exact code you used because this one doesn’t work for me. Thanks
Hey there,
I don’t use the Flatsome theme, so I’m not sure what exactly the problem might be.
No, they are not shortened many are there if can slide some more products. Please help me with that
Check my reply above to Jure, he asked about the same thing. If what I suggested in that comment doesn’t work for you, I’m afraid I’d have to have a look at the theme and see how the product sliders on the homepage are implemented as there isn’t a universal answer. Since you’re using a commercial theme, perhaps you could check with the theme developer as well.
Thanks Richard,
its working good just changed few values and its working well, please look into related products only
Great, I’m glad that worked. Sorry, I don’t have time to look into the related products. I’ve been wanting to do it for a while, but never got around to it.
Based on your top answer regarding using it for related-product, lets say I create a custom template for related-product. Then, what code should I put inside the custom page template?
Hi Nazrin,
If you created a custom template for the related products, you’d need some code there that outputs the shortened product title. It could be a custom function similar to the original function that I provided in the post.
But there might actually be a way to do it without creating a custom template for the related products. As I mentioned in the answer that you refer to, you can find the related products template in
/templates/single-product/related.php(here). You’ll see that the products are output in this line:wc_get_template_part( 'content', 'product' ); ?>which refers to the content-product template in/templates/content-product.php(here). Open that and you’ll see that there is a hook for the product title:do_action( 'woocommerce_shop_loop_item_title' );.So you could write a custom callback function that hooks into this:
// Define the custom woocommerce_shop_loop_item_title callback function function custom_woocommerce_shop_loop_item_title( $woocommerce_template_loop_product_title, $int ) { // Do whatever you need to do with the title here... }; // Add the action add_action( 'woocommerce_shop_loop_item_title', 'custom_woocommerce_shop_loop_item_title', 10, 2 );You could add this in your theme’s
functions.phpand it should work for modifying the related product titles.One caveat, though – I’m not sure where else the product loop might be used as I haven’t checked, so there’s a good chance that this may impact the product titles in other places than just the related products section.
Anyway, I hope this helps and at least points you in the right direction.
Thanks for this script, it works fine but I have a problem with the character encoding, where there are accents I get strange characters
My pleasure, Jordi.
Yeah, for accented characters the function would require some modifications. The problem is that those characters are saved as multi-byte and the original function might cut them in the middle. Have a look at
mb_substrandmb_strlenfunctions which are multi-byte safe. If you use them to replace thesubstrandstrlenfunctions in the original snippet, it should sort out your issue.Thank you very much Richard, it has worked extraordinarily well.
regards
Fantastic! I’m glad it helped 🙂
Great script Richard. How can I expand it to include product archives that are generated by a [products] shortcode? Is there any specific function similar to is_shop that I can use?
Thanks, Theo.
In regard to your question, hmm, if you check the template that’s used by the
[products]shortcode to output the product content – it’s located inwoocommerce/templates/content-product.php– you’ll see that it consists of a bunch of action hooks. The action hook that is relevant for us is:do_action( 'woocommerce_shop_loop_item_title' );. WooCommerce hooks into this action to output the title. Specifically it hooks thewoocommerce_template_loop_product_title()function into it which you can find inwoocommerce/includes/wc-template-functions.php. The function looks like this:/** * Show the product title in the product loop. By default this is an H2. */ function woocommerce_template_loop_product_title() { echo '' . get_the_title() . '
'; }So what you could do is:
1) Remove the default action hook:
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title' );. This should remove the title from the shortcode output completely.2) Write a custom function based on the
woocommerce_template_loop_product_title()function and the snippet from my blog post to output the shortened title. Hopefully that’s something that you’re able to figure out on your own. Let’s assume that you called the custom functioncustom_woocommerce_template_loop_product_title().3) Once you’ve got it ready, you can hook it into the hook:
add_action( 'woocommerce_shop_loop_item_title', 'custom_woocommerce_template_loop_product_title' );That should do it. The
[products]shortcode should now use your custom function to output the title instead.Depending on how you’re using the shortcode, another (and perhaps easier) possibility would be to use the WordPress
is_page()function to detect that you’re on the page that contains the shortcode and add that into the if statement in the original snippet. Theis_page()function can be used with page ID or slug, so the if statement could look something like this:if ( ( is_page( 'your-page-slug' ) || is_shop() || is_product_tag() || is_product_category() ) && get_post_type( $id ) === 'product' ) { // Shorten the title here as described }I haven’t tested this, but I think it should work. This latter approach is less bulletproof in the sense that if you ever move the shortcode to a page with different slug (or if you change the original slug), the title shortening would stop working and you’d have to update the slug in the if statement. Also if you use the
[products]shortcode on a lot of pages, it may be too unwieldy to check for all of them, etc. In that case the former approach might be better.Either way, I hope this helps and points you in the right direction.
How to make it for mobile view only?
When I put wp_is_mobile(), unfortunately, it made short title also inside a product description.
Hi,
It’s hard to tell, really. I think the ideal solution would depend on your theme and how it’s implemented. But using the
wp_is_mobile()function as you suggested could be one approach. You could try to add it inside the filter function and wrap the function body in anifstatement, so that the filter is executed only on mobile devices.If it’s also shortening the title in your product description, it’s probably because your theme is using the
get_the_title()orthe_title()functions to display the product title and the'the_title'filter runs inside both of them. So you might need to modify your template files and grab the title in a different way, or potentially explore if you can add some other conditional statements in the filter function to prevent it from running where you don’t want.When I don’t add wp_is_mobile(), your function works perfectly on both mobile and desktop, and problem with title inside the description I don’t have in both mobile and desktop. So ‘the_title’ is correct for me. Both get_the_title() or the_title() don’t work on desktop version as well. Probably I make mistake with wp_is_mobile(). Below is how I add it, is it correct?
Function short_woocommerce_product_titles_words( $title, $id ) {
if ( ( wp_is_mobile() || is_product_tag() || is_product_category() ) && get_post_type( $id ) === ‘product’ ) {
No, to make the filter function’s body execute only on mobile devices – at least what WordPress detects as mobile devices which might not be 100% accurate – you should add it into the
ifstatement with the&&operator. It would look like this:function short_woocommerce_product_titles_chars( $title, $id ) { // Will only run on mobile if ( wp_is_mobile() && ( is_shop() || is_product_tag() || is_product_category() ) && get_post_type( $id ) === 'product' ) { if ( strlen( $title ) > 60) { return substr( $title, 0, 60 ) . '...'; } } return $title; }Something to keep in mind is that the
wp_is_mobile()function doesn’t detect screen size and is not meant as a substitute for CSS media queries. So if you’re trying to shorten the titles because they don’t look good on small screens, this might sort of work but is not an ideal solution and it’ll fail if, for example, the user views your website on a desktop computer and resizes their browser to a smaller window (the titles would still be long and potentially break your layout).Thank you!!! I don’t have any IT experience and you helped so much!!
You’re most welcome. I’m glad I was able to help.