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
0 Comments