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!
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
* @community https://businessbloomer.com/club/
*/
// 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
* @community https://businessbloomer.com/club/
*/
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;
}
}
Hello,
Thank you for your great snippet.
But how can I do the same thing for products displayed by woocommerce defualt recently viewed widget?
Hey Marco, if you used Snippet 1, you just need to specify the correct CSS selectors
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?
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!
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.
Instead of is_shop, use is_home or is_front_page conditional and see if that does the trick
i changed the class name and it worked
Cool
no, it does not work with woocommerce 3.3 in addtional css.
see screen shot
(cannot upload screen shot), don’t know y.
You can link to a screenshot if you wish
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; } }Thanks
How to make the same “trim-trick” with woo-commerce product Tags (keywords) ? 🙂
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!
Thanks a lot! This snippet made my day!
Cheers!
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?
Maybe you can fix that with a little CSS?
I tried the CSS option on two of my sites and this didn’t work anymore! Any chance you can find another solution?
CSS must work 🙂 Maybe there is something else messing with it. Try with a different theme and get back to me please
Ok thanks! I tried it in a few different themes and got it to work except the ellipsis won’t show.
Spot on
Hello. How can I truncate the name of the product only on mobile devices (or at a certain screen size)?
Thanks!
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!
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?
Every solution is WooCommerce-independent. For the first one, you just need to change your CSS classes if they’re different than mine
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
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
Thanks…
I use Option 1 (CSS). It works great with woocommerce. Thank you so much for this smart css line.
Excellent 🙂
Cara, você é demais! Muito obrigado!
You’re welcome 🙂
Hi I can not get this to work.
I have try all 3 examples byt any work?
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
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.
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
Hi.
To add “…” you must replace this line:
for this other:
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; } }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!
Well done Andy 🙂
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
Hey Edward, thanks for your comment! I suggest you take a look at “conditional logic”: https://businessbloomer.com/conditional-logic-woocommerce-tutorial/ and https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Let me know 🙂
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?
Hi Ryan, thanks for your comment! Just remove “is_shop() && “, it should then work anywhere in the website 🙂
Thank you, it helped.
Glad to hear that 🙂
.woocommerce ul.products li.product h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }is not working for me 🙁 please help
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
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.
Ah – that’s quite unfair. Thanks for your feedback though
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?
Hey Brian, thanks for your comment! The PHP snippets should only work on the shop page 🙂
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
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.
Te felicito tienes la mejor informacion de woocomerce.
Congratulations, you have the best information on woocomerce.
Gracias, thanks .
Muchas gracias Juan Luis 🙂
Thanks Rodolfo!
It worked.:)
Brilliant 🙂
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. 🙂
Thanks so much for your feedback LC!
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!
Thanks so much for your feedback Andrea!
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
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!
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.
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 🙂
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.
Elad, I’m honestly not sure, that’s not my snippet 🙂
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
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 🙂
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!!
Hey Demi, cheers for your comment! From what I see you got it to work? 🙂
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.
already solved.
ups, sorry. i made typo in paste’ing this code.
thanks a lot rodolfo 😀 ure rock
Thanks so much Thomas!
thanks very much for your wonderful tip
it was a great help to me
Enamul, you’re welcome 🙂
How could I change the code ? If I want to short WooCommerce products title in Shop page & category pages ?
Thanks
JK
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!
what about the search page results?
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!
hi
I have the theme UNICASE … and anyway these codes do not work 🙁
have other solutions
max
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; }My theme is woocart check my website. i have added this but didn’t worked.
Hey Ashok, thanks for your feedback! Which option did you use and where did you add it? This should help me help you 🙂
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
Hey Wiroj, do you mean you need to shorten Product Titles on the Shop Page?
not product title.
I need to short product description
sample https://s15.postimg.org/uqgtdjopn/Screen_Shot_2559_01_15_at_11_45_09_PM.jpg
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; }Thanks for your answer. Here is Style.css. How to apply that rule?
Wiroj, I’ll need to take a look at the actual website. Is it live?
#3 is not working for me 🙁
Solved my issue. I added if ( ( is_shop() || is_product_tag() || is_page() || is_product_category() ) && get_post_type( $id ) === ‘product’ )
Excellent 🙂
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
Thank you Max!
sorry but I did not understand at that point I have to include this change to the file: theme / media center / function.php
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.
Thanks Nic for your feedback – if you send me the revised snippet I’ll publish it here. R
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;
}
}
Fantastic, thanks so much! Updating the page in a minute. R
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
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!
Hi,
Is it possible to it the other way away? Like adding blank space so all products are in sync with height?
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?
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!
Thank you Justin!!
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!
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!
Hi Rodolfo, I tried inserting the code in functions.php at the end. did not work for me. Any suggestions?
Thanks,
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.