[Resolved] Show a fixed amount of characters in product title

[Alejandro]

Hi!

I want to ask you if is possible to show a fixed amount of characters in product title. I see this in Etsy and I think is a clever idea to keep the design the way we want.

In my store you can see the product titles are not looking so good: https://cl.ly/3d8007860d67
This is because one product titles is longer than other in this case.

What Etsy did was this: https://cl.ly/bcc799cac008 and this in mobile: https://cl.ly/2466f33633eb

No matter the display size, they are showing a fixed part of the product titles according to column or image size.

Do you think you can figure out a solution for this?

As always thank you for your awesome support.

Alejandro

[Tom]

Hi there,

Any chance you can link me to one of those Etsy stores so I can take a look at what they’re doing?

Let me know 🙂

[Alejandro]

Hi Tom!

Basically you’ll find the same trick in all the product tittles of Etsy store in the archive product pages.

Take a look here: https://www.etsy.com/c/toys-and-entertainment?ref=catnav-11049

Thank you!

[David]

Hi there,

try this CSS:

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[Alejandro]

It works!

Thank you David, really appreciate it!

Here you can see it: https://cl.ly/1ee214bc5698

[Alejandro]

It works!

Thank you David, really appreciate it!

Here you can see it: https://cl.ly/1ee214bc5698

[David]

Awesome – glad we could be of help.

[Author]

Posts