Image size suddently changed to HUGE

UPDATE

This is even more confusing

ON my staging site the images look ok the right size. I have the same theme and the same plugins all up to date.

On my main site – when I can see the correct layput in the Customiser and copy the link then to check – the page shown has again those HUGE images.

something is very weird here – it looks like the customiser on my live site isn’t working properly….. but how come it work ok on my staging site?…

I have purged the site cache, the browser cache – nothing helps.

Does any onw know what the issue is?

grateful for your advice

• This reply was modified 5 years, 1 month ago by magicpowers. Reason: spelling errors
• This reply was modified 5 years, 1 month ago by magicpowers. Reason: additional info

UPDATE 2

My theme developer said that this issue is caused by my W3 Total Cache minify.

He was right – I disabled minify and all images went back to normal.

That’s strange and unexpected as minify is supposed to decrease the size of images not increase and only in the caching. I can configure it so will do some tests on my staging site, and will reach out to W3 Total Cache developers for advice.

The good news is that this issue was not caused by Woocommerce.

Before I close this topic however, I’d like to ask about an issue I have had for a long time: how to decrease a product image size on the product page? it is still far to big for my liking and there are no settings in Customiser to manage it.

thanks!

Hey @magicpowers,

I’m glad you were able to track down the source of the giant images. Minification can be great, but it can cause unexpected side effects like that.

For your new question, to make the product image smaller on the product page, you’ll want to change the width of the two “columns” that make up the product page. Generally, they are set to be 50% each. You’ll want to change the left-hand one with the product image smaller and the other side proportionally larger.

If you want to send over the URL to a product page, we can take a look and be more specific. This is often changed by themes so we’d need to be able to interact with the page to know specifically what needs to change.

Thanks!

Hi @3sonsdevelopment

many thanks for your reply.

When I open a product page in editing mode – I can’t see anywhere the “columns” – my product description is across the page. Please note that I don’t use the Gutenberg blocks yet. I have the Premium Vantage theme which does have a Page Builder, however this option is not showing on the product pages for some reason, as those pages are created by WC. The product image is uploaded and seen in the right hand panel.

There is an editing option to insert columns, but as it is now – I can’t see the option to change the column width. Is it because I’m NOT using the blocks?…

An example of my product page is
https://www.quantumliving.com.au/product/finding-your-mojo/

thanks!

• This reply was modified 5 years, 1 month ago by magicpowers. Reason: spellling

hi @3sonsdevelopment

It looks like we are not on the same page here (literally! ?? ) so I’d like to clarify and remove the confusion:

1. The WC catalogue and the product page are two different types of pages, which are not controlled in the same way. The Cataloge page can be configured in Customiser, and I have done that. All good.

2. My question is about the product pages which cannot be configured in Customiser,, as far as I can see.

3. You said that I need to adjust the columns on the product page to reduce the image size. I have emailed you a screenshot of my product page in editor asking how can I adjust the columns as there are no columns visible, all texts is across the page width.

4. You have also advised that images on the product pages are ctrolled by the theme and that I should reach out to the themedeveloper for advice.

5. I have, and they advised that the theme does not offer this option.
so – where do I go from here? Surely, changing the size of an image on any page should be straightforward and certianly doable without any additional plugins or extensions.

thanks

Hello @magicpowers,

My apologies for the confusion. On the default product pages, there are two boxes or columns (DIVs in HTML) that hold the main content and the product image. Here’s a screenshot to illustrate how that looks in the Storefront theme.

The size of the images is dependent on the size of the column it is in. Out of the box, WooCommerce does not have controls for this.

It can be altered with CSS though. Here’s how to do that:

• In your WordPress dashboard, go to Appearance and click on Customize.
• Look down for the Additional CSS section and click on it.?
• In the box there, paste this:

  
  .woocommerce div.product div.images, 
  .woocommerce-page div.product div.images {
      width: 38%;
  }
  
  .woocommerce div.product div.summary, 
  .woocommerce-page div.product div.summary {
      width: 58%;
  }
  

• Publish your changes.

Here’s what that looks like for me with those changes.

You can change the sizes of the columns in the snippet above to make each of them bigger/smaller. Just make sure to change them by the same amount.

If you have something else in mind, let me know.

Cheers

hi @3sonsdevelopment

THANK YOU THANK YOU THANK YOU!!! ??

That’s exactly what I was looking for. I have decreased the image even further so now they are…..

Perfect!!!!

??