WOOCOMMERCE Product Images too big and blurry

  • Hi All, Ive seen so many forums about this subject but none with anything that helps me.
    Ive downloaded woocommerce and I have just added my first product, but the pictures are all too massive and stretch to cover half the page ( will attach a screenshot as page is in draft status)

    I have added 4 custom css lines that ive found and none have worked even after I have regenerated images. I have updated the woocommerce display settings to 200×200 and regenerated thumbs and the image I’m using is just under that size and it still zooms in on it and makes it go blurry.

    Please can someone tell me how to fix this before I go crazy LOL

    I’m using WordPress 4.7.2 and Woocommerce Ver 2.6.14 and a Shop Isle Child Theme.

Viewing 3 replies - 16 through 18 (of 18 total)
  • Thread Starter kovetania

    (@kovetania)

    @lorro – Thank you for that information, I didn’t realise it was that big as it shows in the back end as being 144 x 499 – So I followed your instructions and it still comes up much bigger but not as distorted. What should I put my woocommerce settings as for product images if they are all different sizes or will that just work for some and keep others distorted? Would doing the Hard Crop option in the settings fix the ones that don’t fit the sizes? Thanks again for your help.

    Thread Starter kovetania

    (@kovetania)

    I think after de installing and re installing Woocommerce I’m just going to use the images as is and see how I go as there are so many different image sizes for all of our products, thank you to everyone for your help and advice for a WP newb like me it is greatly appreciated! Have a good day all ??

    • This reply was modified 7 years, 8 months ago by kovetania.

    Get yourself a plugin Custom CSS Editor, open your page with a single product picture, the one where it shows the wicked image
    paste this code:
    .product a{
    display: initial;
    display: inline-block;
    }

    .woocommerce #content div.product div.thumbnails a, .woocommerce div.product div.thumbnails a, .woocommerce-page #content div.product div.thumbnails a, .woocommerce-page div.product div.thumbnails a{
    width: auto !important;
    }
    Refresh page. Regenerate all thumbnails. And you should be fine. There is a huge glitch in WooCommerce plugins, which is apparently very hard to fix. I hope that will work. Good luck!

    • This reply was modified 7 years, 4 months ago by vanclaaude.
Viewing 3 replies - 16 through 18 (of 18 total)
  • The topic ‘WOOCOMMERCE Product Images too big and blurry’ is closed to new replies.