- This topic has 5 replies, 3 voices, and was last updated 5 years, 7 months ago by .
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- You must be logged in to reply to this topic.
Support › Forums › Sunshine Pro Theme › Woocommerce Product Image Sizes in Sunshine Pro Theme
Tagged: Woocommerce Product Image Sizes
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
Can you share website url displaying shop products?
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
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;
}
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/
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.