Product Image – Set All to Uncropped & Square

Hi @sweeneysilver

How do I set it so that all of the product images on my shop are uncropped, square, & the same size? And, if the image itself isn’t square, for it to have a grey border – like it is on eBay.

From what I understand, you’re trying to set your product images to be uncropped, square, and of the same size, with a grey border if the image isn’t square.

To achieve this, you’ll need to follow these steps:

1. Navigate to your WordPress dashboard and go to Appearance > Customize.
2. Look for the WooCommerce option in the menu and click on it.
3. Under WooCommerce, you’ll find an option called ‘Product Images‘. Click on this.
4. Here, you can find the ‘Uncropped‘ option. Selecting this option will ensure that your images appear as they are, without any cropping.

?? Please note that this will result in all images being displayed in their original aspect ratio, which could mean that they appear different unless you’ve used photos that are uniform in size and resolution. ?? You can learn more about WooCommerce Customizer – Manage Store Notice, Catalog View, and Product Images Here

As for the grey border, Can you try adding the following CSS to?Appearance?→ Customize → Additional CSS?and see if this does the trick:

.woocommerce-product-gallery__image img { border: 10px solid grey; }

This will add a grey border to your images. You can adjust the border size by changing ‘10px‘ to your desired width.

Please remember to click ‘Publish‘ to save your changes.

I hope this helps! If you have any other questions or need further assistance, please don’t hesitate to ask.

Hi Tamrat, thanks for your reply.

However I already have the product images set to uncropped, what I’m looking to do is have all of the images on the shop & products pages be the same size, regardless of their original aspect ratios.

And for the images on the single product pages to also follow this format, & have the selected, enlarged photo be consistent in size regardless of the image’s original aspect ratio.

In short, I would like a set aspect ratio onto which the product images will be displayed on, uncropped, & where there is negative space, to be filled with a grey border.

Hope that makes sense, sorry if the wording of my question wasn’t clear.

Hi @sweeneysilver

Based on your provided information, it sounds like you want to standardize the display size of your product images across your shop and product pages, irrespective of their original aspect ratios. You also want the selected product images on single product pages to follow the same format, and any negative space to be filled with a grey border. I understand your requirements and am here to help you achieve this.

You might need to make some changes to your theme’s CSS code to accomplish this. Here’s a basic example of how you could achieve this:

ul.products li.product img {
background-color: #808080; /* This is a grey color, you can adjust as needed */
object-fit: contain;
width: 300px;
height: 300px;
}

This code will give all your product images a fixed size of 300px by 300px, and any extra space will be filled with a grey background. The ‘object-fit: contain’ property ensures that the entire image is always visible and maintains its aspect ratio, but it will add a grey border if the image does not fill the entire content box.

I tested this on my site using the Storefront theme, and found it works fine.

Click to see the screenshot if the image above doesn’t load: https://ibb.co/0YXhBdr

Please note that you might need to adjust the width, height, and product listing class values to match your needs. You can add this code to the “Additional CSS” section in the Customizer (Appearance > Customize > Additional CSS).

Alternatively, you can use a plugin like Perfect Images. It allows you to set a specific aspect ratio for your product images, ensuring they are displayed uniformly, regardless of their original dimensions. Furthermore, it automatically adds a grey border to fill in any negative space, creating a polished and professional appearance.

I hope this helps! If you have any other questions or need further assistance, please don’t hesitate to ask.

Thanks!