Woocommerce image sizes

Hi Team,

Hoping you can assist with some image size/clarity issues in Woocommerce.

I have read and re-read the provided details on blurry images and done SO many tests and can not get it right.
Which system is creating the main product image dimensions 518.4 x 1139.43 – the SVI plugin or X or Woocommerce?

How/where do we adjust to make the image size match the main image div dimensions or vice versa… either make the image frame 500 x 1099 to display a better quality version of the image or update the image rendering (that wordpress is doing) from 500 x 1099 to match the div 518.4 x 1139.43. We only want them to match and it there no simple way – one way or the other?

Sample pages below :slight_smile:

Ok - I found the new X settings for Woocommerce image settings but now all new images are creating a very small square and blurry thumbnail under the main product image. Everything else appears to be working but you can see on the above link the middle thumbnail is how the product thumbnails used to appear (uncropped and crisp - perfectly) and then on either side is one newly uploaded image (since the update to the size settings) and one previously uploaded image but regenerated - our hope is to have the middle old display to be available for newly uploaded image too - no cropped squares - where are the settings for this please.

We have thumbnails set to un-cropped - but still the issue persists.

Here is another instance where the old thumbnails looks amazing and the newly sized/newly uploaded or regenerated thumbnails look crap ~ ~

Hey @deedesign,

I’m not sure why it is displayed like that in your site. Would you mind switching to the parent theme and deactivate third party plugins which can override WooCommerce image display?

Thanks.

Thank you @christian_y

I followed your instructions and deactivated SVI and Show Single Variations as well as activating the parent theme. The only change was that the small cropped square thumbnails (that only started showing up on images uploaded AFTER updating X) are moved to the top right corner of the main product image. I am guessing this is standard woocommerce display - but they are still cropped and very small.

The change in the thumbnail dimensions (un-cropped) and quality changes after an X update.
We really need it to go back to the way it was… please advise where to update in the new image dimensions settings to have un-cropped better quality product thumbnails.

ss attached display the difference, thumbnail in the middle is how they all used to look - and the right and left are a new image (since the update) and a regenerated image (since the update) both are displaying incorrectly and we would love to fix it please.

Hello @DeeDesign,

Thanks for writing in! :slight_smile:

It isn’t X theme that is responsible for creating cropped images but Wordpress itself. Wordpress regenerates these auto resized images, and Woocomerce automatically uses it.

To stop auto resizing, follow the simple steps:

  1. Go to Settings > Media into your Wordpress dashboard.
  2. Now in Large, Medium and Thumbnail sizes, simply put 0 into their width and height:

  1. Save your changes.

This setting will take effect in your future uploads.

Also, the theme has it’s own set of image dimension which is needed in displaying the images like the featured images or the recent post element images. You can check and update it in FUNCTIONS/GLOBAL/ADMIN/SETUP.PHP file at line 80:

    // Featured Images
    // ---------------
    // Theme support for featured images and thumbnail sizes.

    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 100, 9999 );
    add_image_size( 'entry',                   x_post_thumbnail_width(),      9999,                                   false );
    add_image_size( 'entry-cropped',           x_post_thumbnail_width(),      x_post_thumbnail_cropped_height(),      true  );
    add_image_size( 'entry-fullwidth',         x_post_thumbnail_width_full(), 9999,                                   false );
    add_image_size( 'entry-cropped-fullwidth', x_post_thumbnail_width_full(), x_post_thumbnail_cropped_height_full(), true  );

This sets the different image sizes to be used in the theme.

Hope this helps.

Thank you @jumar,

I have followed your instructions for updating the media settings to 0 across the board.
And then tried to upload a new image with no change from the above, it appears on the admin product page gallery tab differently but on the front end is still squished into a square.

I wanted to move onto step two but would like to clarify - do I edit this file in X Theme or copy it to the child theme and then edit? Please advise, once I understand the above choice do I update the number for this line set_post_thumbnail_size( 100, 9999 ); ?

I did a test and updated the .php file to
set_post_thumbnail_size( 200, 9999 );
and updated but nothing changed so I changed it back.

Thank you.

Further to the above I have the X Thumbnail Cropping settings set to “Uncropped - Images will display using the aspect ratio in which they were uploaded” but they are not working as selected.

Also the one thumbnail displaying correctly uncropped was like all our product thumbnails before the X Theme update - something changed since that time - please help us adjust to go back to the previous display.

Hey @DeeDesign,

I’ve regenerated one of your images and discovered that the change was caused by WooCommerce and not X. Please look at the screenshot below.

Highlighted in yellow, woocommerce_thumbnail and woocommerce_single are the settings you’ve set in the Customizer. Those are provided by WooCommerce and not X. For more details, please see https://github.com/woocommerce/woocommerce/wiki/Declaring-WooCommerce-support-in-themes

Highlighted in blue, the woocommerce_gallery_thumbnail image size currently could not be changed. It is WooCommerce who changed how their thumbnails should look like and not X.

Also, several version before, X designed that the thumbnails be placed on the upper right hand of the single product image. It is the SVI plugin that disabled the Product Gallery Slider so the gallery reverted back at the bottom. It is a new WooCommerce feature that is supported in X. See https://github.com/woocommerce/woocommerce/wiki/Enabling-product-gallery-features-(zoom,-swipe,-lightbox)

I’ve spent some time trying to edit the woocommerce_gallery_thumbnail but it looks like there is no way to modify this currently so I’d recommend that you deactivate your SVI plugin or try contacting WooCommerce support for this.

It would also be good for you to know the details of the change in WooCommerce image size. Please see https://woocommerce.wordpress.com/2017/12/11/wc-3-3-image-size-improvements/

I’ve also tested this in the default WordPress theme and the gallery thumbnail is really 100x100px.

Thanks.

Thank you - l will get in touch with Woocommerce support as well.

But I want to understand the the new customizer settings, they moved in the last update from Woocommerce > Product Display to customizer. There is an option there to have thumbnails “uncropped” which is selected. With SVI disabled the thumbnails still display cropped like your image above. Does this have anything to do with X or is this option for uncropped thumbnails also a woocommerce situation?

Hey There,

Please also check out this thread: https://theme.co/apex/forum/t/resizing-woocommerce-images/1706
It has a very detailed explanation on how we have integrated in the theme the latest changes that made by WooCommerce particularly in in the product images.

If you want to removed these new features, these threads might help you: https://theme.co/apex/forum/t/remove-product-image-updates-on-woocommerce-3-0/12885/6, https://theme.co/apex/forum/t/cropped-pictures-in-the-woocommerce-product-gallery/3420/2

Hope this helps.

Thank you @RueNel

Appreciate the update - the first link above needs to be updated for the new location and layout of the Product Display details.

I have had success with the support from Woocommerce and they asked that I share the findings with Team X, as they do feel that the issue is something to do with the Theme - us or them? I am not sure but here is a record of some of the findings and we did find the below solution solved the missing un-cropped thumbnails on our shop.

Thanks again :slight_smile:

Yuki K (Automattic)
Mar 26, 00:57 UTC

Great to hear! Yes, if the X theme team knows about this, that would be great.

Yuki K (Automattic)
Mar 25, 22:53 UTC

Glad to hear adding the code has helped! It’s a bit tough to decipher, but typically it is because of the theme that is being used and some code needs to be overridden in order for the image size settings you need work. I’m glad to hear that it is working for you, though? When switching to the X theme, did it help there as well?

Thanks!
Yuki K | Happiness Engineer

Yuki K (Automattic)
Mar 25, 18:12 UTC

Thank you for your continued patience on this. Checking the staging site, I tested adding the following code to the Twenty Seventeen funtions.php file:

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,
);
}

The code I used was from the following post which also has a few filter options for overriding image sizes for your theme: https://www.cssigniter.com/kb/adding-images-woocommerce/

I would highly recommend using a child theme of the X theme you are using and add the above filter to the child theme’s function.php file. You may or may not need to mess around with the actual width number depending on your theme’s original settings. Then refresh your product’s page to see if that helps.

Let us know if you have further questions!

Yuki K | Happiness Engineer

Hey @DeeDesign,

Thanks for sharing your conversation with WooCommerce support. I previously was unable to find the right filter. I found it now. It’s in https://github.com/woocommerce/woocommerce/wiki/Customizing-image-sizes-in-3.3. I’ll take note of this.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.