Solved

Cart box at same heigth

  • 25 November 2021
  • 11 replies
  • 47 views

Badge +1

Hi,

Does anyone know how to get the rectangles (with the text ‘Opties selecteren’) to the same height, regardless of the length of the product name and the price above? See screenshot. It’s made with Elementor Pro → Product Archive widget.

 

Thanks for your help.

Gerard

icon

Best answer by Alex Skripnikov 26 November 2021, 11:29

View original

11 replies

Userlevel 2
Badge +2

One of possible solutions would be setting min-height property via custom  css  style, find a class name which is assigned to container with product title and extend this class with additional property min-height

Badge +1

Hello Alex,

Thanks for your help. I’m not that good at CSS-codes or PHP (that’s probably why I use Elementor ;-)). But I will dive deeper in the solution you’re suggesting. Thanks again.

 

Gerard

Userlevel 2
Badge +2

Hello Alex,

Thanks for your help. I’m not that good at CSS-codes or PHP (that’s probably why I use Elementor ;-)). But I will dive deeper in the solution you’re suggesting. Thanks again.

 

Gerard

If drop a link of your website I would take a look at the problem, probably I will be able to give you a better solution

Badge +1

Hi Alex,

You’re too kind!!! This is the product page:

https://www.rozestraten-audio-video.nl/product-category/luidsprekers/

Again: thanks!

Gerard

Userlevel 2
Badge +2

if this looks as you need, then you need to add the following css code to your page

h2.woocommerce-loop-product__title {
min-height:110px;
}

 

Badge +1

Dear Alex,

This is exactly what I needed. Thank you so much.
BTW: I didn’t need the h2-prefix. This code was enough: .woocommerce-loop-product__title { min-height:110px; }

 

Have a beautiful day!

Bye for now,

Gerard

Userlevel 2
Badge +2

Dear Alex,

This is exactly what I needed. Thank you so much.
BTW: I didn’t need the h2-prefix. This code was enough: .woocommerce-loop-product__title { min-height:110px; }

 

Have a beautiful day!

Bye for now,

Gerard

I added h2 tag, just to make sure that changes in css will not affect other places where this class name (woocommerce-loop-product__title) is used. But if it works fine for you now, then you can leave it as is.

Badge +1

OK, I wil check the entire site again (and put the h2 back if necessary). As said: CSS is not my core business ;-).

Userlevel 2
Badge +2

OK, I wil check the entire site again (and put the h2 back if necessary). As said: CSS is not my core business ;-).

Actually you can have even more compact view of your shop and reduce min-height to 50px, 

 

css 

.woocommerce-loop-product__title {

min-height: 50px;
font-weight: 700!Important;

}

 

and set global Elementor settings 

 {

line-height: 1.3em
text-font-size: 13px;

}

 

 

Badge +1

Hi Alex,

Thanks for your suggestion to make the product-size more compact. I’ve tried it, but I like your first solution better (more stylish).

Have a good week end,

Gerard

Userlevel 2
Badge +2

Hi Alex,

Thanks for your suggestion to make the product-size more compact. I’ve tried it, but I like your first solution better (more stylish).

Have a good week end,

Gerard

You are welcome !

Reply