[Resolved] How to make woocommerce product images smaller?

[Thomas]

The option to make images smaller on Woocommerce doesn’t work on our website.

Customize > Woocommerce > product images.

The images are still really big even after regenerating the thumbnails.

[Leo]

Hi there,

That customizer panel is actually coming from WooCommerce plugin itself.

I see the image is currently set at 380 by 380.

Is that what your setting is? Have you tried clearing your caching plugin?

[Thomas]

Yes, I have refreshed the cache.

Where do you see 380 by 380? The image is 931 by 622 on my screen, at least the div is. Actually, I think the problem is that woocommerce div. The image is enlarged to fit the div size which is 931 by 622. Therefore, all my images are blurred. Can you see that?

In Customize > Woocommerce > Product Images:
– Main image width is set to 660 pixels
– Thumbnail width is set to 300 pixels.

I have taken 3 screenshots so you can see what I see on my screen.

https://send.firefox.com/download/b695ccbabe2eaca9/#3151ykI9ye_-dXgfOBN0pA

[David]

Hi there,

the Image Gallery is set to take up 50% of the Container width you set in the customizer. Which is 2000px. With the column padding / gutters removed this is why the images are being displayed at around 930px.

You can either:

1. Reduce the Container width.
2. Reduce the Product Image Area Width in Customizer > Layout > Woocommerce –> Single Product

[Simon]

Hi David,
Can we change the 50% width for pixel ? My image width is 600px but with a 50% width the image resize to 570px, GooglePageSpeed Flag the problem “Properly size images”. So i would like to change the % for fixed width.

What will be the magic code 🙂

Thank you

[Elvin]

Hi Simon,

Try this CSS selector.

.woocommerce div.product div.images, .woocommerce-page div.product div.images{
width: [your px width here];
}

But the “Properly size images” will likely pop again. For this issue you may have to register more image sizes so WordPress can have more image to choose from on its srcset.

[Simon]

Hi Elvin, this code is for the image or the div ?

[Elvin]

It’s for the div that holds the img tag.

If you want the <img> tag itself, you can use this selector:

.woocommerce div.product div.images img, .woocommerce-page div.product div.images img

[Simon]

It works, but it is not device-friendly.

.woocommerce div.product div.images, .woocommerce-page div.product div.images{
width: [your px width here];
}

[David]

Hi Simon,

can you raise a new topic and share a link to your site so we can take a look at the issue you’re having.

[Author]

Posts