Image size and content alignment in a product grid

If products have featured images of different sizes the product grid items will have different heights 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 lot of products on the site, such a solution cannot be always applicable.

There are a few options here that can help you to improve your product’s grid view in such a case.

Firstly, you can configure your product image sizes and crop. Navigate to Appearance – > Customize -> WooCommerce -> Product Image and find the size option for product page images 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

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

Take into account that you may need to adapt the width for the product images set in a customizer to fit your website layout. For example, if you have a website container width of 1200px with a 4-columns product grid then your product element will have a width of 1200px/4columns = 300 px. In this case, you need to set a 300px size for thumbnail width in WooCommerce settings. It will reduce your website weight and increase website speed. If you have also different product grids across the website you can specify different product image size for each Elementor/WPBakery widget. Or you need to consider the widest product item for the calculation.

Different lengths of product titles also can shift the content and cause aligning the content on a different level, in order to fix this, there is the option to set one line-, two lines-, or no title limitation in the Theme Settings -> Product Archive – > Product Style – > Product title lines limit.

One more useful option that might help you to align your product blocks if they have a different set of components (title, price, rating, brand, etc) is called the “Even product grid”. You can find it in Theme Settings -> Product archives -> Products styles.