• Resolved tom_sj2

    (@tom_sj2)


    hello. would someone mind help me diagnose something?

    On this page http://flourishnaturalbeauty.com.gridhosted.co.uk/product/she_ultimate_silk_cream/

    the main product image is blurring. I know my woocommerce templates need updating. however I’m not 100% confident with the updating process and would prefer an easy fix if possible. Have tried using ‘regenerate thumbnails’ which fixed the same problem for other products, but seems not to make a difference here.

    I’m on the lastest wp btw, and using a non-woocommerce theme. It’s been 100% fine so far so haven’t made any efforts to follow steps in the theme integration guide. have also read prev posts of course and didn’t see this discussed.

    thanks
    tom
    Tom

    https://wordpress.org/plugins/woocommerce/

Viewing 15 replies - 1 through 15 (of 23 total)
  • Should be an easy fix. Install this and regenerate your thumbnails.

    https://wordpress.org/plugins/regenerate-thumbnails/

    Oops, sorry I didn’t see that you already tried that.

    Thread Starter tom_sj2

    (@tom_sj2)

    yeah, thanks. I thought that would be the answer and it did the trick for other products, but oddly not for this one..

    I would try uploading a fresh copy of those images. Replace them and see what happens. Do you have Varnish enabled on your server by any chance? If so, clear that up as well.

    Thread Starter tom_sj2

    (@tom_sj2)

    ok thanks seems a good thought. did occur to me but I didn’t try it .. just a sec ..

    Thread Starter tom_sj2

    (@tom_sj2)

    hm. ok well here’s the result : i.e. getting the same effect

    http://flourishnaturalbeauty.com.gridhosted.co.uk/product/shoyaku-herb-essence-silk-cream%E3%80%8038-2/

    cheers

    That’s weird. I’m sorry, I don’t want to seem pushy but did the new image you uploaded have the same name as the old one? I have experienced an issue like this when I was updating the images on existing products. If you don’t mind, try doing this in the same order listed below:

    1- dissociate the image on the product edit page.
    2- save the product so that it doesn’t have an image.
    3- clear all cache, and verify that that product doesn’t have an image.
    4- upload the images again (making sure they have different file names)

    You can edit the file name once it’s uploaded for SEO purposes and adding alt titles etc..

    Another reason could be image ratio. It seems the single product main image is using a 1:1 ratio. What’s the ratio of the image you’re using? Is it rectangular shaped?

    Thread Starter tom_sj2

    (@tom_sj2)

    yeah it is .. it’s 600 x 600 ..

    I’ve just tried the above steps also. I didn’t empty my Chrome cache (should I?) but found the URL for the product image then downloaded with a new name, before deleting the image from the post, viewing it without any image, then reuploading the newly-named file. unfortunately.. no change. Could run regen thumbnails again at this point I guess.. and could empty chrome cache if you think worthwhile (is this just deleting temp files i think?)

    You don’t have to empty Chrome’s cache. I’m still seeing it blurry as well. For browser cache, sometimes a simple ctrl+F5 does the trick or use Chrome’s incognito mode for troubleshooting.

    As for the blurriness, I noticed that your images don’t have the same ratio. I haven’t “tested” this so this is just theoretical but it has to do with the different ratio (image resolution) that’s conflicting between the actual image size and the theme/woocommerce’s settings.

    In my shop, I have all images square shaped but they were rectangular. I installed the regenerate plugin and ran it after adjusting WooCommerce’s settings to match the new images. If my theory is correct, the only way to fix this is to have all your images respect the same size/ratio. You’ll have to edit them in Photoshop or Gimp (free). Go to WP Admin Panel –> WooCommerce –> Settings –> Products –> Display.. and let us know what settings you have there for the “Product Images” section.

    Perhaps Mike Jolley can shed some light on this issue.

    Thread Starter tom_sj2

    (@tom_sj2)

    well.. thanks yeah I see .. however I think we have several instances of images behaving as you’d want . e.g.

    http://flourishnaturalbeauty.com.gridhosted.co.uk/product/olive-and-coconut-handcream/

    here the original is not 1:1 … its 450 x 287

    your tip on image size made me wonder if adjusting it down to a lower dimesion would help. I went for 70% of the original so it’s now 420 x 420. interestingly it now is not displaying any product image at all, though it is appearing in the thumnbails..

    will just try regen thumbs again ..

    Thread Starter tom_sj2

    (@tom_sj2)

    yeah.. well that didn’t help!

    I’m sorry I couldn’t have been of any help. I guess it’s time for the big boys to step in. Mike was on the forum earlier on today. I wonder if he’s still on.

    Thread Starter tom_sj2

    (@tom_sj2)

    no i’m very much obliged to you, thanks for helping. was just my ‘regen thumbnails’ attempt that wasn’t adding anything ..

    btw my bad i was meant to be reporting my settings under woocommerce > settings > display / then under ‘product iamges’. they are:

    Catalog images 300 x 300
    Single product images 150 x 150
    Product thumbnails 90 x 90

    ‘hard crop’ is not enabled for any, and the lightbox feature is activated.

    I think we found the problem! It seems your “single product image” size is too low. Change it from 150×150 to something higher like 450×450. Also, the “catalog” images seem to be quite high.

    FYI: Each theme has it’s own “max” allowable sizes. For instance, I noticed on your shop or category page, the max image size (width or height) allowed is 141 pixels. Therefore, I recommend using 141×141 for the “catalog” images. I found out what’s the max sizes for my theme by uploading a huge image like 1200×1200 as a test, regenerating, the values, and checking max size it’s displaying at on the site. Then re-adjust the settings in WooCommerce to reflect those max sizes. Enable hard-crop and regenerate thumbnails.

    Here’s a screenshot of my settings: https://www.dropbox.com/s/hj366akjpdlz76e/Capture.PNG?dl=0

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Single product image distorting’ is closed to new replies.