WooCommerce Make images in shop the same aspect ratio

Hi All,
Solution for Enfold users (Also works for most other WooCommerce WordPress Themes)
I have been looking for something that fixes this problem in WooCommerce for a while.
If your client uploads images in different aspect ratios and sizes into WooCommerce the shop grid and product pages will be extremely inconsistent.

The following code makes it so imagery is a uniform size within the container making the standard woocommerce categories and grids less sensitive to image aspect ratio variations. I use square for most sites.

NOTES – Please adjust the aspect ratio to suit your WooCommerce Settings!
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

/* Shop / Categories - Sets the aspect ratio of the image to square and contains the image within it */
#top .thumbnail_container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#top .thumbnail_container {
aspect-ratio:1/1;
}

/* Product Page - Sets the aspect ratio of the main product image to square and contains the image within it */
#top .product div.images img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.template-shop .single-product-main-image .images a {
    aspect-ratio: 1/1;
    overflow: hidden;
}

STOP ENFOLD CROPPING IMAGES IN SHOP
In Functions.php in your child theme.

add_action('after_setup_theme', 'update_enfold_image_sizes');
	function update_enfold_image_sizes() {
add_image_size ('shop_thumbnail', 200, 0, false );
add_image_size ('shop_catalog', 450, 0, false);
add_image_size ('shop_gallery_thumbnail', 300, 0, false);
}

• This topic was modified 1 year, 11 months ago by thinkjarvis.