Some Code for Single Product and Grid View Image Height and Width

I Had the problem that my images differ in height and they blow up the single product view and grid view ( shop view ). There is no option for height in woocommerce…
Here you have some code for ppl with the same problem.
Paste it in the Global Custom CSS in your theme options and modify it for your needs:

Single Product view
/* Max Height of the image shown in single product view, perfectly resized */
.woocommerce div.product div.images a img {
height: 600px;
object-fit: scale-down;
object-position: top;
}

/* Grid ( Shop View ), limited to 300×300, perfectly resized */
.woocommerce div.product-element-top a img {
height: 300px;
width: 300px;
object-fit: scale-down;
object-position: top;
}

I hope it helps you, i went crazy about it 😉
Perhaps you implement the max height in the Theme @elise @artem

Update: You must also put the code for all the devices like mobile and modify it that it fits!

Hello,

If this code works with your site, it is great. You should not set any height for images as if they are of the different sizes, big images would be damaged and small images would be a blur. Please read and follow these suggestions: https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

Best Regards

Hi Elise,

it works perfectly on the site, there is no blur and at the first time i have a nice grid.

Best Regards

Ok. If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts