woocommerce images

[Matteo Mantovani]

I have installed woocommerce and I cannot change images size because is very large for template.
Thanks in advanced.
Matteo

[Bill Robbins]

Hello Matteo,

Good question. In the WooCommerce settings, on the Products tab there is a series of options where you can change the WooCommerce image sizes.

But those will only affect images uploaded after those sizes were set. WordPress resizes images as part of the upload process so changing the image sizes won’t affect images already in your library.

To change your existing images, you’ll need to install a plugin called Regenerate Thumbnails. It adds a new screen in the tools menu where you can resize your existing images.

If you have questions, let me know.

Have a great week,
Bill

[Bill Robbins]

Matteo,

You can always force the size via CSS. You can add this to the Custom CSS box that’s in the styling tab of the theme options page:

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

---

With all the stylesheets combined on the site, it’s a bit tricky to determine exactly what’s happening here. The default layout of a WooCommerce product is to have the the images floated to the left and take up 45% of the top portion of the page.

The default WooCommerce CSS has the images in the image section set at 100% width so if the width of that section is changed to be 100% instead of 45% it’ll make them really big. Does that make sense?

Regardless, you can set the width to be the actual dimensions of the image with the snippet above.

Let me know if you run into any trouble there.

Thanks,
Bill

[Bill Robbins]

You can change the thumbnail size in the product catalog. WooCommerce is made so that this is adjusted by changing the number of columns. If you want to do that outside of the columns, this CSS will do:

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

[Author]

Posts