change thumbnail image proportions

Hello,

Our client uploaded product images using 2 different sizes for 2 different products. On the shop page, one of the products has a square thumbnail, and the other has a rectangle. All product settings are the same except the square thumbnail original image is 600×750, and the rectangle thumbnail original image is 480×600.

Can you help us understand why the template changes the thumbnail size based on the original image size? (e.g why aren’t all thumbnail images the shape of the original images, or are there size min/max that affects the thumbnail size?)

Thank you.

Hello,

There are no special requirements for product images sizes in our theme. It depends on the design and layout of your website. As for our demo, here are sizes from WooCommerce -> Settings -> Products -> Display

Catalog images – 430×490
Single product image – 700×800
Product thumbnails – 200×230

Template does not change the thumbnail size based on the original image size the default WooCommerce functionality only set the image scale from Appearance >> Customize >> WooCommerce >> Product Images >> Thumbnail Width.

So if you want to display all the product images in same sizes then try to use the images of the same size.

Best Regards.

Thank you Aizaz,

We don’t see a “Display” section under following path:
WooCommerce -> Settings -> Products -> Display

There is only “General”, “Inventory” and “Downloadable Products”?

When we go to: Appearance >> Customize >> WooCommerce >> Product Images >> Thumbnail Width
it is set to 600, but the cropping is 1:1 square. However, 1:1 square is not what’s happening with the Woodmart theme enabled on a 480×600 product image. (Please refer to the previous private link.) Is the woodmart theme creating different thumbnail sizes for some reason, even though 1:1 is selected?

Do you know if Woocommerce will scale smaller images up in size to the 700×800 minimum by default? No worries if this is not known.

Most Welcome,

The image settings exist inside Appearance >> Customize >> WooCommerce >> Product Images. If you don’t like cropping as 1:1. Then simply select the “Uncropped” option for “Thumbnail cropping”.

Screenshot for clarification: https://jmp.sh/ogBuZei

The “Thumbnail Width” option did not change or crop the actual image height or width it is just an image scale and it is responsible for blurry look or the clearness of an image.

Our theme does not creating different thumbnail sizes, because it’s a part of default WooCommerce functionality and our theme does not influence this.

You can read and follow the below documentation:
https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

Best Regards.

Thank you Aizaz,

That link is very helpful.

We are just confused as to why we have 1:1 square selected in the admin, but the woodmart shop page is displaying a thumbnail image that is not 1:1 square. How do we get this setting to create 1:1 square with the woodmart theme?

If this is outside the scope of support and is woocomerce related, I understand and will follow up with woocommerce.

Most Welcome,

It seems that the cropping option crop the image according to the existing resolutions that’s why the image did not shown as square because the actual height and width is not the same. You can check the cropping behavior with some default theme like twenty nineteen also. So if you want to display all the image as a square boxes then you have to use equal height and width for images.

You can check the below articles for this purpose:
https://wordpress.org/support/topic/product-image-ratio-not-correct/
https://docs.woocommerce.com/document/image-sizes-theme-developers/

Best Regards.

Hi Aizaz,

Thank you for the additional links.

The woodmart theme is overriding the Woocommerce setting and is not cropping the image 1:1. The 2nd link you provided says the them defines the image sizes.

Please note this: When we activate the twenty nineteen theme, all the images are cropped 1:1. But when we active the Woodmart theme, 1 of the images is not cropped 1:1. Woodmart is interfering with the cropping.

Can you please troubleshoot this issue with the woodmart theme?

Hello,

It’s not the theme its the WordPress option from SETTINGS > MEDIA .
Yes the second link said that theme can define the image sizes. But at the current moment our theme does not overriding those image sizes.

Exactly which image did not crop? 480×600 or 600×750 ?
Just deactivate all the third party plugins and then let me know the image which did not affected by the defined crop settings.

Best Regards.

480×600. This is very clear if you are looking at the site. It is not WordPress “Settings > Media”. (That setting is 150×150, which is not how 480×600 is cropped.)

We see you changed the crop to custom 4:3, and you can see woodmart is not cropping the image 480×600 correctly. Try changing the theme to twenty nineteen, and the image is cropped correctly. Change to woodmart, and it is not cropped correctly. The woodmart theme is the issue, this is very clear.

We have disabled all plugins and the issue persists with the woodmart theme only.

Hello,

Yes, I have tested it, the thumbnails did not cropped according to the specified settings. I notice that you contain CDN(cloudflare) enabled so it might be a cache issue.

Could you please disable the CDN so It will be clear that this is not due to server cache.
Screenshot for clarification: https://jmp.sh/NnLu11l

Best Regards.

Hi Aizaz,

We have provided a new staging URL without any host cache or cdn cache, and the issue persists.

Hello,

Actually you set images size to 600 in Thumbnail width option but has smaller original images.
So they can’t be cropped correctly because they are already smaller than 600 in ratio 4:3
so for example if you will upload image 800:1000 the crop will work well or if you will set smaller size in customize. For example 300 instead of 600 then it also works. It works in default theme because the default theme has predefined size of 300 px not 600.

You can check the below example when I set 200 in customize and update the changes it works just fine.

Screenshot for clarification: https://jmp.sh/EvQ6cKw

Best Regards.

Thank you Aizaz,

That all makes sense. For some reason the 600 was in there by default.

We appreciate you taking the time to review and explain the issue.

Most Welcome :-)

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day :-)

Topic Closed.
Best Regards.

[Author]

Posts