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 15 replies - 1 through 15 (of 18 total)
  • Thread Starter kovetania

    (@kovetania)

    Have uploaded a screenshot to this link as the page is in draft status as its a live website.

    https://pix.sfly.com/PTkiN2

    Screenshot of product image

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

    Can you update with link to the shop page?

    Thread Starter kovetania

    (@kovetania)

    It wont show you the page on our website as it is in draft status hence link above to screenshot of picture issue ??

    Its necessary to see the page so the markup and styles can be examined with browser tools.

    Thread Starter kovetania

    (@kovetania)

    Ok ive made this page live for a short period of time if anyone can help please?

    https://dfsi.co.nz/product/justice-brothers-heavy-duty-vehicle-lube-443ml-bottle/

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

    (@kovetania)

    Is anyone able to help please? ive still left the link active so I can hopefully get my products up ??

    Right click is disabled preventing examination of the markup and styles.

    Thread Starter kovetania

    (@kovetania)

    Thanks @lorro I forgot about this ill disable it now if you can assist please ?? Thanks in advance

    Thread Starter kovetania

    (@kovetania)

    Ive deactivated the plugin now that was stopping right click anything else please let me know ??

    Thread Starter kovetania

    (@kovetania)

    For some reason it keeps saying its protected even though ive removed the plugin altogether but if you use Chrome it still shows up under the developer tools just in case it doesn’t work on your side.

    It looks like the images are extremely blurry until they get down to a thumbnail size. Did you upload images that are big enough to fit in that spot and also be clear enough to make out?

    Thread Starter kovetania

    (@kovetania)

    @jricketts4 thanks for that yes the image itself is ok and works perfectly in our other pages of our website with no distortion and when I put it in other websites it doesn’t do that it’s solely woocommerce plugin that makes it this way I’ve followed instructions of updating the picture sizes using the plugin and custom css lines and also regen thumbs and it looks the same or it zooms in on the middle

    Thread Starter kovetania

    (@kovetania)

    just a update as an fyi ive changed the image on the link, my current woocommerce settings are 200×200 – This current image is 240×500 (red can) I have used hard crop settings in woocommerce and also used it unticked it didn’t change the picture still very large and blurry, ive used many different sizes in settings, regen thumbnails after each setting change and they all do the same thing ??

    Thread Starter kovetania

    (@kovetania)

    Also this is a another product with a different image and a different link if comparisons need to be done as ive changed the image I was using on the first link to a smaller one ??

    https://dfsi.co.nz/product/justice-brothers-engine-degreaser-18oz-can-extra-strength-formula/

    The first product image is showing at 555px x 1104px. The second product is showing an image at 555px x 740px, so that’s the size that should be set at WooCommerce > Settings > Products tab, Display sub page, Single Product Image. So, a lot bigger than 200px square. Then regenerate thumbnails.

    The images you uploaded in the first place must be sharp at 555px x 740px or better.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘WOOCOMMERCE Product Images too big and blurry’ is closed to new replies.