[Resolved] How to truncate WooCommerce product name on listings

[Allan]

Hi! I’d like to further optimize our shop for mobile visitors as 90%+ of buyers are on their smartphone.

Thanks to GP Premium’s Woo settings, I was able to design the grid like this:

Left aligned title, optimized font, removed ‘add to cart’, etc.

Unfortunately, our SEO-optimized titles are still getting in the way.

Especially in product listings, revealing the full title text isn’t the top priority. I’d like to truncate the text to be more like Amazon’s:

Do we have tips on limiting the title text like in the example above?

Cheers!

[David]

Hi there,

try adding this CSS:

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
}

[Allan]

Works on my phone!

But unfortunately on my iPad, the titles are just gone 🤔

[David]

Is that the Safari Browser ?

[Allan]

Both Safari and Chrome.

If I activate multitasking to make the browser slimmer, the titles appear like on my phone, hmmm

[David]

Aah its because the images have been set to align left which floats them.
Not sure where that setting in Woo is. Add this CSS to remove the float:

.woocommerce ul.products li.product.woocommerce-image-align-left .wc-product-image {
    float: none;
}

[Allan]

Excellent, centering the image fixed it!

Reverted to “Centered” at Customizer > Layout > Woocommerce

Thanks, David. Cheers!!

[David]

Doh … of course its in the Customizer lol – having one of those days!

Glad to be of help!

[Author]

Posts