Return to previous page

Length of title - by peter4576 - on WordPress WooCommerce support

This topic has 10 replies, 2 voices, and was last updated 8 years, 7 months ago ago by Eva Kemp

peter4576

Participant

August 21, 2015 at 13:52

Hi there.

1. Is it possible to make a default space of 2 lines, in order for the products to be beautifully aligned?

2. Is it possible to end the title by three dots (…) if exceed the lenght of 2 lines?

Thanks

Peter

https://gofile.me/6lYKv/QX59wTwC

#81559 Copied

9 Answers

Eva Kemp

Support staff

August 21, 2015 at 14:57

Hello,

You can refer to this article:
http://businessbloomer.com/woocommerce-shorten-product-titles/

Regards,
Eva Kemp.

#81590 Copied

peter4576

Participant

August 22, 2015 at 06:25

Hi Eva.

I used this code to achieve what I wanted (thought).

I found out to set the minimum height so that there would be no alignment issues. However, on hover the last line now displays instead of just being cut off. And same is the case for those lines that are not filled with text. Can you help?

https://gofile.me/6lYKv/CfXOjfn3

.content-product .product-title a {
color: #0063be;
text-overflow: ellipsis;
word-wrap: break-word;
overflow: hidden;
max-height: 3.2em;
min-height: 3.2em;
line-height: 1.1em;
position: relative;
text-decoration: none;
padding-top: 20px;
}

#81704 Copied

Eva Kemp

Support staff

August 24, 2015 at 09:44

Hello,

Try to remove padding-top: 20px; from your code and check products after that.

Regards,
Eva Kemp.

#81847 Copied

peter4576

Participant

August 24, 2015 at 17:22

True, that worked but now all 3 lines are displayed AND the text has no padding to product image. How do I increase that space to the product? And now I have 3 lines instead of 2…

#82017 Copied
Eva Kemp

Support staff

August 25, 2015 at 10:59
Hello,

I’ve commented lines “min-height: 3.2em;” and “line-height: 1.1em;” in the code:
```
.content-product .product-title a {
		color: #0063be;
		text-overflow: ellipsis;
		word-wrap: break-word;
		overflow: hidden;
		max-height: 3.2em;
		/*min-height: 3.2em;
		line-height: 1.1em; */
		position: relative;
		text-decoration: none;
}
```
Please check product pages now.

Regards,
Eva Kemp.
#82141 Copied
peter4576

Participant

August 25, 2015 at 13:08

Thank you very much for your intentional help. Unfortuneately it now looks like this 🙂

https://gofile.me/6lYKv/9NfH0HGs

#82175 Copied
Eva Kemp

Support staff

August 25, 2015 at 13:55
Hello,

If you want to show only 2 lines in the title try to change max-height value in the code:
```
.content-product .product-title a {
    color: #0063BE;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 3.2em;
}
```
Set max-height to 2.4em.

Regards,
Eva Kemp.
#82188 Copied
peter4576

Participant

September 3, 2015 at 21:00

Hi again

I think I have tried everything 🙁 But its still jumpin’ on hover. When I hover title-text, the whole textfield and add to basket-button the whole thing is jumping.

https://gofile.me/6lYKv/DPDfZ36O

#84470 Copied
Eva Kemp

Support staff

September 4, 2015 at 09:47
Hello,

I’ve added this code in child style.css:
```
.products-grid .product-title {
    height: 3.2em;
}
```
Please check products now.

Regards,
Eva Kemp.
#84561 Copied
Viewing 10 results - 1 through 10 (of 10 total)