woocommerce product image sizes all different

Hey there!

In the CSS, the images are actually different sizes, so I would check on that (it’s not displaying different sizes, they actually *are* different sizes).

Go ahead and set the images again, then WooCommerce will automatically run the thumbnail regeneration. Also, you can try disabling autoptimize, or at least clearing that.

Also, you can try disabling autoptimize, or at least clearing that.

pro-tip; you can disable AO on a per-request basis by adding ?ao_noptimize=1 to the URL ??

hope this helps debugging,
frank (ao dev)

Hello @slash1andy
Thanks for your reply.
Sorry can you elaborate?
I understand that the images are different sizes as sometimes this cannot be helped when uploading them to the site, previously this has never been an issue as they had all shown the same size and scale regardless of what we uploaded.

You have said about setting the image size but with the latest woocommerce updates I have no idea where to change this so for example if I wanted all my images show as 400 high (the width would then be to scale) I wouldn’t know where to look. I tried this code (below) which did a grand job however it also changed the category images which use a different scale so I had to remove the code:

/*forces WC product images to all be 400px in height */
.woocommerce ul.products li.product a img {
width: 100%;
height:400px;

I then tried this code (below) but it hard cropped the images instead so again I had to remove the code:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 100%;
height:400px;

}

Can you provide me with code to change only the images shown in this link (product images within categories) https://www.hippyclothinguk.co.uk/product-category/trousers/bares-striped-cotton-trousers/large-bares-striped-cotton-trousers/ so they all show as the same size as they previously did before the update or can you explain to me where I make this change with in the dashboard? I have checked my custom CSS and found nothing I think is causing the issue.

The new woocommerce update for customizing images only has 3 image options:
1:1 – which hard crops into a square
Custom – which hard crops
Uncropped – which just shows the images in their different sizes instead of showing all the images same size to scale.

Thanks so much for your help.
Sy

Hello @optimizingmatters
Thanks for your message.
Are you suggesting adding this ?ao_noptimize=1to the end of every image url?
Sorry not to sure what you mean.
Thanks
Sy

Are you suggesting adding this ?ao_noptimize=1 to the end of every image url?

no, this is more aimed at @slash1andy to help troubleshooting when Autoptimize is active ??

Cheers for clearing that up @optimizingmatters as I didn’t think it really made sense to me.

[ Please do not bump. ]

So after doing a lot of hunting around I have come across a way to help with the image issues.

The update to Woocommerce 3.3 on wards has stopped woocommerce from issuing the image size commands and so your theme is most likely handling this. I use a wootheme and so have no idea why there should be an issue yet there still is. Unless you go through your whole image library and changed the images to the same size then you may have issues with sizing, our biggest issue was when you clicked on a category and viewed the products within that category, basically the new woocommerce update shows all these images as different sizes and so makes it look awful. All we get as a response from woocommerce is its a theme issue and to look at css, so now we have to become coders to use woocommerce. This issues is crazy and I don’t really understand why they changed the way images are shown but they have and now we have to deal with it. The wootheme we use has been updated for the latest woocommerce update but this issue still exists. I found some code that has certainly helped clean up my images and going forward I will have to make sure we are uploading images that are the same size which to be honest isn’t always possible.

This issue has become widely spoken about and so I’m hoping like the thousands of other people that a real resolution will come from Woocommerce at some point.

Here is some code that might help you control your image sizes, these can be added to child functions.php (we use the ‘theme customisation master’ plugin and add the code in the functions.php file), you can change the sizes according to what you would like:

This is the code we used to tidy up our images showing all different sizes.
Change your catalog images with a specific size:

add_filter( 'woocommerce_get_image_size_thumbnail', 'ci_theme_override_woocommerce_image_size_thumbnail' );
function ci_theme_override_woocommerce_image_size_thumbnail( $size ) {
    // Catalog images: specific size
    return array(
        'width'  => 750,
        'height' => 430,
        'crop'   => 1,
    );
}  

This is the code we used to bring the single product images under control.
Change the Single Product image:

add_filter( 'woocommerce_get_image_size_single', 'ci_theme_override_woocommerce_image_size_single' );
function ci_theme_override_woocommerce_image_size_single( $size ) {
    // Single product image: square
    return array(
        'width'  => 750,
        'height' => 750,
        'crop'   => 1,
    );
}

We had no need for this code but someone may find it handy.
Change gallery thumbnails:

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'ci_theme_override_woocommerce_image_size_gallery_thumbnail' );
function ci_theme_override_woocommerce_image_size_gallery_thumbnail( $size ) {
    // Gallery thumbnails: proportional, max width 200px
    return array(
        'width'  => 200,
        'height' => '',
        'crop'   => 0,
    );
}

Thanks very much for posting your solution to help others.

I’m glad you’ve solve your issue now, all the best!

Update
after using this code (see above) for a few weeks we have found that for us it is not a suitable work around to the issue caused by the woocommerce update. Unfortunately we found that it was hard cropping some of the images. All in all there is still no usable work around for this image issue. We would have to go through our whole image library (6000+) and re-edit them and upload them so all our images are the same size upon upload, this as I’m sure many others will agree is unfeasible, to be honest we just can’t create images that are going to be the same size due to how the images are taken.
Until this image issue Woocommerce was one of the best shopping cart plugins out there, but this has created a massive issue for us and many others.
If the above code works for you then I’m glad it could help.

@sy19 I have taken a look at the original link you submitted and this is what I see:

Link to image: https://cld.wthms.co/AVAFNg

Typically this is caused by images being set by ratios without hard cropping and the images are different dimensions, causing them to be output at different heights.

The original image on the left is 356×600, and the original image on the right is 416×590. The aspect ratio of 356×600 is 89:150, and the ratio of 416×590 is 208:295. As these images are being reduced down to 324px wide they do not end up the same heights due to their heights and aspect ratios do not match. If the original uploaded images were the same aspect ratio, they would display at the same height.

You could set cropping to be on, but then the full image would not show.

Hope that helps

Hello @jessepearson
Thanks for taking the time to reply.
I understand what you have said and understand that the only way to really get my images to display the same is to upload them in the same size as each other. However my gripe is with the fact that pre woocommerce 3.3 there was no issue, it was only when woocommerce was updated to stop handling the image size that this issue reared its ugly head. We have thousands of products and as already stated in a previous message we would have to re-upload all the images to the same size to get this to look tidy which just isn’t feasible as it would take hundreds of hours to complete.
I have tried the cropping idea you have mentioned but the results as you have noted create incomplete images which also looks bad, I was really trying to get woocommerce to go back to the way things were before this update but that looks unlikely to happen. As I understand the update was meant to give power to theme devs so they could control the image size within their theme. This sounds great on paper but from a users point of view its caused a bit of a headache as the only solution is to scrap all current images and re-upload them all again but this time in the same size.
I love the fact that you are trying to help and can’t fault you guys for that but much like other people I just want this feature to work like it did in the past, as when woocommerce handled the image sizes it seemed to look ok with everything in order.
Anyway thanks for your time.
Have a good one.
Sy

@sy19 I set up a store with WC 3.2.6 and added products with your images, this is what I see:

Link to image: https://cld.wthms.co/qWhaHL

This is with these settings:

Link to image: https://cld.wthms.co/1xjOtJ

I then took your filters and updated them to this:

add_filter( 'woocommerce_get_image_size_thumbnail', 'ci_theme_override_woocommerce_image_size_thumbnail' );
function ci_theme_override_woocommerce_image_size_thumbnail( $size ) {
    // Catalog images: specific size
    return array(
        'width'  => 300,
        'height' => 300,
        'crop'   => 0, // not cropped
    );
}  

add_filter( 'woocommerce_get_image_size_single', 'ci_theme_override_woocommerce_image_size_single' );
function ci_theme_override_woocommerce_image_size_single( $size ) {
    // Single product image: square
    return array(
        'width'  => 750,
        'height' => 750,
        'crop'   => 1,
    );
}

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', 'ci_theme_override_woocommerce_image_size_gallery_thumbnail' );
function ci_theme_override_woocommerce_image_size_gallery_thumbnail( $size ) {
    // Gallery thumbnails: proportional, max width 200px
    return array(
        'width'  => 200,
        'height' => '',
        'crop'   => 0,
    );
}

I brought the thumbnail size down to 300×300 and turned off the hard cropping, as it is in the default settings in WC 3.2.6. I copied the store and updated to WC 3.5.2, added the filters in functions.php, and regenerated thumbnails. This is what I see in 3.5.2 now:

Link to image: https://cld.wthms.co/x81P5k

I believe you were on the right path with the filters, but the thumbnail size was just too large and it was also hard cropped. Setting the width and height will limit the image to being that wide or tall while keeping the same aspect ratio, it will only crop it if crop is set to 1 (true).

I do realize that some may argue that with the width of the thumbnail being 300px wide, the images show up like this on some mobile devices. I would agree that’s the case if there were devices that displayed pixel width between 450px and 767px, I don’t believe there are many, if any.

• This reply was modified 5 years, 12 months ago by jessepearson.

Hello Jesse
Thanks for taking the time to look into this further, as business is really starting to push forward because of Christmas I’ve been quite busy with normal day to day running of the businesses but I’ll see if I have some time to take a look into this further. It all looks very promising though, just wish it was still part of the core. I’ll have a play around and let you know how I get on, others seem to be seeing this thread so hopefully they will also give it a try and see what happens. I’ll be back in contact when I’ve found some time to try this out. I’ve been trying to build another website for the past month but this last week has just been impossible due to work load increasing, it will all calm down in the new year so I can look at coding and building again.
Thanks again for looking into this, I’m very grateful.
Sy

Hi @jessepearson
(I realise that I didn’t tag you in the last note I left you, I hope you saw that)

I hope you are well.
I have had a play around with this but for some reason I’m coming a cropper.

-I have added your code (thanks for that)
-regenerated thumbnails (however I noticed that image sizes changed straight away anyway when I refreshed the product page)
-checked the settings in customizing woocommerce to make sure the thumbnail cropping is set to ‘uncropped’
-emptied all caches

The results
I’m getting some images hard cropped and some looking fine (as your example), it’s a very odd outcome. Would you have any clues as to what I’m missing? I don’t really understand why some would so fine and the others hard crop.

I’m currently building a new site and so have been able to play around without upsetting my main site, here are the results:
https://festivalclothinguk.co.uk/product-category/trousers/cargo-trousers/small-medium/

Cheers Sy

@sy19 It looks like the ones with the hard cropping are actually getting cropped at 324×324, is there an image size you have set for this?

Link to image: https://cld.wthms.co/mlyqeV