Product gallery, variant images and thumbnails
Compare the gallery edition of the theme with standard product images. An own gallery can lose existing size information at the output.
Compare product main image, gallery and the image of the selected variant. In block themes, the gallery component determines its presentation; classic customizer settings do not automatically apply to every gallery block.
Where to check the setting in WooCommerce
Open product image, gallery and the image of the affected variant. Check the specific image reference and your media library information. When changing variants, the new image output must also have a suitable alternative and a reserved display space.
Example of this specific finding
Illustrative control case: An image under the introduction does not reserve an area before downloading. As soon as it appears, the following text moves down.
<img src="produkt.webp" width="800" height="600"
style="max-width:100%;height:auto" alt="Roter Rucksack, Vorderansicht">follow-up audit in WooCommerce
Change gallery and variant selection mobile test. Actually check loaded size, alternative text and reserved area for each view.
Under throttled connection, the area before and after the image download remains the same. HTML dimensions and responsive CSS must reflect the same aspect ratio.
Derogations and scope
A space already reliably reserved by CSS can also solve the problem. Incorrect width/height values are not an improvement.
Regarding: WooCommerce on WordPress. Block and classic product templates as well as SEO extensions can have different output locations.
Classify the general error
Definition, system-independent causes and further correction examples: Reserve the space for pictures before downloading
Configuration and test signal documentation
WooCommerce: Product Images and Galleries