WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] WooCommerce Product Images Blurry and not Fitting (45 posts)

  1. cwlavine
    Member
    Posted 1 year ago #

    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/

  2. jameskoster
    Member
    Plugin Author

    Posted 1 year ago #

  3. richarduk
    Member
    Posted 10 months ago #

    Try this at the bottom of plugins / woocommerce / assets / css / woocommerce.css

    .woocommerce div.product div.images,.woocommerce-page div.product div.images,.woocommerce #content div.product div.images,.woocommerce-page #content div.product div.images{width:auto;}

    .woocommerce .related ul.products li.product img,.woocommerce-page .related ul.products li.product img,.woocommerce .upsells.products ul.products li.product img,.woocommerce-page .upsells.products ul.products li.product img,.woocommerce .related ul li.product img,.woocommerce-page .related ul li.product img,.woocommerce .upsells.products ul li.product img,.woocommerce-page .upsells.products ul li.product img{width:auto;height:auto;margin-right:10px;}

    .woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:auto;}

    The plugin authors have been too specific with their css and as a result the inline styles don't over ride the external stylesheet. It's a problem that appears to have been around for a long time. Net result: you see blurry images as your thumbnail or whatever is enlarged to the default size specified in the external stylesheet, often 48% or nearly half the width of the page.

  4. richarduk
    Member
    Posted 10 months ago #

    Last bit of the puzzle (hopefully). Just remember to regenerate featured images or upload new ones.

    .woocommerce .cart-collaterals .cross-sells ul.products li,.woocommerce-page .cart-collaterals .cross-sells ul.products li{width:auto;}

  5. renoirIII
    Member
    Posted 10 months ago #

    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

    [sig moderated as per the Forum Rules]

  6. chrisjackson
    Member
    Posted 9 months ago #

    Hi richarduk,

    I tried all three but the only one that worked with the WP-Clear theme I'm using was the related products one.

    My related products were unbelieveably huge and fuzzy.

    With your suggestion my related products are a normal small crystal clear size and perfect.

    The only thing I need now is that my products page with all of the products are blurry. The detail item page is crystal clear.

    I just need the products page with all of the products to be sharper.

    Thanks,

    chrisjackson

  7. Jamie771
    Member
    Posted 9 months ago #

    I have problem with blurry images as well. I am using Custom Community Pro theme.
    I've noticed that for example I have Single Product Image size set to 300X300. (in WC Settings >> Catalog >> Image Options), but it is displayed as 330x330 instead of 300x300. I would think that my images are blurry because they are resized to 300X300, but stretched to 330x330. The same problem with Catalog Images and Product Thumbnails.
    Any suggestions how to fix this?

  8. richarduk
    Member
    Posted 9 months ago #

    @renoirIII You're missing the point completely, no offence. This is nothing to do with regenerating thumbnails and all the rest of it, this is a fundamental CSS issue with WooCommerce where they've been far too specific in their external stylesheet, setting images to 48% of the width of the page, meaning that the inline styles can't be over-ridden by the external styles.

    @chrisjackson Sorry can't help, the CSS I used applied to one particular method of including WooCommerce in a theme, it might be that your theme includes it in a different way and has different CSS?

    @Jamie771 I noticed that images weren't exactly the size specified but after having images that were 48% of the width of the page I was grateful for anything that came close to working. These are issues that WooCommerce should be fixing and I posted here precisely because jameskoster (Plugin author) posted here and MIGHT be receiving these emails. I couldn't be bothered registering with WooCommerce and going on a support forum, that was all.

  9. chrisjackson
    Member
    Posted 9 months ago #

    Hi richarduk,

    I followed this:
    http://www.youtube.com/watch?v=HKdenKwhB6o&feature=youtu.be

    It fixed the blurry images on the store front thumbnails.
    It fixed the oversize related products without having to modify the woocommerce.css file.

    Catalog
    300x300
    600x600
    100x100

    Again, I'm using the WP-Clear theme so all I know is it works very very well for me.

    Thanks for your response!
    chrisjackson

  10. KeithWhalen
    Member
    Posted 8 months ago #

    I am having exactly the same problem in a site I am building (http://a1sportsdistribution.co.uk/product/aero30-bottle/). I thought at first the issue was that I built my theme using ArtISteer 4.0. All of my images are 200 x 200 and I have set the WooCommerce image settings to 150x150, 200x200, and 90x90 respectively with the Hard Crop unchecked but they are all blurred,

    richarduk, If I try your code below at the bottom of the coocomerce.css is that the best way to fix this:

  11. KeithWhalen
    Member
    Posted 8 months ago #

    Took a change and richarduk's fix did the job, many thanks. I owe you one.

  12. ARCDDS
    Member
    Posted 8 months ago #

    Guys, we work on it since weeks, sometime work sometime doesn't. However we want follow up the instruction by @richarduk and have a question.
    We just last (updated) WP with Woocommerce plugin on our Side.
    #@richarduk you write; "Try this at the bottom of plugins / woocommerce / assets / css / woocommerce.css"

    .woocommerce div.product div.images,.woocommerce-page div.product div.images,.woocommerce #content div.product div.images,.woocommerce-page #content div.product div.images{width:auto;}
    
    .woocommerce .related ul.products li.product img,.woocommerce-page .related ul.products li.product img,.woocommerce .upsells.products ul.products li.product img,.woocommerce-page .upsells.products ul.products li.product img,.woocommerce .related ul li.product img,.woocommerce-page .related ul li.product img,.woocommerce .upsells.products ul li.product img,.woocommerce-page .upsells.products ul li.product img{width:auto;height:auto;margin-right:10px;}
    
    .woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:auto;}
    furthermore

    .woocommerce .cart-collaterals .cross-sells ul.products li,.woocommerce-page .cart-collaterals .cross-sells ul.products li{width:auto;}

    Note:
    We re-write some php:`

    <strong>Please help us, we are not Programmer, the Data in which CSS Sheet, on our Frontend we don't have this Folder.
    THANKS</strong>

    /*To remove Sorting drop down */
    .orderby {
    	display: none !important;
    /*To remove Sale Logo */
    }

    and
    body.woocommerce span.onsale, body.woocommerce-page span.onsale {
    display: none;

    }
    
    .woocommerce span.onsale, .woocommerce-page span.onsale {
    	display: none;
    }
  13. Michael Tieso
    Member
    Posted 8 months ago #

    For those looking for a solution to this, try re-saving your settings under WooCommerce > Settings > Catalog > Image Options. Perhaps even changing your values.

  14. Loreen72
    Member
    Posted 8 months ago #

    @richarduk thanks much for the code.... totally fixed the issue for me!!

  15. Grafikbutik
    Member
    Posted 8 months ago #

    @richarduk
    Do you by any chance have an idea of how to fix exactly the same issue in Mystile-theme/with WooCommerce?
    All images are showing just fine - except the catalog img. on the store front.
    I've uploaded thumbnails 600x600px and the sizes are set to
    150x150
    300x300
    90x90
    - so it shouldn't have anything to do with the measures...must be the same old css issue ...
    Hope you or anyone else are able to help, thanks:-)

  16. richarduk
    Member
    Posted 8 months ago #

    @Grafikbutik

    The way I did it was to look at the class of the images - FireFox / Web Developer or FireFox / Inspect element.

    Then I viewed the CSS (Web Developer /CSS /View CSS) and found the stylesheet that WooCommerce had created. It was pretty crammed but I pasted it into EditPad and searched through it for the relevant classes. It was immediately obvious that most of them had been set a large width (48% if I remember). I then extracted those selectors and declarations and changed the width from 48% to auto. I might have added a height:auto, can't remember now.

    You then paste the whole lot into the bottom of any relevant stylesheet or create an internal stylesheet and the new styles will over-ride the old.

    Amendment to previous post of mine, not that anyone really cares :-)

    WooCommerce where they've been far too specific in their external stylesheet, setting images to 48% of the width of the page, meaning that the inline styles can't be over-ridden by the external styles

    should have been

    WooCommerce where they've been far too specific in their external stylesheet, setting images to 48% of the width of the page, meaning that the inline styles can't over-ride the external styles

  17. Grafikbutik
    Member
    Posted 8 months ago #

    @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!

  18. Grafikbutik
    Member
    Posted 8 months ago #

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

  19. richarduk
    Member
    Posted 8 months ago #

    @Grafikbutik

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

  20. Grafikbutik
    Member
    Posted 8 months ago #

  21. renoirIII
    Member
    Posted 8 months ago #

    Good luck

  22. richarduk
    Member
    Posted 8 months ago #

    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

  23. Grafikbutik
    Member
    Posted 8 months ago #

    See! Indeed we are in the right ballpark ;-)
    Now what? ;-)

  24. richarduk
    Member
    Posted 8 months ago #

    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.

  25. Grafikbutik
    Member
    Posted 8 months ago #

    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 :-)

  26. ecomlearning
    Member
    Posted 7 months ago #

    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.

  27. mattadiro
    Member
    Posted 6 months ago #

    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

  28. EclipseDesignConcepts
    Member
    Posted 6 months ago #

    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!

  29. nittanyice
    Member
    Posted 5 months ago #

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

  30. ValerieHudgins.com
    Member
    Posted 5 months ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic