How to limit shop product title

Hi @metalsunny ??

If you want to shorten the length of the Product Titles on your Shop Page and other Archive Pages (Category, Tag, etc), you could use the following Custom CSS Code:

.archive h2.woocommerce-loop-product__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

You can tweak that code if needed. The outcome will then be: https://d.pr/i/gvD6Nb

If that doesn’t work the way you want and you need more control of how the text is shortened, you could use some PHP Code, as explained here.

I hope that this helps ??

None of the code worked on my theme. I even tried the one in the given link also

Hi there,

None of the code worked on my theme. I even tried the one in the given link also

Thanks for trying. What is your site URL? We can try and alter the CSS in order to make it work.

Kind regards,

the website is https://www.standarddeluxe.com.ng
I am still setting up at the moment.
On the shop page you will see that the sewing machine demo product title is longer making the product grid to shift downward. If the text can be shorten it will align with other grid.
Pls help me see what you can do. I want the product title to be shorten. Thanks

• This reply was modified 3 years, 2 months ago by metalsunny.

Hello,

On the shop page you will see that the sewing machine demo product title is longer making the product grid to shift downward. If the text can be shorten it will align with other grid.

I’m not sure if I see the sewing machine demo product. Could you share a screenshot of the section to pinpoint what you are referring to? I recommend?https://snipboard.io?for easily sharing screenshots – please follow the instructions on the page, then paste the URL in this chat. It works with Chrome, Firefox, Safari, and Edge.

This is the screen shot here https://prnt.sc/1r4rw8p

The theme developer has sent me a css code that fixed the issue for my theme. “.woocommerce ul.products:not(.list) li.product div.product-inner ul.woo-entry-inner li.title a{
-webkit-line-clamp: 1;
}”
Text has now been limit to first line with three dots.
See screen shot here https://prnt.sc/1r6syi3
Case solved. Thank you

• This reply was modified 3 years, 2 months ago by metalsunny.
• This reply was modified 3 years, 2 months ago by metalsunny.
• This reply was modified 3 years, 2 months ago by metalsunny.
• This reply was modified 3 years, 2 months ago by metalsunny.

Hi @metalsunny

OK, thank you for the update! Glad to hear that the theme developer could provide the solution. I’m marking this thread as resolved now. If you have any other questions, feel free to open a new topic.