Hướng dẫn tạo Slider cho thư viện ảnh sản phẩm trong WooCommerce

// Copy đoạn code sau bỏ vào file functions.php

add_action( 'wp_enqueue_scripts', 'wpshare247_register_scripts' );
function wpshare247_register_scripts() {
    //Css
    wp_enqueue_style( 'my_css_custom_1.css', get_theme_file_uri( '/js-libs/slick-1.8.1/slick/slick.css' ), false, '1.8.1' );
    wp_enqueue_style( 'my_css_custom_2.css', get_theme_file_uri( '/js-libs/slick-1.8.1/slick/slick-theme.css' ), false, '1.8.1' );
    
    //Javascript, Thư viện jQuery
    wp_enqueue_script( 'my_custom_1.js', get_theme_file_uri( '/js-libs/slick-1.8.1/slick/slick.min.js' ) , array(), '1.8.1', true );
}

add_action('wp_head', 'wpshare247_woo_product_gallery_slider');
function wpshare247_woo_product_gallery_slider(){
    ?>
    <style type="text/css">
        .woocommerce div.product div.images ol {
            overflow: inherit !important;
        }
        .woocommerce div.product div.images li{
            clear: inherit !important;
        }

        .woocommerce div.product div.images .slick-dots li{
            width: auto !important;
            float: none !important;
        }
    </style>
    
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            //----------------
            setTimeout(function(){
                jQuery('.woocommerce-product-gallery ol').slick({
                      dots: true,
                      infinite: false,
                      speed: 300,
                      slidesToShow: 4,
                      slidesToScroll: 4,
                      responsive: [
                        {
                          breakpoint: 1024,
                          settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                            infinite: true,
                            dots: true
                          }
                        },
                        {
                          breakpoint: 600,
                          settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2
                          }
                        },
                        {
                          breakpoint: 480,
                          settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                          }
                        }
                        // You can unslick at a given breakpoint now by adding:
                        // settings: "unslick"
                        // instead of a settings object
                      ]
                    });
            }, 500);
        });	
    </script>
    <?php
}