Woocommerce variation image speed

If you inspect those images, how large are they? In terms of filesize, dimensions and format.

I have two product pages:

First one:
image is 800px x 800px, being scaled to 557 x 557
379.74kb
(https://www.luxury-vi.com/gold-edition/)

Second one:
image is 480px x 480px, being scaled to 557 x 557
approx 125-130kb
(https://www.luxury-vi.com/colour-edition/)

Also, not sure if the image crop settings in woocommerce affects any of this.

Yes they should. What do you have there? Look at the shop_single size.

In my Woocommerce settings (settings > products > display) the sizes are set as:
Catalog Images – 120 x 120
Single Product Image – 800 x 800
Product Thumbnails – 90 x 90
The “Hard Crop” checkbox is checked on all three

When checking the images on the browser inspect console:

Gold edition product page shows:
556.8 x 556.8 and in the code shows max-width 800

Color edition product page:
556.8 x 556.8, and in code shows max-width 480

I’m not sure if this is the correct sizes you needed.
I have linked the two product pages in the previous reply if you needed to inspect further.

Thanks

If the images are being scaled down to 557, you can reduce Single Product Image - 800 x 800.

Thanks. I have changed this and regenerated thumbnails, but the change is still slow.(done on testing environment so wont be visible through link)

But I have found my first product page (gold edition) is instant even though the image is initially bigger. This product only has a few variations.
However, my second product page (colour edition) is the one that is slow even though the initial image is sized to 557 so no scaling should be needed; and that one has many variation (approx 100).
I’m assuming the amount of variations is most probably the issue more than image size? If so, any ideas how to improve the speed even with this issue?

Thanks for your help so far. Appreciated.

How many variations are in this product?

108 variations in total for the colour edition product, and there is an image set for each.

In that case the delay will be the ajax load/retrieval of the variations. https://www.ads-software.com/support/topic/24-handling-for-20-variations?replies=1

Great I’ll try that and see if things improve.

Just to confirm, I assume I change both the “10’s” to the number of my variations..so in the function statement and the add filter section?

Sorry, I’m new to woocommerce and haven’t needed to add much in child themes function.php for it.

Thanks

> than your number.

This worked perfectly! Thanks!

Also, I have added some more variations but with different prices. As woocommerce now displays variable prices as a range (min-max), I need to only display the minimum price.(there is a lot of topics on this so I can figure this out)
But also when the selection is chosen by the customer, I need the price under the title to change rather than the price which is by the Add To Cart button. The price by the cart button needs to be removed completely.

Sorry to be a pain, would appreciate any help on this also.
Thanks again

Thats more involved. We show 2 prices: global (for all variations) and then the actual variation price once options are chosen.

This is placed next to the cart button so it has context.

If all variations have the same price, only the top price is shown.

You can filter the top price and change how it is displayed with code. woocommerce_variable_price_html filter.