How to resize WooCommerce images without cropping them?

1
votes

I've been working on some eCommerce by using WooCommerce plugin. Every time I add a new image to Media Library, it will automatically generate different image sizes.

It isn't only a feature of WooCommerce, but also of WordPress. When I disable WooCommerce plugin and upload an image, the result is shown below: (I can disable different image sizes created by WordPress in Settings > Media > set values to 0)

enter image description here

I have uploaded only one image, but got three of them.

Also the same happens with WooCommerce - in this case, there are two more images. But they are cropped and I would need to uncropped them, only scale. Later I will show you why:

enter image description here

I can make images uncropped for WooCommerce in Appearance > Customize > WooCommerce > Product Images > check Uncropped option, but in this way I get only original sizes of uploaded images, but I need to scale them down (proportionally, without cropping).

Above I showed you, how WordPress, resp. WooCommerce create addition image sizes. And here is an example from my eCommerce. This is how my product's image looks like in eCommerce:

enter image description here

...and this is how I would like to achieve to looks like (uncropped, only proportionally scaled):

enter image description here

2
wordpresswoocommercecropimage-resizing

2 Answers

1
votes

I have been looking to solve this exact problem for the whole day and finally found the solution. Its basically like this Wordpress needs perfect squares as images it does not matter what size. For instance, if you upload an image with the sizes 150x450 Wordpress will force it to be larger til it fits the width of the container (100%). If the container has a width of 450 this will mean that the image will be resized from 150x450 to 450x1350 which is insane.

This would cause the image to become very long not caring about the dimensions of the container. So if you got a product the way to go about it is like this get an empty canvas in your program of choice (I used PAINT SAI but photoshop is also good) give it any square canvas I used 800x800 this is a fine size to preserve defined shapes instead of it becoming blurry. Then place the shape/picture in the middle of this canvas and save the file with transparent background.

This should solve your problem as for the thumbnails being the same size you Could do the following. Go to customize>woocommerce >product image and give the thumbnail size some width in my case I used 400 while selecting the option 1:1.

Hope this helps.

0
votes

If you're looking to avoid writing any code, you could try the following plugin:

https://wordpress.org/plugins/smart-image-resize/