Support » Plugin: WooCommerce » WooCommerce Product Images Blurry and not Fitting

  • Resolved cwlavine

    (@cwlavine)


    Trying to get my Sheet Music image to look right. The image is blurry and not fitting in the thumbnails for my category, nor on the Product page or Description Page. The title is cutoff. I also tried cutting the image down to 300X300 and then when it loaded, it really looked bad.

    When I click on the product image on the Product Description Page, it looks great.

    Tried using the Canvas theme to see if anything would change, but still having the same results. Not sure what I need to change in WooCommerce to make the images fit and for them to look crisp and clear on these pages.

    Uploading the images into the Product Gallery, the whole image does not fit in the box. However, on the top right hand side where it shows the “Image Details” the whole images is there. It’s also completely there on the Featured Image. But don’t know why when loading it into the Product gallery the image is not completely showing.

    The size is: 495X640

    Many Thanks,
    Cory

    http://www.corylavine.com

    http://wordpress.org/extend/plugins/woocommerce/

Viewing 15 replies - 16 through 30 (of 44 total)
  • Grafikbutik

    (@grafikbutik)

    @richarduk
    🙂 Makes much more sense 🙂
    Thank you – and now for the detective job (many hours ahead)!

    There are so many people asking this same thing about blurry images and WooCommerce!

    Grafikbutik

    (@grafikbutik)

    @richarduk
    Operation failed!
    I am sorry to say that the images are still blurred …(but bigger!)

    richarduk

    (@richarduk)

    @grafikbutik

    Post a link and I’ll take a look. Can’t promise anything

    Grafikbutik

    (@grafikbutik)

    EZiHosting

    (@renoiriii)

    Good luck

    richarduk

    (@richarduk)

    Try this:

    ul.products li.product img {width:auto;border:1px solid red;}

    Get rid of the border, it’s just there to show that we’re in the right ballpark

    Grafikbutik

    (@grafikbutik)

    See! Indeed we are in the right ballpark 😉
    Now what? 😉

    richarduk

    (@richarduk)

    Now what indeed 🙂

    View source and you’ll get this:

    <img width="150" height="150" src="http://forlagetmunay.dk/wp-content/uploads/2013/11/Lydbog_dvd-150x150.png" class="attachment-shop_catalog wp-post-image" alt="Lydbog_dvd" />

    Click on the link part of that and it’ll take you to the image

    http://forlagetmunay.dk/wp-content/uploads/2013/11/Lydbog_dvd-150x150.png

    The images are more or less – nearly – the same size. As I mentioned above in my case I was happy enough with that, it wasn’t worth digging any deeper. You should have noticed when you added the CSS and refreshed the page that the images shrunk slightly, so it has done something. If you want bigger images then you’re going to have to reset the image size in WooCommerce and either upload new images (try one test one) or regenerate the images.

    Grafikbutik

    (@grafikbutik)

    Hehe, fantastic!
    Thank you SO much for your help!

    For now, I think I’ll settle with the smaller size img. – looks kind of nice with the border also…hmmm 🙂

    Just been experimenting with this and a few things to note:

    1. WooCommerce may have changed the CSS classes and IDs. On my site the products are wrapped in a <div id="content-woocommerce"> So I had to change richarduk’s code accordingly. But richarduk’s code is still a huge help.

    2. Using the Regenerate Thumbnails plugin is a huge time saver. Again, on my site it makes thumbs at both WordPress image sizes and WooCommerce image sizes. That is, I have WP images set at 150px, 200px and 400px, I have Woo images set at 186px, 291px and 150px. So when I regenerate thumbnails it makes 5 different sizes.

    3. WP seems to supply WooCommerce with the closest size match image available. If your product listings show images at 200px but you have only generated images at 90px and 500px (for example), you will see a 90px image stretched to 200px. Not pretty.

    4. Editing the code in a CSS file belonging to a plugin is not advisable as it will be overwritten when the plugin updates. Instead, you should create a child theme and use your own style.css file. See the WP Codex on how to create a child theme (it’s pretty simple).

    Hope this helps someone.

    Cheers.

    This solution worked for me . really good. renoirIII made it.
    blurry images on featured products

    It should be easier than that…

    1. change your thumbnail size in Woo to, say, 150 x 150
    WC Settings >> Catalog >> Image Options

    2. change your thumbnail size in WordPress to 150 x 150 also
    WP Settings >> Media >> Image Dimensions

    3. install and run Regenerate Thumbnails plugin
    As this will only apply to new images, retrospective resizing should be done with Regenerate Thumbnails – its pretty easy

    Your “related products” and “You may also like” images should be looking fine if you have uploaded your images larger than 150 x 150

    Just started using Woo-Commerce and have had to over come many issues thus far and when it was all said and done and working, the images, like all of yours, were blurry. So frustrating! While I *DO* need to go through and adjust the css accordingly as it makes perfect sense, I just am burned out with all the fixes at this point. So, I used @chrisjackson’s little catalog adjustment sizes and the Regenerate Thumbnails plugin and the issues was corrected in less than a couple of minutes! Thank you both for saving my sanity this round!

    I second @chrisjackson’s fix. Poor coding job on Woo’s part.

    WooCommerce has finally posted instructions and a short video about sizing your images. A few folks show how to do this on YouTube, too. Together, all this info above (thanks!) and some leap-of-faith inference solved my issues, but I decided to save someone else some time (like those above did) and make my own infographic. Visual learners might be helped by this: http://valeriehudgins.com/how-to-fix-blurry-images-woocommerce/ If not, soldier on! Peace.

    For me that seems not to be a solution, as it looks like that only works if you really have square previews with always the same resolution.

    I sell artworks, and I find it important that they show completely in the preview (so I can’t just crop them). And obviously I won’t paint only square from now on because of WooCommerce 😉
    But proper sharp thumbnails and previews are important.

    I found no setting or even CSS tweak to fix this for all images – and find it rather strange that the shop is scaling them so randomly. WooCommerce should just stick to the size given, and generate the image sizes accordingly.

    Here is my shop for reference: http://www.oxpal.com/shop
    Some of the paintings (namely the flower one) are also blurry in the big picture of the product view.

Viewing 15 replies - 16 through 30 (of 44 total)
  • The topic ‘WooCommerce Product Images Blurry and not Fitting’ is closed to new replies.