[Resolved] Woocommerce title length and positioning

[roadlink]

Hello,
I want to limit product title length with 2 rows. How i can do that?
I also want to make all product aligned. Found below code and it is working great for category pages.
But it doesn’t work in the main page. How to fix it?

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

[Leo]

Hi there,

Can you try this?
https://generatepress.com/forums/topic/is-there-a-way-to-limit-the-length-of-text-on-the-shop-pages-for-products/#post-1349755

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[roadlink]

thank you 🙂

[roadlink]

Hi Leo,

That is weird that it doesn’t work on main page.
Which I created blocks with regular woocommerce blocks.

[David]

Hi there,

WOO blocks doesn’t use the standard Woo templates – so would require different CSS. Do you have a link so i can confirm what CSS is required ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[roadlink]

Sure, here you go.
Btw, which blocks do you advice?
I want to have simpliest and fastest solution.
If these blocks use different style, will it means additional codes?

[David]

Woo Blocks is about the only option if you want to add WYSIWYG content in the editor.
Alternative is to not use the Blocks, instead use the built in Woocommerce shortcodes – then that code you have should apply.

If you want to continue using blocks then update the CSS to this:

.woocommerce ul.products li.product .woocommerce-loop-product__title, 
.woocommerce ul.products li.product h3,
.wc-block-grid__product .wc-block-grid__product-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[roadlink]

Thanks, I will use woocommerce shortcodes then.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts