Fuzzy images in Woo Commerce gallery

Support
#1

https://www.moontimes.co.uk/product/love-zimbabwe-light-flow-pads-moon-times-pad-panty-liner-set/

Hiya
I have regenerated the thumbnails but it’s not made a difference.
I can’t tell what I did to get the thumbnails to appear there - there is nothing in the child theme functions php and nothing I can tell making it do it in the css.

any help appreciated.

#2

Hello Lisa,

The images that appear below the main image in the single product pages are the image you have added to the product’s Product Gallery images:

If you want to get rid of those images, you can remove them in admin section of the product itself.

Hope this helps.

#3

we want the images, we just want them to look better than they do now

#4

Hi Lisa,

There is a CSS that makes the inactive image appear slightly opaque.

If you want to get rid of that effect, please add this code in X > Theme Options > CSS:

.flex-control-nav.flex-control-thumbs img:not(:hover):not(.flex-active) {
    opacity: 1;
}

Also, it looks like you are using an image optimization plugin that controls the sizing of the image. If you want to change the image sizes, please check the plugin settings.

Hope this helps.

#5

Thanks, that code didn’t make any difference.

I don’t see an image optimisation plugin anywhere in the list. The only thing I can find is Jetpack lazy load which I have disabled. I can change the sizes in the settings and regen thumbnails but they are still fuzzy in the shop.

We want the previews of the images but we want them to be clear, not fuzzy. I don’t mind what size they are but they look terrible right now.

#6

Hello @lisacole1,

Since you have installed Jetpack plugin, please make sure that the Site Accelerator (or Photon module) for the images is disabled. This module will cached all your images and sometimes it has some problems loading the images. One of the limitations of this module:

If you want to “refresh” an image you will need to change the name of the image. 
Adding random query arguments, commonly known as cachebusters, will not work.```

For further information, you can check it here: https://jetpack.com/support/site-accelerator/
#7

oh poop, does that mean we need to rename every image so that it won’t be fuzzy?

#8

Hello Lisa,

Thanks for updating the thread. :slight_smile:

You need to rename the images only when you choose to use Jetpack Photon function, once you rename the images it will load the updated images. However, you have the option of disabling the Jetpack Photon function, doing so you won’t have to rename the images.

As alternative you can take a look at Cloudflare which is a free CDN and cache platform. For more information you can take a look at following tutorial:

Thanks.

#9

thank you, I have disabled photon and regenerated the images but they are still fuzzy

#10

Hello Lisa,

The thumbnails where being stretched out. Your thumbnail size is only 100x100 and the actual display is 180x180. Please go to Appearance > Customize > WooCommerce > Product Images and increase the thumbnail size to at least 200x200. You can then regenerate the thumbnails again.

Please let us know how it goes.

#11

thank you, the woo commerce product images were set to 300 but the thumbnail settings in media were set to 150. I’ve set both of those to 200 now and I’m regenerating images now.

#12

Hi Lisa,

Feel free to let us know how it goes.

Thank you.

#13

still fuzzy :frowning: - any other ideas would be appreciated

#14

Hi Lisa,

Please install and activate the child theme and login through FTP then edit the functions.php then add this code:

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
  return array(
    'width' => 200,
    'height' => 200,
    'crop' => 0,
  );
} );

Let us know how it goes.

#15

thank you
I had trouble locating the functions file via FTP and I Themes security was hiding it (Dashboard -> Security -> WordPress Tweaks -> Configure Settings Uncheck: Disable File Editor)

But I sorted that out and added the code and it so much better!
Huge thanks, I really appreciate your help. Have a lovely day!

#16

Glad to hear it’s all sorted now, Lisa. Have a nice week ahead! :slight_smile:

#17

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