woo commerce: product page image too big

Having same issue – image size is only 142 x 200 but image posts at over 300px square!

Same problem here – I changed the image size in the catalog tab to 150 x 225, and uploaded a pic of exactly those pixel dimensions, but it still shows the same enormous image — only fuzzy because the original image is now stretched to cover the size. It undoubtedly means I will need to go into the actual css, but I don’t know where. Can someone help?

I found a solution – I added this into the custom.css file

.single-product.layout-full .images img {
width: 200px;
}

where 200px is your preferred image width.

You might want to move the product summary over too, once the image is smaller. So I then added:

.single-product.layout-full .summary { width:600px; }

Hope this helps!

Inspirata, what you described sounds like exactly what I want, but I don’t see a custom.css file anywhere in the woocommerce plug-in folder. I am supposed to make one? Forgive my ignorance, I’m rather new to this.

This was in my theme folder – so it might depend what theme you’re using. Sorry I should have mentioned that. I use Wootique.
If you use Firefox and install the plugin Firebug, you can determine the div id or class that needs to be altered. I’d imagine it would be something similar though. My understanding is that Woocommerce creates the styles on the product pages, but I could be completely wrong.

Hi thanks inspirata, I am using the Pinboard theme with the woocommerce plugin, so I added your code in the custom css, which pinboard has.. works good so thanks. If someone doesn’t have the custom css they could add the code to the style.css it should work, just update it again if you upgrade the WordPress version, OR better, create a child theme first.. still have to learn that , ha,ha.. take care,Groggo

My theme is Weaver II, which is totally customizable; you can do just about every change you want in admin. I believe there’s a way to add custom css there. I’m still working on it. Or maybe I’ll use a child theme. I’m still learning about that too. If anyone else is using this theme, I’d be happy to hear from them.

I got it fixed – I temporarily disabled the CSS style options in Woocommerce — and the image instantly jumped to the right size, so the problem is clearly one with woocommerce styles themselves, not theme styles. I carried out a search and found the single product image in woocommerce.css and reduced it from 100% to 50% Now it looks perfect!

Having a similar problem. I’ve used the code above, deactivated and reactivate my theme and woocommerce. Then regenerated the thumbs.
Product image is set to 300x300px but is displaying HUGE! When I deactivate WOO.css, it fine – just ugly.
The woo.scc stylings are are fine except for no left margin and a huge product image. Any ideas?
Here’s the page I’m referring to: https://www.firepitfridaymediagroup.com/tuttobene/shop/torrone/

I found no solution really. But I think if you upload 2-3 images per product it sizes them down accordingly as they form a grid. The other solution I did, was, I bought the premium woothemes that have woocommerce built in, they work much better, cost me $70 but I think it was worth it. They also give you premium support for about 3 questions.. they say a year, but it gets slower each time you ask , so ask wisely, ha,ha,.. You get 2 bonus themes too, I am doing sites for other people so can use a lot of it. Hope this helps..

I have another site I’m working on where I’m using only one image. this is an actual WooTheme. It works great. I just don’t want to switch themes when I’m so close to wrapping up this project. especially if someone has any idea of a simple css snippit to put in.

..I UNDERSTAND, … IF “especially if someone has any idea of a simple css snippit” You are ok… hope that happens soon for you. I couldn’t wait. I learned though to focus a LOT more on what theme to use for what project.. before I start. Man, the times I spent re-theming bad results.. good luck, Groggo

I agree totally ?? Hope someone has an idea. The theme developer couldn’t help. I’ve got an email into Woo for help.
thanks

Hi again, a strange thing happened. I had a problem with HUGE thumbnails in the category pages. they stretched over the whole page.. re-installed pinboard theme first, worked in Chrome, but not Internet Explorer. De-installed some plugins I did not need, no change.. then I checked the widgets and re-saved what was there one by one, suddenly everything was back to normal! Thumbnails all good size, category pages fine.. so maybe it has something to do with the sidebar widgets? Worth checking. Cheers, Groggo

I was having a similar problem with the product image being too big. Also, the catalog images and product thumbnails were too big and blurry. Here is the fix that is working for me. The first two snippets came from here. Rather than fixing the width for the single product image, I set it to auto, which allows the image to conform to the dimensions set in Woocommerce/Settings/Catalog

ul.products li.product a img { width:auto; height: auto; }

.related ul.products li.product img, .related ul li.product img, .upsells.products ul.products li.product img, .upsells.products ul li.product img { width: auto; height: auto; }

.single-product.layout-full .images img {
width: auto;
}

I placed all of this in custom.css