Shop Page and Product Page Image Sizes

My site is: http://crstore.staging.wpengine.com/

I would like to make the product thumbnails smaller and the product images. I tried changing them in Woocommerce > Settings > Products > Display, but the image sizes do not match what I entered.I also tried to Regenerate thumbnails and that did not work either.

Thoughts?

Hello there,

What size did you set? So I can reproduce it on my test site.

Regards,
Kharis

Woocommerce Catalog images
250 x 250 px
Single product image
350 Ă— 350 px
Product thumbnails
60 Ă— 60px

Media Settings:
Thumbnail 75 x 75
Medium 150 x150
Large 612 x 612

Hello there,

Please try adding this extra CSS code to Appearance > Customize > Additional CSS from dashboard.


.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img {
  width: auto !important;
  margin-left: auto;
  margin-right: auto;
}  

Regards,
Kharis

1 Like

It changed the image sizes on the homepage, but not on the Shop or Product pages.

If you have a chance, do you have the code to change the image size on the Shop and Product pages, but not on the homepage?

Thanks!

Hello there,

I am sorry for the long delay. It looks like the CSS code I’ve suggested has been removed. Did you remove it? What’s the size of “Woocommerce Catalog images” and “Single product image” now?

Regards,
Kharis

I just put the code back in, but nothing has changed.

Hello there,

I tried that code on my test site and it works. Maybe it isn’t noticeable to you as the number of product per row won’t changed. Or probably we should add something else. To help me easier provide you with the exact solution, please take a screenshot and put some descriptive annotations. Then upload it to the free file hosting service like cloudup.com and share its link here.

Regards,
Kharis

Hi Kharis,

I regenerated the thumbnails and the product images now display as desired. I will mark this ticket as resolved. Thanks!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

this code solved my issue too

1 Like