WooCommerce Product Images Thumbnail

Hi,

My product images, after the featured image, are all coming up tiny (Unless you zoom in).

I have tried setting them all to the same dimensions of 800 x 800, and other things around the web. I’ve a cache plugin so each time before I checked if it was fixed by doing something new, I cleared the cache. I tried the regenerate thumbnails plugin too each time.

In my WooCommerce settings, I have it set to 800x800 with hard crop enabled in the Display tab under Products.

Site included in secure note.

Any ideas? :slight_smile:

Hi there,

Please kindly update the theme to version 5.1.1 and Cornerstone to version 2.0.6:

Then kindly read the changelog regarding the Woocommerce Thumbnails and follow the instructions there:

To install the regenerate thumbnails plugin follow the link below:

Thank you.

Could you be more specific by what you mean by half working and give us screenshots of the images that aren’t resized? All product images looks properly resized on my end.

Also give us a screenshot of your image in the home page.

Thanks.

Hello There,

Thanks for updating in! This issue is related to these threads:


Hope this helps. Please let us know how it goes.

Hello There,

Thanks for updating in! Any code modification or if you would like to override any feature, you will always need a child theme. This ensures you that any of your changes will not be overwritten when there is a theme update. If you use the suggested code in a child theme,it will fix the thumbnails and will display the same as what we have in the previous versions of WooCommerce and X 4.6.4

For the image in your homepage, please edit it back in Cornerstone and remove the bottom padding of the first section. This bottom padding is what making the space: http://prntscr.com/g21iih

Hope this helps. Kindly let us know.

Hi There,

This is what I am seeing at the moment:

It will depend on the screen size. There’s two column side by side. Take note that being responsive, the left part which is text mostly, on smaller screen size will need more height to accommodate entire content. When it increase height, the entire ROW will increase it’s height. Since the image on the right column will not grow larger, we can see the extra space below the image. To fix this, we need to make sure that those 2 columns will always have the same height. We can achieve that by adding the following JS code:

 jQuery(document).ready(function($) {
var max = 0;
$(".home #x-section-1 .x-column").each(function(index, el) {
	if( $(this).height() > max ){
		max = $(this).height();
	}
});
$(".home #x-section-1 .x-column").css('height', max);
});

Once they have same height, we can now position the image on the bottom of the column. On the right column style field add position: relative;. Then on the image style field, add position: absolute; bottom: 0; left: 0; right: 0;

Then for the product page issue, remove the code you have added on the child theme if you want the newer version.

Hope this helps.

Hi There,

I did check your product page and it is working as expected: https://positivitypack.com/product/surprise-a-friend/. That is the default design for the latest Woocommerce.
Can you give us the URL of the product page where it is showing small image?

Hello There,

I can see that you have enabled Jetpack plugin. Could you please disable the Photon module in Jetpack because Photon is generating the cache version of your images which is displaying the smaller images. To know more about the Pros and Cons of Photon module, please check this out: https://developer.wordpress.com/docs/photon/

Hope this helps.

Hello @jamces,

Thanks for updating in! Please check your WooCommerce product image dimensions. You might need to set the image dimensions and make sure that it is cropped to have a uniform width and height. You can check it in WooCommerce > Settings > Product > Display tab. For more information, please check this out:
https://docs.woocommerce.com/document/organise-your-content-product-images/

Hope this helps.

Hi there,

You should upload images of same sizes, OR square images, or bigger than 600px. Example, this image https://positivitypack.com/file/2017/05/web-28-smaller4.jpg is not square since its size is 800x534. And since 534px is the height which is smaller than 600px. Then there is no cropping, it will not become 600x600, but will stay in 800x534.

Thanks!

Let us know if you need further assistance.

Thank you

Sure, would we be able to delete this post as it has my brand’s logo in it? Or just remove the photos maybe?

Thanks :slight_smile:

Hi There,

I made the post unlisted and the staff and you will be able to see it.

Hope it helps