Modern Grid is designed for wide (landscape) images: by default its images are cropped to 600 × 384 px, a 64% height-to-width ratio. Classic Grid is recommended if you are using square images. You can switch the listing design in Products > Settings > Catalog Design > Listing Design.
How to add Modern Grid support for square images?
It’s quite simple but requires adding custom CSS rules:
.modern-grid-element .pseudo {
padding-top: 100%;
}
.product-subcategories .al_archive img.higher.rect,
.product-list .al_archive img.higher.rect, .al_archive img.higher.rect {
margin-top: 0;
}Add the code in the Additional CSS settings of your theme. See CSS adjustments for where to find them.
Please note that it will only work nicely if all your images are squares where width equals height.
Override the image crop behavior
Modern Grid images are cropped to the Modern Grid Image size. Go to WordPress Settings > Media, find the Product Catalog Images section and set the Modern Grid Image Max Width and Max Height to the same value, for example 600 and 600.
The new size is used only for images uploaded after the change. To apply it to your existing images, use the Regenerate Thumbnails plugin.
See how to find out the best product image size.