fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Avoid CLS shift with Gallery

Hans Nienhaus

Hi,

I am currently testing the free version of the plugin. I have a huge CLS (Page Speed Insights) issue on all product pages (e.g. https://www.luxmediq.de/shop/drogentests/drogenschnelltest-kaufen/5x-drogentest-multi-10-drogenschnelltest/) on mobile / tablet, due to the delayed loading of the gallery. I can set the width in the plugin settings, but not reserve the height (which causes the CLS). How can I resolve this?

Thanks & regards

Hans

Hakik Zaman

Hi Hans,

Thanks for reaching out to us. Please make sure you have added images with the same dimensions (width x height).

We are using Slick to display the gallery images. Slick provides adaptiveHeight parameters.

So, if one of your images is longer than the others, the height will not be the same for that specific image. The height of the gallery will change according to that image height.

You can try the following snippet using the Code Snippets plugin to turn off the adaptive height:

add_filter( 'woo_variation_gallery_slider_js_options', function( $slider_js_options ){
$slider_js_options['adaptiveHeight'] = false;
return $slider_js_options;
}, 10, 1 );

Thank You