Woocommerce shop images like example

[Timmid]

Hello Themeco,

I’m struggeling with the images of the shop page of my website. I want them all to have the same height and centered above the title. Like this website:
https://www.degrotespeelgoedwinkel.nl/999-games/

Hope you can help.

[nabeel]

Hi @Timmid,

Thank you for reaching out to us. By default the shop displays the equal height products, You might have customization in your child theme which is overriding the default behavior. You can test this by deactivating the child theme and activate the parent theme.

In general the height of the product item depends upon the content, I see you have some images that are more in height which are disturbing the layout. To make sure to have equal height items you can resize your images to same size or you can restrict the height using CSS but this may cut the heighted images, for example you can try adding the following code in the Theme Options > CSS:

[class*=woocommerce] li.product .entry-featured a {
    max-height: 195px;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!

[Timmid]

Thx for the reply.

If I deactivate the child theme nothing changes. I added the provided CSS but then the images are indeed cut what doesn’t look nice. Also the images with less height are smaller so the titles ar’t matching anymore.

Is there a way to have al the titles aligned same height and the product images displayed scaled so they are full visible and centered above the title? Same as the link in my first post?

Thank you.

[Timmid]

I think i’m gonna style the Woocommerce shop with the new Looper functions, were i have better styling options. So thx for the help so far but the threat can be closed.

[nabeel]

Hey @Timmid,

Yes the new Layout Builder now enables plenty of possibilities, you can check out building the Archive Templates here and for Loopers introduction you can see this video here.

To see more you can visit our YouTube channel here

Cheers!