WooCommerce Product Images Blurry and not Fitting

@ Thomas Schmall

Using Inspect element in FireFox the image HTML for the flower pic is

<img class="attachment-shop_catalog wp-post-image" width="147" height="300" alt="Poppy Flowers, Brush Stroke View" src="https://www.oxpal.com/wp-content/uploads/2013/12/poppy-flowers-painting-poster-147x300.jpg"

The CSS in woocommerce.css is

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
    width: 100%;
    height: auto;
    display: block;
}

The actual image size that I’m getting in my browser is pretty close to the image size specified inline – 152 x 310 px

@richarduk: Ok, I see – thanks for finding this.
What do I do with this then? I quite don’t get why WooCommerce thinks the 300px high image should rather be 310? I mean why do I set it to 300 if it ignores it?
On other pages (and with other thumbnails) the scaling is some other seemingly random numbers. The “single image” then is a little bit scaled up.
And if anything in the layout/theme changes are then all image widths different again?

@ Thomas Schmall

No idea. If it was me and I felt that that small increase in size wasn’t acceptable then I’d simply knock 10px or whatever off the sizes that I set and then regenerate thumbnails. ??

And if I was feeling really awkward I’d go to the Woocommerce forums, wherever they are, and ask. But I wouldn’t in all honesty expect to get a valid reply otherwise they’d have sorted out the various issues mentioned in this thread a long time ago.

@richarduk

I’ve tried your suggestions by changing the woocommerce.css code, but my featured image and related products are very large and blurry. Everything was perfect, I unchecked the auto crop, then realized my mistake, rechecked the boxes, and forced regenerated the images. No changes…

After inspecting these images, my featured product should be 300 x 300, but instead they are 562 x 562. My related products should be 150 x 150, but are also 562 x 562.

https://www.dooblay.com/product/grass-fed-ice-cream/ <– LINK TO SITE.

Thanks in advance for your help!

If the featured image is the tub of icecream from that link then in FireFox using WebDeveloper > Image information it says the image is 300 x 300 and when I measure it using ‘Measureit’ that shows 300 x 300.

The related products are coming out as 450 x 450 in Firefox but there are no images as yet. I would suggest putting some related product images in ‘cos that might make a difference or might make it easier to see what’s going on.

Sorry, I’ve been working on this all morning, so I’m not sure what point in time you looked at the site.

This product page might be easier for you to see what’s going on:
https://www.dooblay.com/product/coffee-pothead-t-shirt/

Now you can see that the featured and related products images are the correct, with a significant amount of space to the right. It appears that the images are now working, but they are still using some larger image template. (Hopefully that makes sense.)

Also, after adding your line of code, my shop pages are formatted weird:
https://www.dooblay.com/shop/
https://www.dooblay.com/product-category/fooddrink/

Is there a way I can completely remove Woocommerce and start fresh? I’ve tried uninstalling from dashboard, and removing any files via FTP that say Woocommerce. When I reinstall in plugin, it doesn’t appear that everything was removed because the problem is not resolved and all my old settings and content reappear.

I’m just starting the site, so I do not care if I lose content, just want this problem fixed! Ideally, I’d like to completely remove, reinstall, and don’t mess with the thumbnail settings..

THANK YOU FOR YOUR TIME! @richarduk

re. https://www.dooblay.com/product/coffee-pothead-t-shirt/

Firefox, inspect element shows the following in woocommerce-layout.css:

.woocommerce .related ul li.product,
.woocommerce .related ul.products li.product,
.woocommerce .upsells.products ul li.product,
.woocommerce .upsells.products ul.products li.product,
.woocommerce-page .related ul li.product,
.woocommerce-page .related ul.products li.product,
 .woocommerce-page .upsells.products ul li.product,
.woocommerce-page .upsells.products ul.products li.product {
    width: 48%;
}

Changing 48% to auto moved the images closer.

https://www.dooblay.com/shop/ showed the left image container extending half the page. This was caused in woocommerce.css by:

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

Removing that line width:auto shrunk the image containers to al fit nicely into the page.

https://www.dooblay.com/product-category/fooddrink/ had the same problem of the left image container being too wide, caused in woocommerce.css by:

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

Again removing width:auto made everything hunky dory.

Looking at your stylesheets it looks like woocommerce-layout.css comes first, then further down woocommerce.css

This is a pain because it appears that woocommerce-layout.css in this case should come last as it sets the width of each individual container e.g. 25% but this is being over-ridden by woocommerce.css with its generalised ‘width:auto;’ Both are using identical CSS selectors. From where I can see in this case it looks like WooCommerce made a mistake and have got the stylesheets in this instance the wrong way round.

Woocommerce.css should be first and woocommere-layout.css should come after it.

How to get round it? I don’t know. You don’t want to be editting stylesheets on every upgrade.

P.S if you’ve been pasting in my CSS as well this makes it all the more complicated. Hope my CSS hasn’t confused things even more!

Yeah, this width:auto is a pain. They also have it site-wide since the latest update (for all pages with wooCommerce content), which screwed up my wordpress theme.

I asked them to remove it, but they like it, and told me to replace the wooCommerce css completely, since there is no other way to override this setting.
Since it would take way too much time for my little page to work through all that css mess, I went for some small dirty fixes.

If you want somewhat dynamic thumbnail aspect ratios, then you have to replace the wooCommerce css. If you want the same all the time you could probably force the size by making those images a certain class and add the specific pixel value in an additional css that is later called than the wooCommerce ones.

I downgraded the woocommerce to the previous version, and it fixed all of my images sizes! Problem is.. now all my products are stacked vertically.

I still have the new version installed, just not activated.

https://dooblay.com

WOO making progress ??

@thomas schmall did you just replace the woocommerce css with an older version?

@primaltwins: No, I left it as is. So I didn’t solve the blur problem on the gallery – too much work in my case.
I just fixed it for affected images in my theme via adding them to a class and setting the class to a pixel size in the theme css. Else the width and height properties of the <img> tags get overridden with their auto.

Okay @richarduk thank you so much for you help, sorry to keep bugging you! I am very close to what I want, but as you can see from my site, there is still a very ugly gap. The images are now all the correct size, see here: https://www.dooblay.com/product/100-grass-fed-beef-tallow/

How can I get rid of the gap between the description and picture?

To reiterate, this is what I have done so far:
1. I’ve replaced all the “width:100%;height:auto” in the woocommerce.css with “width:auto;height:auto”
2. Added your lines of code provided earlier in this forum at the bottom of my woocommerce.css file.
3. Changed all of the 48% in the woocommerce-layout.css to 24%. (When I changed the 48% to auto like you suggest, the image place holders for the related products get huge again, and the description shifts to below the product image!)

I am now stuck at this point, and don’t know how to fix the gap. Hopefully there is something quick that can help out. Thank you again for all of your help!!

For that one page, try the following. Taken from woocommerce-layout.css and adapted slightly.

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
    float: left;
    width: 24%;
    padding-left: 200px;
}

For reals?? this is like the DUMBEST ish EVER!!! What were the WooCommerce devs thinking and why are they STUBBORNLY sticking to this as IF it makes a LICK of sense??????

</rant>

For anyone using the Dynamik-Gen child theme for Genesis, this solved my problem..

add the following to your custom CSS:

.woocommerce div.product div.images, .woocommerce-page div.product div.images {
    width: auto !important;
}

DONE and done.. If my client’s site requirements didn’t require us to stick with WooCommerce, I’d ditch this puppy for my good old Zen Cart.. No stupid HARD CODED CSS..