WooCommerce Product Image Size

Resolved hashamyim
(@hashamyim)

5 years, 11 months ago

So, I am trying to get the product image to be a bit smaller (as the image it is showing is only 300px width anyway).
First I went to the Customisation > WooCommerce > Product Images > Main Image Width and set the value to 200px – no change.
Then, I found the code to change it manually. I entered the following in the functions.php file under function harrison_setup() :

add_filter( ‘woocommerce_gallery_image_size’, function( $size ) {
return array(
‘width’ => 200,
‘height’ => ”,
‘crop’ => 0,
);
} );

But instead of changing the image size, it just kind of makes the images (and thumbnails) zoom in a bit, however the holding div doesn’t get smaller, so it just looks ridiculous!

Does anyone know what I need to do, or what I am doing wrong?! I’m starting to go crazy! lol

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Support Riaan K.
(@riaanknoetze)

5 years, 11 months ago

Hi there,

The process you’ve followed so far sounds correct; Just to make sure though – have you also refreshed the thumbnails after making those changes? If you’re wondering, that can be done using the tools found under **WooCommerce > System Status > Tools > Regenerate Thumbnails**.

Also note: The code above wouldn’t change the size of the container at all, only the *dimensions* of the regenerated images. To change the container, you’d need to use additional custom CSS or check the settings of your theme/pagebuilder plugin on what’s possible.

Thread Starter hashamyim
(@hashamyim)

5 years, 11 months ago

Yeah, have done the refresh thing – sorry, forgot to mention that.
Ah…. well, it’s the container size that I am trying to change… I assumed that, if you change the picture size, the container would shrink to fit.
Do you know of any CSS code that could be used for that? Pretty much everything I have found relates to the add_filter code above, though it turns out that that isn’t going to help.
Plugin Support Senff – a11n
(@senff)

5 years, 11 months ago
If the image size is correct now, but you’d like to resize the container on the product details page, you could use some CSS code such as this:
```
@media screen and (min-width: 768px) {
  .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    width: 28%;
  }

  .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    width: 68%;
  }
}
```
Thread Starter hashamyim
(@hashamyim)

5 years, 11 months ago

That works perfectly!!!! Thank you!!!! 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘WooCommerce Product Image Size’ is closed to new replies.

Tags