How to choose which resolution picture will go to RELATED products

Hi.

I do not know how to force Woodmart to use smaller pictures-thumbnails for related products.

Please check this product :
https://www.woolsome.shop/product/linen-fabric-diamond-turquoise-red-ld-19-01/

I moved RELATED section under the main picture. It is now under the text “Other fabrics from this collection”

Please check 3 screenshots attached.

I have decreased the displaying size of these thumbnails to 85 x 85 px.

But its still choosing 768×768 file to be used there, from the big selection of different thumbnails.

https://www.woolsome.shop/wp-content/uploads/2020/09/wool-fabric-fulled-medium-twill-dark-grey-melange-WTV-06-01-1-768×768.jpg

As you can see 1 of the screenshots below is from the pagespeed, and is shows that my 50 related small pictures take as much as ca 1,5 MB .. because everytime within 85 x 85 px box … file with dimensions of 768 x 768 px is used.

Please help me to force WODMART to choose there a file of 150 x 150 for example.
It is crucial for the MOBILE performance of my site.

Thank you in advance

Attachments:

You must be logged in to view attached files.

Hello,

Using custom CSS you just reduced the HTML block to a size of 85 pixels so the picture is reduced but it still uploads a full size image from the media library so it looks like you need to upload the same images with smaller dimensions by default to the media library (https://prnt.sc/252r3je).

Kind Regards

Hi Luke

I completely do not understand your answer.

I can upload smaller dimensions to Media Library. And what then ?
How to force Woodmart to use on “related section” smaller dimensions ?

Please focus : )
I have loaded for a main picture of “product no 1” – 1024×1024 size
Woo made automatically from it lots of other dimensions. (768×768, 600×600, 300×300, 150×150 etc). Thats ok.

Then on “product no 2” . I am displaying related product using built in function, and there is no place I can choose which file, with which dimensions Woodmart will choose to be displayed there.

ATTACHED BELOW
Please check 2 pictures attached.
One is showing that on DESKTOP 300×300 image is chosen by woodmart there.
Second is my NIGHTMARE, because it looks like on MOBILE woodmart is displaying 768×768 there. :/

How can I force him to use for both (desktop and mobile) that he is choosing 150×150 for example ?

Attachments:

You must be logged in to view attached files.

Hello,

The reason is that the “srcset” attribute loads different sizes on different devices, this is how WooCommerce + WordPress works. You can check it on the default WordPress theme and see the same thing. Our theme doesn’t influent it.

Kind Regards

[Author]

Posts