Product Image Gallery Not Functioning Properly

This article helps you find the solution to the gallery pop-up issue on the product page.

For a better understanding, please refer to the YouTube video one of our clients uploaded.

Video:

If you are experiencing the same issue, please follow these instructions.

Instructions:

Please replicate the following code:

// Added by Wisdmlabs
// Enqueue Fancybox script and styles
function enqueue_fancybox() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('fancybox', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js', array('jquery'), '3.5.7', true);
    wp_enqueue_style('fancybox-css', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css', array(), '3.5.7');
}
add_action('wp_enqueue_scripts', 'enqueue_fancybox');

// Initialize Fancybox for WooCommerce product gallery images
function initialize_fancybox() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // Remove WooCommerce default lightbox
            $('.woocommerce-product-gallery__image a').removeClass('woocommerce-gallery__image--zoom');

            // Add Fancybox attributes to product gallery images
            $('.woocommerce-product-gallery__image a').attr('data-fancybox', 'gallery');

            // Initialize Fancybox
            $('[data-fancybox="gallery"]').fancybox({
                // Optional Fancybox settings
                buttons: [
                    "zoom",
                    "slideShow",
                    "fullScreen",
                    "thumbs",
                    "close" 
                ],
                protect: true
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'initialize_fancybox', 20);

Paste the above code inside the functions.php file of the active theme.