Image size in a Product Grid

If products have featured images of different size the product grid items will have different height and the inner content, such as title, price and “Add to cart button” would be on different levels. The best solution is to upload images of equal size and proportion, however, considering a great deal of products on the site, such a solution cannot be always applicable.

In order to settle the issue, navigate to Appearance – > Customize -> WooCommerce -> Product Image and find the size option for product page image as well as images in a grid:

• Main image width – Image size used for the main image on single product pages. These images will remain uncropped. Image width used in demo sites are: 600px.
• Thumbnail width – Image width used for products in the catalog, Image width for the catalog is 350px.

Thumbnail cropping checkboxes:

• 1:1 – Images will be cropped into a square;
• Custom – Images will be cropped to a custom aspect ratio, for example, 4:3 or there is the option to insert the aspect ratio
• Uncropped – Images will display using the aspect ratio in which they were uploaded

Just for information we provide images sizes applied in our demo:

• Product main image: width: 800px; height: 1200px.
• Blog post: width: 1024px; height: 720px.
• Page title background: 1200px; height: 400px.

In order to disable or enable a masonry grid in the Shop page as well as categories pages, there is an option in the Theme Settings > Shop > Product Style > Masonry Grid.