[Resolved] How to change Single product image size (Again)

[Author]

Posts

[Richard]

I know this question is a regular one and I've read several tickets about it. Sadly they haven't helped. Simply put - the WC product image in my single product template is not scaling to the available space or more to the point it's being scaled down from the it's supposed setting. So I have a lot of white space. If anyone better versed in the WC CSS could take a look I'd be much obliged. I'm guessing it's a conflict with the theme (Divi) but I can't work it out.

hidden link

Would be a good starting point.

Thanks

[Beda]

When you use Toolset, DIVI and WooCommerce you need to consider an exception:
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/

After you can follow this dedicated DOC to manipulate the Shop and Products as with DIVI it's a bit special:
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/creating-a-custom-shop-page-for-products-using-divi-builder-and-toolset/
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/creating-a-custom-single-product-page-with-divi-builder-and-toolset/

You will need to consider this probably as well:
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/

However, on the link you link, to me it seems you call the original image size, hence not a specified smaller, for example:
hidden link, but then it's scaled to width="750" in HTML

But that (huge) image is put into a DIV of width: 251px; and height: 251px; by your code.
It seems the "flex-viewport" (I think this is FlexSlider) that makes this happen, not WooCommerce or Toolset.

You'd need to review your HTML of the FlexSlider if you use that, or else plugin/code that generates that output (it's not from Views, as far I see, but put in a View)

[Richard]

The problem may well be the flexport - problem is I don't know where it's coming from. The position is simply a Divi text module with the TS shortcode for Product Image in it.

[Minesh]

Well - as Beda said, try to check issue by deactivating all Toolset plugins and check, if issue still persists then its not a Toolset issue.

[Richard]

Well I'm still investigating but it's a single product view I've built with Toolset.

[Minesh]

Could you please share access details so I can check how your single product page is configured.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - I've added following CSS to custom CSS section at Divi settings:
=> hidden link

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    float: none;
    width: auto;
}

I can see its working fine now. Could you please confirm 🙂

[Richard]

Minesh - you are real star. Having spent quite a while trying to work out which was the right bit of CSS you've got it just right.

I owe you !

[Richard]

My issue is resolved now. Thank you!