WooCommerce Product Image not right size

[jgreenberg]

Hello,

I recently decided to use Litespeed cache’s quid.cloud image optimization to replace my JPG/PNG with more optimized .webp images. For the most part there are no issues, however I noticed on woocommerce product pages that the images stay at full size instead of smaller and then zoom in. Also it is not allowing for 2 column with the title and short description on the side of the image. Is there some CSS that is wrong or causing issues with this?

-Joe

[jgreenberg]

Hello,

It appears this glitch is still happening now that all images have been optimized and replaced with .webp files. For some reason, it is not staying responsive. I noticed that when I disable certain CSS using the inspector below, it looks better but the image still does not stay responsive. I am wondering if perhaps it is due to serving the origin image and not the woocommerce version of the image.

Below is the CSS I am referring to:

 .woocommerce div.product div.images, .woocommerce-page div.product div.images {
        float: inherit;
        width: 100%;
    }

[ruenel]

Hey Joseph,

It’s good to hear from you. We investigated your issue and it seems that the code that you are referring to did not come from the theme styles. It may have came from your custom CSS. By default, we only have this code:

.woocommerce div.product .images {
    position: relative;
    float: left;
    width: 48%;
}

We recommend that you temporarily disable your LiteSpeed cache plugin and check the code again. Be advised that custom coding is beyond the scope of our support. If you are the one who added it, you will have tom make sure that it is correct and valid. Maintaining the custom codes should be done by the creator of the code as well.

We thank you for your kind understanding. Best Regards.

[jgreenberg]

Unfortunately, I cannot disable Litespeed cache as it is critical to my website. However I have included the CSS you provided using a media query for min-width: 768px as it works fine for mobile by stacking it. I had to include important tags in order to override it which I prefer not doing but nevertheless the problem is fixed for now. I will have to keep an eye on it whenever there is a theme update obviously. Thank you for the help!

[marc_a]

Hi Joseph,

Just let us know if you encounter some problems with your website that is bundled with our theme and we will be happily helping with your issue.

Thank you.