How to create custom WooCommerce product gallery slider/carousel for single product page

The woocommerce products single product page in show/display product gallery slider/carousel on bottom single product page, if you want to show/display products custom gallery WooCommerce in single page. single product page in images gallery carousel of products to show in the WooCommerce single page.

Woocommerce custom products gallery slider for single product page

Always use child theme any wordpress website and copy below code and add this code in your function.php for woocommerce products gallery single page. Use this below custom product gallery carousel code for products gallery slider display all WooCommerce product single page.



 
 
add_shortcode('my-gallery', 'my_gallery_func');
function my_gallery_func($atts, $content){
    ob_start();
    $path = WooCommerce::plugin_path();
    include($path . '/templates/single-product/product-thumbnails.php');
    $output = ob_get_contents();
    ob_end_clean();
    return $output;


}


function loadup_scripts()
{
    wp_register_script('jquery', 'https://code.jquery.com/jquery-1.11.0.min.js', NULL, '1.11.0', false);

    wp_enqueue_script( 'jquery-migrate', 'http://code.jquery.com/jquery-migrate-1.2.1.min.js', array( 'jquery' ), '', true );
    wp_enqueue_script( 'slick-min-js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js', array( 'jquery' ), '', true );

    wp_enqueue_style( 'slick-css', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css' );
}

add_action( 'wp_enqueue_scripts', 'loadup_scripts' );


function livewellnutritionuk_action() { ?>
    <script>
         jQuery(document).ready(function(){

         jQuery('.responsive').slick({
          infinite: false,
          speed: 400,
          slidesToShow: 3,
          slidesToScroll: 3,
          autoplay: true,
          prevArrow: '<span class="priv_arrow"><img src="#"/></span>',
          nextArrow: '<span class="next_arrow"><img src="#"/></span>',
          responsive: [
                {
                  breakpoint: 1024,
                  settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                    infinite: true,
                    dots: true
                  }
                },
                {
                  breakpoint: 600,
                  settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                  }
                },
                {
                  breakpoint: 480,
                  settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                  }
                }
             ]
            });
    });
    </script>
    <?php
}
add_action('wp_footer', 'livewellnutritionuk_action'); 





after then use this shortcode [my-gallery] and put on WooCommerce plugin on product-single.php file. and after add upload gallery images from product gallery and gallery slider will be show on your single product page.

Post a Comment

0 Comments