Woocommerce Product Image Sizes in Sunshine Pro Theme

[munch777]

I’m trying to resize the Product Image size for woocommerce to display a variations table to the right of the image.

I’ve done the following such as

1. Resize the Single Product Image to 230px x 230px
2. Regenerate the Thumbnails.

Is there something I need to change in the Child Theme css as the product image is around 600px X 600px “without” any image being loaded?

When I do load the image it goes fills the 600 x 600 space.

Chris

[Davinder Singh Kanith]

Can you share website url displaying shop products?

[munch777]

Thanks Davinder,

The website is here…

https://warwickstuart.com/paintshop/

e.g. With a sample dev Image – https://warwickstuart.com/paintshop/shop/paint-product/debeer-1-10-wash-primer-hardener/

e.g. With No Sample dev Image – https://warwickstuart.com/paintshop/shop/paint-product/debeer-1-series-candy-colour-additive/

This what I’ve been referencing for information

https://docs.woocommerce.com/document/using-the-appropriate-product-image-dimensions/

Chris

[Davinder Singh Kanith]

Chris, what I understand you want 230X230 images show in the same area and not stretch to 600X600

If yes, add following to the style.css file

.woocommerce div.product div.images img {
width: auto !important;
}

[munch777]

Thanks Davinder,

Yes, that worked fine resizing the image.

What is the best way to make the whitespace between the main image and variations table adjust with image? Obviously it needs adequate white space between the image to look smart.

Check out the example I’ve put up in the dev site: https://warwickstuart.com/paintshop/shop/paint-product/debeer-1-series-candy-colour-additive/

[Chinmoy Paul]

Your image size is very small. This reason you are getting the lot of gap.

It would be lot of work if you want to reduce the gap. Because any CSS changes for it can create the issue on mobile device.

[Author]

Posts