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 - 1 through 15 (of 44 total)
  • Plugin Contributor James Koster

    (@jameskoster)

    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.

    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;}

    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]

    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

    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 330×330 instead of 300×300. I would think that my images are blurry because they are resized to 300X300, but stretched to 330×330. The same problem with Catalog Images and Product Thumbnails.
    Any suggestions how to fix this?

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

    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
    300×300
    600×600
    100×100

    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

    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 150×150, 200×200, and 90×90 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:

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

    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;
    }

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

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

    @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
    150×150
    300×300
    90×90
    – 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:-)

    @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

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