product images uncropped same size square

Hi @karenelated,

Have you tried setting these dimensions directly through the Customizer → WooCommerce → Product images? You’ll want to regenerate thumbnails once you make changes there.

If the images are still not shown with the set dimensions, you may want to reach your theme author for further checks.

As a band-aid solution, you can add the following CSS to Customizer → Additional CSS:

.woocommerce ul.products li.product a img {
    width: auto !important;
    height: 300px !important;
}

.woocommerce div.product div.images img {
    width: auto !important;
    height: 300px !important;
    
}

I hope this helps.
Thanks.

Hi abwaita

Customizer only specifies width not height.
I’m not a coder but your suggestion doesn’t look like it’s specifically for the thumbnails. And I won’t add !important to any code.

Hi @karenelated,

Customizer only specifies width not height.

I see, in that case, you’d want to reach out to the theme authors and try to figure out if there is an add-on or custom solution to also set the image height.

Aside from that, you can use CSS as advised by my colleague to set the proportions – or – a plugin like Imsanity that automatically scales large image uploads to the configured size and replaces the original image. Feel free to read the plugin description here: https://www.ads-software.com/plugins/imsanity/.

Hope this helps.

thank you @abwaita and @rainfallnixfig the css code works in some cases (without the !important)

– on the shop catalog pages it works, but the images need to be centered
– in any other product widgets like related products or the Elementor product displays on the home page it stretches the image to fit the height, but doesn’t adjust the width, so they are distorted. This is much more apparent on mobile.
– on the individual product pages it blocks the Zoom function.

The imsanity plugin won’t work as only product images need to resized and it isn’t practical to manually select 3,500 products every day when they are refreshed to resize them.

Hey @karenelated,

Since this is a bit of coding involved, I’m going to leave the topic open for more time but just wanted to let you know, you can also ping int eh following advanced channels for help.

• WooCommerce Slack Community
• WooCommerce FB group

I hope this helps!

thanks @battouly!

Is it possible to add a feature request for WooCommerce to equalize the heights of the thumbnail images with auto width? I’m sure not every eCommerce store has consistently square product images.

I don’t have the expertise to adjust the code above, but because of the unwanted effects of affecting the images on the single product page and distorting the aspect ratios of some of the thumbnails, I can’t use it.

Hi @karenelated

Is it possible to add a feature request for WooCommerce to equalize the heights of the thumbnail images with auto width?

Sure! You can submit a feature request to our Ideas Board here: https://ideas.woocommerce.com/forums/133476-woocommerce

Is there anyone else who knows the correct css to make this work? I unfortunately cannot write css. The code above is so close to the solution that I know there is a simple solution now.

It needs to only apply to the thumbnail images not images on the single product pages and also not change the aspect ratio of images, just scale them down to the correct height.

Thanks
Karne

Hi Karne ??

I’ve generated a custom CSS code for your that will set the same size for all of the thumbnails. Please note that it is not possible to maintain the same aspect ratio as the images will need to adjust to the new frame I’ve established with the CSS.

Now, if you would like to have an optimal aspect ratio you will need to resize all of your images to the sizes I’ve set below.

Please add the following CSS under Customize > Additional CSS, you can add the following code:
?

/* Adjust thumbnails sizes */
.primary .attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    height: 230px;    
    width: 150px;
    max-width: 150px;
}

Results:

https://www.screencast.com/t/6HkMn1ShOj8
?
If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

If you do require more help with the actual coding, we’d recommend you hire a developer who can take a look at this, quote you for their services and help you add this feature to your site. We’d recommend getting in touch with a web developer or one of the customization experts listed at https://woocommerce.com/customizations/.

Cheers ??

We’ve not seen any activity on this thread for a while, so I’m marking this thread as resolved.

Hopefully, you were able to find a solution to your problem! If you have further questions, please feel free to open a new topic.

Cheers!