Whitespace between product image and gallery on initial load of lightbox product page

I’m trying to understand why whitespace appears between the main product image and the product gallery on this page: http://etica.co.nz/product/mini-icosidodecahedron-ring-bearer-box/

Clicking on the middle image will remove the whitespace.

Why would it be doing this?

Cheers

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Ok, so eventually managed to figure out that it was due to a couple of optimization plugins that were interfering with WooCommerce’s image slider: JetPack’s lazy loading and SG Optimizer.

Deactivated SG Optimizer and added the following to my child theme’s functions.php:

function is_lazyload_activated()
{
    $condition = is_product();
    if ($condition) {
        return false;
    }
    return true;
}
add_filter('lazyload_is_enabled', 'is_lazyload_activated');

Now things are working again. Shame that can’t have the optimization plugins working at the same time. At least the code above allows lazy loading on all pages except for the product pages though.

Method 2

Your issue is flex slider in This page.

Put This script in footer.php

<script type="text/javascript">
    
    jQuery(document).ready(function(){
   
    jQuery('.flex-viewport').css('height', 525);

    jQuery('.flex-control-nav li').on('click',function(){
       
        jQuery('.flex-viewport').css('height', 525);
    });

});

</script>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0