No Zoom on Woocomerce images

Wow thank you so much christian, I will do this to all my product images today.
Should I delete the image optimizer plugin? Is that fairly pointless as it is clashing so no need for it??

And is there something I should know about when uploading new images for my shop page? Or will I always need to use the regenerate plugin?

Hello Nonie,

If you are using caching plugin, please deactivate the image optimizer plugin. In most cases, the optimized images were not properly cache thus created a series of issues of your site. Regenerate thumbnails plugins is needed when there is a change in image dimension settings. once everything is set, uploading a new image should be fine and with no issues.

Hope this helps.

Thank you, I have regenerated all the images and now everything is perfect in that area :slight_smile:

I do however have another issue which was fixed but now somehow reverted… See image attached, the area is not going full width, I have it set to the same settings as all the other areas. I seem to keep having issues with areas not going full width…

Hello Nonie,

Thanks for updating in!

Your section not fullwidth issue could be because the section itself is being set to display that way. Please edit the page back in Cornerstone and make sure that the “Inner Container” is disabled in the row settings. Do not also forget the Width and Maximum Width settings.

Hope this helps.

I have changed it to the setting you said but the container background is still not full width

Hello Nonie,

I have inspected your page again and it appears that in your section settings, you have set a maximum width of 825px. Please edit the page back in Cornerstone and change the maximum width to 100% instead.

Please let us know how it goes.

Sorry where do I find where I have it set to 825px to change it??

Hello Nonie,

Sorry for the confusion. After a thorough investigation, it appears that you have added a custom css in Appearance > Customize > Additional CSS which was causing the issue.

.home .e154-24.x-section{
    max-width: 825px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

I have commented it out and adjusted the maximum width in the row settings instead.

Please check the page now.

Amazing, thank you! you all provide such great support. Greatly appreciated

You’re most welcome!
We’re glad we were able to help you out.

So it seems that it only worked on desktop. I just checked on mobile and the container is still not full width only on mobile though…

Hello Nonie,

That issue happen because of these custom css that you have added.

@media (min-width: 240px) and (max-width: 560px) { 
.home .e154-24.x-section .x-sm.x-1-4 {
    width: 48% !important;
    float: left !important;
}
	
.home .e154-24.x-section {
    max-width: 218px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}	
}	

I have commented it out already and cleared your cache. Please check your site again. Of course, please do not forget to clear your phone’s browser cache first.

Ive notice just now, since we did the regenerate thumnail plug in on all my product images, the images are blury when you are on the products page, on zoom they are fine and the thumbnail before you click to go to the product are crisp but when you go into the product the image is not crisp any more… here is a product to see what I mean https://www.honestlynatural.com.au/shop/ansc-true-love-for-her-gift-pack/

Hi There,

The original size of product image is 800px but in the single product the size of image is 400px:

Please navigate to Customizer > WooCommerce > Product Images > Main image width > change to 800:

After that regenerate the thumbnail again.

Let us know how it goes!

Works perfect. Thanks again your a life saver!

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.