how to fix the product image appearing too big and blurry?

  • Author
    Posts
  • #106144

    Hi,

    I don’t know if this is a theme issue or a WooCommerce issue, but here it goes.

    All the product images in my WooCommerce shop are 500×500 pixels, but for some reason WooCommerce tries to make the product images appear bigger than they are. This makes them blurry, which doesn’t look too good.

    This is an example

    Soskin AKN Stop Imperfection Moisturizer

    When you click on the zoom option you see the actual size of the image which is 500×500 pixels, but when you zoom-out, the image is all blurry.

    Is this something the theme ca fix, or is it a WooCommerce issue?
    Thanks

    #106290
    Zed
    Cryout Creations Team

    Your product image are indeed 500×500 pixels but they are displayed at 100% width (WooCommerce’s styling) in a section encompassing 48% (also WooCommerce’s styling) of the site width, which translates to about 680px width.

    You can use CSS to disable the 100% width enforcement:
    body .woocommerce div.product div.images img { width: auto; }
    but then you may be left with extra space beside the images.


    If you like our creations, help us share by rating them on WordPress.org.
    Please read the available documentation and search the forums before posting.
    #106329

    I tried this in the additional css part of the theme, but it doesn’t seem to make any difference.

    #106330

    for some reason I now got this message in the admin area

    Thumbnail regeneration is running in the background. Depending on the amount of images in your store this may take a while.

    I don’t know if it’s relevant to the code I just pasted in the custom css area of the theme.

    #106332
    Zed
    Cryout Creations Team

    Adjust the CSS to body.woocommerce div.product div.images img { width: auto; } (no space between the first two identifiers).

    Concerning the thumbnails regeneration, apparently it’s a built-in WooCommerce feature since version 3.3 that triggers automatically on certain events (includes changing themes, probably others too).
    Did you change themes and/or adjust any image sizes options?


    If you like our creations, help us share by rating them on WordPress.org.
    Please read the available documentation and search the forums before posting.
Viewing 5 posts - 1 through 5 (of 5 total)

You need to log in to reply to this topic.