[Juanfra Aldasoro]

Hi Alex,

I hope you are doing well. Thank you for the follow-up.

The catalog images should be resized according to the values you set in the WooCommerce settings. Please have in mind that the size in which they will be shown depends exclusively on the amount of columns you have for the catalog. So, let’s say that you have two columns, then the columns width will be half of the size of the site container width.

With regards to the product thumbnails, I understand that you want to change the size of the thumbnails below the main product image in the single product page. The size may vary, but again, it is the same scenario as the catalogue page. The width there is set via JavaScript with the Owl Carousel library. It defaults to 4 thumbnails according to the size of the carousel. What would you like to change there?

Best,
Juan.

[Alex]

This reply has been marked as private.

[Juanfra Aldasoro]

Hi Alex,

Thank you for the follow-up.

Well, it seems that for the kind of images you are using, the only solution would be setting a square value to the catalog image (for example 300×300).

Best,
Juan.

[Alex]

This reply has been marked as private.

[Juanfra Aldasoro]

Hi Alex,

Thank you for the follow-up.

Would you please try the following code?

Best,
Juan

[Alex]

Hi Juan!
Thanks for your solution, and it seams that it is work. Because after I add this code the values in WooCommerce settings changed to the 300*300. After it I regenerate thumbnails. But on catalogue page they are shown as a rectangle and not as a square. Is it setup by catalogue page template?

Alex.

[Juanfra Aldasoro]

Hi Alex,

Thanks for the follow-up.

Please try adding the following custom CSS:

.woocommerce .grid .item-caption-inner img {
    object-fit: contain;
}

Best,
Juan.

[Alex]

Hi Juan!
Thanks a lot for your help. Now it works perfect, as I want it!
Have a nice day.
Alex.

[Juanfra Aldasoro]

Thank you Alex 🙂

Have a nice day,
Juan.