How to Change WooCommerce Product Image Size in WordPress Site?

Question

I've already followed the instructions here http://www.cbdweb.net/woocommerce-and-image-sizes/ and here https://theme-fusion.com/knowledgebase/how-to-fix-woocommerce-image-size-issues/.

Even though I changed the sizes for Catalogue Image and Product Thumbnails in WooCommerce Settings --> Products --> Display, I still see that the image width and height are set to 300 in the inspector.

When you inspect one of the images, you'll see:

<img width="300" height="300"
src="http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-300x300.jpg" 

class="attachment-shop_catalog size-shop_catalog wp-post-image"

alt="Hamburger Collection" title="Hamburger Collection"

srcset="http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
300x300.jpg 300w, 

http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
150x150.jpg 150w, 

http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
180x180.jpg 180w, 

http://thehamburgercollection.com/wp-
content/uploads/2016/10/Screen-Shot-2015-09-19-at-6.00.26-PM-
600x600.jpg 600w" sizes="(max-width: 300px) 100vw, 300px"> == $0

With the styles

.woocommerce ul.products li.product a img {
width: 100%;
height: auto;
display: block;
margin: 0 0 1em;
box-shadow: none;
}

.woocommerce img, .woocommerce-page img {
height: auto;
max-width: 100%;
}

If I try to edit the styles directly in my theme's stylesheet (style.css), I get a pretty bad result:

.attachment-shop_catalog .size-shop_catalog .wp-post-image {
width: 400px!important;
height: 400px!important;
}

.woocommerce ul.products li.product a img {
width: 400px!important;
height: 400px!important;
}

If I disable max-width:100% from the style:

.woocommerce img, .woocommerce-page img {
height: auto;
max-width: 100%;
}

I actually get the correct size, but then the images overlap.

They also stay at this size when the page responds, which we don't want.

What really doesn't make sense to me, though, is why the img size is still at 300 x 300 when I've already changed the size to 600 x 600 literally everywhere I can think of - in my Stylesheet and for the Catalog Images, Single Product Image, and Product Thumbnails options under WooCommerce Settings --> Products --> Display. I have also regenerated my thumbnails via the Regenerate Thumbnails plugin. Also, the images don't even appear to be 300 x 300 - they actually look like they're 150 x 150 anyway.

SomeGuy SomeGuy · Accepted Answer · 2016-10-20T22:03:57

The width of your images is currently being dictated by their parent li (list elements).

.woocommerce ul.products li.product

You have this set to 22.05% of it's parent of 680px. Right now you are forcing your images to be 600px with an !important. You want 2 products per row with a small gap (4%?) between, so this might work better (obviously get rid of the forced 600px width per image):

#container .woocommerce ul.products li.product, #container .woocommerce-page ul.products li.product {
    float: left;
    margin: 0 4% 2.992em 0; 
    padding: 0;
    position: relative;
    width: 46%;
}

Did you also check your image sizes in the main Wordpress setup, via Settings -> Media on the admin left-hand menu. If you change these then regenerate your thumbnails again.

How to Change WooCommerce Product Image Size in WordPress Site?

1 Answers