Problem with displaying product photos (sizes)

Hallo

I have a problem with displaying product photos in the store.
On the product archive: https://dev.kurek.pl/product-category/02-koszyki/ and on the single product page: https://dev.kurek.pl/product/elementy-kute-koszyk-kuty-stalowy- 12-130×60-mm-12×12-mm/

We have about 1,000 products (2,000 photos in media libary, only in the original size – according to WordPress settings). Products have very different proportions, from “vertical” e.g. 150x2000px through “square” e.g. 800x800px to “horizontal” e.g. 1500x350px.

I have the following wordpress/woocommerce settings (screenshots attached). However, no matter how I change them, the products do not display correctly. I would like the photos to be resized (not cropped!) to dimensions appropriate to the place of display, e.g.:
– product archive – 300px (although here the size depends on the number of products displayed in the line)
– main photo on the single product page – 600px
– gallery thumbails on single product page – 150px

So that the “larger” dimension (height or width) is reduced to the given value and the second proportionally, e.g. the original image 150x2000px should be resize up to 23x300px, 45x600px, 12x150px, original image 2000x400px be 300x60px, 600x120px, 150x30px etc.

Greetings
Szymon

Attachments:

You must be logged in to view attached files.

Hi szymon-0481,

Thanks for reaching to us and appreciate your patience.

Please add below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS

.woocommerce.archive .product-grid-item :is(.product-image-link,.hover-img) img,
.single-product .woocommerce-product-gallery img{
    width: auto;
}

Wishing you a Merry Christmas.

Regards,

Hallo

Thank you for your help but the provided solution partially works.
1. it only crops and does not scale images
2. only works in the product archive e.g. https://dev.kurek.pl/product-category/04-tralki-i-slupy/
(does not work on the home page https://dev.kurek.pl/ , single product page e.g. https://dev.kurek.pl/product/slup-balustradowy-z-koszykiem-102-1100x100mm-25mm/ etc.)

Greetings
Szymon Kurek

Hi szymon-0481,

Please remove Custom CSS code before and use below one

.product-grid-item .product-wrapper :is(.product-image-link,.hover-img) img,
.single-product .woocommerce-product-gallery img{
    width: auto;
}

For the single product, it due to the height of Product image too long, you should use image editor like Photoshop to decrease its height to make it looks better https://prnt.sc/KLIq6GBhx1Pd

Regards,

Hallo

Unfortunately, the provided code does not fully solve the problem. I also looked for various other solutions (via CSS) but no solution works 100% correctly.

I assume that (as you said) the only solution is to create images in appropriate sizes (main, thumbnail, etc.).
1. Please let me know what types/sizes of images are used in the theme (archive, single product, gallery and all other places) and what image settings in WooCommerce/Wordpress should be done so that the theme displays the images correctly (i.e. without cropping, properly scaled).
2. I have over 2000 images so changing them manually in photoshop is difficult. If you know any way to generate images in appropriate sizes automatically, please let me know (plugin or something else…).

Greetings
Szymon

Hi szymon-0481,

Thanks for details.

In general, the issue in the images themselves, they have different dimensions so as a result you have such an issue.

Basically, the product images are controlled by WooCommerce and our theme doesn’t influence this. The size of the thumbnail you set should be larger than the size of the product thumbnail displayed on the shop page. If the thumbnail size is smaller than what the default size expects, it may appear blurry or not display correctly.

You can find the sizes used on the demo here: https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

Also, try to set cropping 1:1 here: https://prnt.sc/1X624qipxWts , and Regenerate thumbnails using the appropriate plugin. https://wordpress.org/plugins/regenerate-thumbnails/

Regards,

Hallo

ok, I solved the image size problem. Please close the topic (is there an option for the writer to close the topic?)

Greetings
Szymon

Hi szymon-0481,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

[Author]

Posts