Support » Plugin: WooCommerce » Shop thumbnail images very blurry after update to 3.3.2

  • Resolved olga1706

    (@olga1706)


    Hi,

    After latest WooCommerce update shop thumbnail images (below the main product image/single product) look very blurry. I have regenerated thumbnails but it didn’t change anything. I can’t think what else I can do to fix it.
    Can you assist please.

    Thanks,
    Olga

    
    ### WordPress Environment ###
    
    Home URL: https://www.olenkadesign.co.uk
    Site URL: https://www.olenkadesign.co.uk
    WC Version: 3.3.3
    Log Directory Writable: ✔
    WP Version: 4.9.4
    WP Multisite: –
    WP Memory Limit: 512 MB
    WP Debug Mode: –
    WP Cron: ✔
    Language: en_US
    
    ### Server Environment ###
    
    Server Info: Apache
    PHP Version: 7.0.27
    PHP Post Max Size: 256 MB
    PHP Time Limit: 300
    PHP Max Input Vars: 5000
    cURL Version: 7.54.0
    OpenSSL/1.0.2k
    
    SUHOSIN Installed: –
    MySQL Version: 5.6.38
    Max Upload Size: 256 MB
    Default Timezone is UTC: ✔
    fsockopen/cURL: ✔
    SoapClient: ✔
    DOMDocument: ✔
    GZip: ✔
    Multibyte String: ✔
    Remote Post: ✔
    Remote Get: ✔
    
    ### Database ###
    
    WC Database Version: 3.3.3
    WC Database Prefix: wp_
    Total Database Size: 9.18MB
    Database Data Size: 6.40MB
    Database Index Size: 2.78MB
    wp_woocommerce_sessions: Data: 0.01MB + Index: 0.00MB
    wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB
    wp_woocommerce_attribute_taxonomies: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_downloadable_product_permissions: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_order_items: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_order_itemmeta: Data: 0.00MB + Index: 0.01MB
    wp_woocommerce_tax_rates: Data: 0.00MB + Index: 0.01MB
    wp_woocommerce_tax_rate_locations: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_shipping_zones: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_shipping_zone_locations: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_shipping_zone_methods: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_payment_tokens: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_payment_tokenmeta: Data: 0.00MB + Index: 0.00MB
    wp_woocommerce_log: Data: 0.00MB + Index: 0.00MB
    wpstg0_commentmeta: Data: 0.00MB + Index: 0.00MB
    wpstg0_comments: Data: 0.00MB + Index: 0.01MB
    wpstg0_failed_jobs: Data: 0.00MB + Index: 0.00MB
    wpstg0_links: Data: 0.00MB + Index: 0.00MB
    wpstg0_mailchimp_carts: Data: 0.00MB + Index: 0.00MB
    wpstg0_mo_campaign_log: Data: 0.00MB + Index: 0.00MB
    wpstg0_mo_campaign_logmeta: Data: 0.00MB + Index: 0.00MB
    wpstg0_mo_conversions: Data: 0.00MB + Index: 0.00MB
    wpstg0_mo_email_campaigns: Data: 0.00MB + Index: 0.00MB
    wpstg0_mo_optin_campaignmeta: Data: 0.00MB + Index: 0.00MB
    wpstg0_mo_optin_campaigns: Data: 0.00MB + Index: 0.00MB
    wpstg0_options: Data: 1.09MB + Index: 0.07MB
    wpstg0_postmeta: Data: 0.30MB + Index: 0.07MB
    wpstg0_posts: Data: 0.16MB + Index: 0.04MB
    wpstg0_pp_call_to_action_groups: Data: 0.00MB + Index: 0.01MB
    wpstg0_pp_customizations: Data: 0.37MB + Index: 0.14MB
    wpstg0_pp_designs: Data: 0.00MB + Index: 0.00MB
    wpstg0_pp_entities_images: Data: 0.00MB + Index: 0.01MB
    wpstg0_pp_forms: Data: 0.00MB + Index: 0.01MB
    wpstg0_pp_form_submissions: Data: 0.00MB + Index: 0.01MB
    wpstg0_pp_images: Data: 0.01MB + Index: 0.03MB
    wpstg0_pp_layout_entities: Data: 0.03MB + Index: 0.03MB
    wpstg0_pp_layout_meta: Data: 0.04MB + Index: 0.04MB
    wpstg0_pp_menus: Data: 0.00MB + Index: 0.00MB
    wpstg0_pp_menu_items: Data: 0.01MB + Index: 0.01MB
    wpstg0_pp_menu_item_instances: Data: 0.01MB + Index: 0.02MB
    wpstg0_pp_menu_item_types: Data: 0.00MB + Index: 0.00MB
    wpstg0_pp_migrations: Data: 0.02MB + Index: 0.00MB
    wpstg0_pp_taxonomies: Data: 0.00MB + Index: 0.00MB
    wpstg0_pp_templates: Data: 0.01MB + Index: 0.01MB
    wpstg0_pp_templates_customization_parents: Data: 0.45MB + Index: 0.57MB
    wpstg0_pp_template_entities: Data: 0.11MB + Index: 0.12MB
    wpstg0_pp_tiles: Data: 0.45MB + Index: 0.01MB
    wpstg0_queue: Data: 0.00MB + Index: 0.00MB
    wpstg0_say_what_strings: Data: 0.00MB + Index: 0.00MB
    wpstg0_termmeta: Data: 0.00MB + Index: 0.01MB
    wpstg0_terms: Data: 0.00MB + Index: 0.01MB
    wpstg0_term_relationships: Data: 0.00MB + Index: 0.01MB
    wpstg0_term_taxonomy: Data: 0.00MB + Index: 0.00MB
    wpstg0_usermeta: Data: 0.02MB + Index: 0.02MB
    wpstg0_users: Data: 0.00MB + Index: 0.01MB
    wpstg0_wc_download_log: Data: 0.00MB + Index: 0.00MB
    wpstg0_wc_webhooks: Data: 0.00MB + Index: 0.00MB
    wpstg0_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB
    wpstg0_woocommerce_attribute_taxonomies: Data: 0.00MB + Index: 0.00MB
    wpstg0_woocommerce_downloadable_product_permissions: Data: 0.00MB + Index: 0.00MB
    wpstg0_woocommerce_log: Data: 0.00MB + Index: 0.00MB
    wpstg0_woocommerce_order_itemmeta: Data: 0.00MB + Index: 0.01MB
    wpstg0_woocommerce_order_items: Data: 0.00MB + Index: 0.00MB
    wpstg0_woocommerce_payment_tokenmeta: Data: 0.00MB + Index: 0.00MB
    wpstg0_woocommerce_payment_tokens: Data: 0.00MB + Index: 0.00MB
    wpstg0_woocommerce_sessions: Data: 0.00MB + Index: 0.00MB
    wpstg0_woocommerce_shipping_zones: Data: 0.00MB + Index: 0.00MB
    wpstg0_woocommerce_shipping_zone_locations: Data: 0.00MB + Index: 0.00MB
    wpstg0_woocommerce_shipping_zone_methods: Data: 0.00MB + Index: 0.00MB
    wpstg0_woocommerce_tax_rates: Data: 0.00MB + Index: 0.01MB
    wpstg0_woocommerce_tax_rate_locations: Data: 0.00MB + Index: 0.00MB
    wpstg0_yoast_seo_links: Data: 0.00MB + Index: 0.00MB
    wpstg0_yoast_seo_meta: Data: 0.00MB + Index: 0.01MB
    wp_commentmeta: Data: 0.00MB + Index: 0.00MB
    wp_comments: Data: 0.00MB + Index: 0.01MB
    wp_failed_jobs: Data: 0.00MB + Index: 0.00MB
    wp_links: Data: 0.00MB + Index: 0.00MB
    wp_mailchimp_carts: Data: 0.00MB + Index: 0.00MB
    wp_mo_campaign_log: Data: 0.00MB + Index: 0.00MB
    wp_mo_campaign_logmeta: Data: 0.00MB + Index: 0.00MB
    wp_mo_conversions: Data: 0.00MB + Index: 0.00MB
    wp_mo_email_campaigns: Data: 0.00MB + Index: 0.00MB
    wp_mo_optin_campaignmeta: Data: 0.00MB + Index: 0.00MB
    wp_mo_optin_campaigns: Data: 0.00MB + Index: 0.00MB
    wp_options: Data: 1.15MB + Index: 0.07MB
    wp_postmeta: Data: 0.30MB + Index: 0.07MB
    wp_posts: Data: 0.19MB + Index: 0.05MB
    wp_pp_call_to_action_groups: Data: 0.00MB + Index: 0.01MB
    wp_pp_customizations: Data: 0.39MB + Index: 0.14MB
    wp_pp_designs: Data: 0.00MB + Index: 0.00MB
    wp_pp_entities_images: Data: 0.00MB + Index: 0.01MB
    wp_pp_forms: Data: 0.00MB + Index: 0.01MB
    wp_pp_form_submissions: Data: 0.00MB + Index: 0.01MB
    wp_pp_images: Data: 0.02MB + Index: 0.03MB
    wp_pp_layout_entities: Data: 0.03MB + Index: 0.03MB
    wp_pp_layout_meta: Data: 0.04MB + Index: 0.04MB
    wp_pp_menus: Data: 0.00MB + Index: 0.00MB
    wp_pp_menu_items: Data: 0.01MB + Index: 0.01MB
    wp_pp_menu_item_instances: Data: 0.01MB + Index: 0.02MB
    wp_pp_menu_item_types: Data: 0.00MB + Index: 0.00MB
    wp_pp_migrations: Data: 0.02MB + Index: 0.00MB
    wp_pp_taxonomies: Data: 0.00MB + Index: 0.00MB
    wp_pp_templates: Data: 0.01MB + Index: 0.01MB
    wp_pp_templates_customization_parents: Data: 0.49MB + Index: 0.63MB
    wp_pp_template_entities: Data: 0.12MB + Index: 0.17MB
    wp_pp_tiles: Data: 0.47MB + Index: 0.01MB
    wp_queue: Data: 0.00MB + Index: 0.00MB
    wp_say_what_strings: Data: 0.00MB + Index: 0.00MB
    wp_termmeta: Data: 0.00MB + Index: 0.01MB
    wp_terms: Data: 0.00MB + Index: 0.01MB
    wp_term_relationships: Data: 0.00MB + Index: 0.01MB
    wp_term_taxonomy: Data: 0.00MB + Index: 0.00MB
    wp_usermeta: Data: 0.02MB + Index: 0.02MB
    wp_users: Data: 0.00MB + Index: 0.01MB
    wp_wc_download_log: Data: 0.00MB + Index: 0.00MB
    wp_wc_webhooks: Data: 0.00MB + Index: 0.00MB
    wp_yoast_seo_links: Data: 0.00MB + Index: 0.00MB
    wp_yoast_seo_meta: Data: 0.00MB + Index: 0.01MB
    
    ### Post Type Counts ###
    
    attachment: 99
    customize_changeset: 7
    nav_menu_item: 18
    page: 15
    post: 1
    pp_gallery: 4
    product: 18
    revision: 120
    shop_order: 2
    slide: 5
    tt_font_control: 1
    wafs: 1
    wooframework: 18
    
    ### Security ###
    
    Secure connection (HTTPS): ✔
    Hide errors from visitors: ✔
    
    ### Active Plugins (16) ###
    
    Developer: by Automattic – 1.2.6
    Functionality: by Shea Bunge – 1.2.0
    Woocommerce Hide Add To Cart Button: by WPProcare – 1.3 – Not tested with the active version of WooCommerce
    MailChimp for WooCommerce: by MailChimp – 2.1.4 – Not tested with the active version of WooCommerce
    MailChimp Forms by MailMunch: by MailMunch – 3.1.0
    ProPhoto 6 Installer: by ProPhoto – 6.0.13
    Really Simple SSL: by Rogier Lankhorst – 2.5.25
    Regenerate Thumbnails: by Alex Mills (Viper007Bond) – 3.0.2
    Simply Show IDs: by Matt Martz – 1.3.3
    Cookie Consent: by Catapult_Themes – 2.3.9
    W3 Total Cache: by Frederick Townes – 0.9.6
    WooCommerce Advanced Free Shipping: by Jeroen Sormani – 1.1.3 – Not tested with the active version of WooCommerce
    WooCommerce Social Media Share Buttons: by Toastie Studio – 1.3.0 – Not tested with the active version of WooCommerce
    WooCommerce: by Automattic – 3.3.3
    Yoast SEO: by Team Yoast – 6.3.1
    WP Staging: by WP-Staging – 2.1.8
    
    ### Settings ###
    
    API Enabled: ✔
    Force SSL: ✔
    Currency: GBP (£)
    Currency Position: left
    Thousand Separator: ,
    Decimal Separator: .
    Number of Decimals: 2
    Taxonomies: Product Types: external (external)
    grouped (grouped)
    simple (simple)
    variable (variable)
    
    Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
    exclude-from-search (exclude-from-search)
    featured (featured)
    outofstock (outofstock)
    rated-1 (rated-1)
    rated-2 (rated-2)
    rated-3 (rated-3)
    rated-4 (rated-4)
    rated-5 (rated-5)
    
    ### WC Pages ###
    
    Shop base: #5 - /shop/
    Cart: #6 - /cart/
    Checkout: #7 - /checkout/
    My account: #8 - /my-account/
    Terms and conditions: #25 - /about/terms/
    
    ### Theme ###
    
    Name: ProPhoto 6
    Version: 6
    Author URL: https://www.prophoto.com/
    Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
    WooCommerce Support: ✔
    
    ### Templates ###
    
    Archive Template: Your theme has a woocommerce.php file
    you will not be able to override the woocommerce/archive-product.php custom template since woocommerce.php has priority over archive-product.php. This is intended to prevent display issues.
    
    Overrides: –
    

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Mikey Arce

    (@mikeyarce)

    Automattic Happiness Engineer

    Hi @olga1706,

    After latest WooCommerce update shop thumbnail images (below the main product image/single product) look very blurry. I have regenerated thumbnails but it didn’t change anything. I can’t think what else I can do to fix it.

    Do you have an example of a page that has blurry images? I went to the link you provided but I didn’t notice any blurry images.

    Hi Mikey,

    Thanks for getting back to me.
    Here’s a link for you https://www.olenkadesign.co.uk/shop/milana-hot-pink-grey/

    It’s the small images underneath the main product image that look blurry.

    Thanks.

    Olga

    Mikey Arce

    (@mikeyarce)

    Automattic Happiness Engineer

    Thanks!

    So the images are 100×100 but being displayed at 121×121 which might be why they look blurry:
    http://a.mikey.link/pQDqw0

    Try going to your Shop page, clicking on Customizer, and then going into the WooCommerce > Product Images panel. From there try setting a thumbnail size to be larger. If you don’t see the options there, it means your theme is setting them already – in which case I would suggest contacting your theme author to see if they can suggest a way to override their settings.

    Thanks Mikey. I am using a third party theme, though if I activate any of the WooCommerce themes I still have the same issue. And there is no option for me to control the size anymore in WooCommerce themes. Also the problem appeared after installing the newest version of WooCommerce. So it doesn’t make sense to me.

    Mikey Arce

    (@mikeyarce)

    Automattic Happiness Engineer

    Hi @olga1706,

    Thanks Mikey. I am using a third party theme, though if I activate any of the WooCommerce themes I still have the same issue. And there is no option for me to control the size anymore in WooCommerce themes. Also the problem appeared after installing the newest version of WooCommerce. So it doesn’t make sense to me.

    The option moved in WooCommerce 3.3 to the customizer – If you go to your Shop page, go to the Customizer, click WooCommerce > Product Images and the option is still not there, it means that your theme is declaring image sizes already.

    Sometimes a theme will declare a gallery thumbnail, if it does, you would need to override it like this:

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

    IF the theme does not set a specific thumbnail size, you can go to Settings > Media and declare the size there:
    http://a.mikey.link/K6RoSd

    Hi Mikey,

    Thank you for your help.
    I did both things you suggested and regenerated thumbnails but the images still look blurry.. Do you have any ideas what else maybe causing it?

    Thanks,
    Olga

    Mikey Arce

    (@mikeyarce)

    Automattic Happiness Engineer

    Hi @olga1706,

    It looks like the images are still 100×100 – check your Settings > Media section to see if the Thumbnail is bigger than 100 x 100:

    http://a.mikey.link/2VSNgE

    And then do another Regenerate.

    Cheers,

    Hi Mikey,

    I have just checked my settings and thumbnails are 150×150. However when go to regenerate thumbnails I see that WooCommerce has own thumbnail sizes:
    Thumbnail Sizes

    These are all of the thumbnail sizes that are currently registered:

    thumbnail: 150×150 pixels (cropped to fit)
    medium: 300×300 pixels (proportionally resized to fit inside dimensions)
    medium_large: 768×0 pixels (proportionally resized to fit inside dimensions)
    large: 880×466 pixels (proportionally resized to fit inside dimensions)
    pp-tiny-thumb: 50×0 pixels (proportionally resized to fit inside dimensions)
    woocommerce_thumbnail: 400×400 pixels (cropped to fit)
    woocommerce_single: 600×0 pixels (proportionally resized to fit inside dimensions)
    woocommerce_gallery_thumbnail: 100×100 pixels (cropped to fit)
    shop_catalog: 400×400 pixels (cropped to fit)
    shop_single: 600×0 pixels (proportionally resized to fit inside dimensions)
    shop_thumbnail: 100×100 pixels (cropped to fit)

    There is no way for me to change those settings? I have just tried using the code you provided earlier but it made no difference.

    Can you assist further please.

    Thanks,

    Olga

    Mikey Arce

    (@mikeyarce)

    Automattic Happiness Engineer

    Hi @olga1706,

    If your theme is setting WooCommerce specific sizes, you can override them by following this document:

    https://docs.woocommerce.com/document/image-sizes-theme-developers/#section-3

    The Thumbnail size will either come from the theme that’s setting it, or use the default media one. If it’s not using the default media one it has to be set in the theme somewhere and you can do something like this to do it:

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

    If that doesn’t work, I would suggest contacting your theme author to see what could be going on.

    Hi Mikey,

    The code has worked after we installed Custom functions plugin.
    So the images look normal now. Thanks for your help!

    Olga

    Mikey Arce

    (@mikeyarce)

    Automattic Happiness Engineer

    Hi @olga1706,

    Excellent! Glad that worked 🙂

    Hey Mikey,

    I’m a bit new to web development and I’m currently working on a Woocommerce website. My issue is in the shop module in Divi on the homepage. I uploaded the product images through Woocommerce when I set up the product page. Everything else looked good, but when I set up the shop module in Divi all of the images were slightly fuzzy. Please let me know what is going on here.

    Thank you,

    -Tyler

    The link is http://www.pacificpromises.com

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Shop thumbnail images very blurry after update to 3.3.2’ is closed to new replies.