Woocommerce custom product slider shortcode

Question

I am working on woocommerce custom product slider shortcode similar to snapshot but I don't know how to use slider with woocommerce. ( https://www.buywholefoodsonline.co.uk/ )

My idea is to use shortcode to call this best selling product slider from database. I have use this code ( How can I list best selling products in woocommerce ) but did not get similar layout.

I wanted to find a way fit this code in some slider eg. owl carousel ( https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html)

I enqueue style and scripts of owl carousel in functions.php.

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('.slider').slick({
          infinite: false,
          speed: 100,
          slidesToShow: 4,
          slidesToScroll: 4,
          autoplay: true,
          prevArrow: '<span class="priv_arrow">&lt;</span>',
          nextArrow: '<span class="priv_arrow">&gt;</span>',
          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
                  }
                }
             ]
            });
    });
    </script>
    <?php
}
add_action('wp_footer', 'livewellnutritionuk_action'); 

But need to fit owl carousel for best selling products in this code.

<?php
$args = array(
    'post_type' => 'product',
    'meta_key' => 'total_sales',
    'orderby' => 'meta_value_num',
    'posts_per_page' => 1,
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); 
global $product; ?>
<div>
<a href="<?php the_permalink(); ?>" id="id-<?php the_id(); ?>" title="<?php the_title(); ?>">

<?php if (has_post_thumbnail( $loop->post->ID )) 
        echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); 
        else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="product placeholder Image" width="65px" height="115px" />'; ?>

<h3><?php the_title(); ?></h3>
</a>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>

Answer 1

I was struggling to this problem and now I found solution.

function.php

function child_enqueue_styles() {

    wp_enqueue_style( 'astra-child-theme-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_ASTRA_CHILD_VERSION, 'all' );
  wp_enqueue_style('owl-carousel','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css', '', '','all');
   wp_enqueue_style('owl-carousel-2.1.6','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.css', '', '','all');

   
   wp_enqueue_script('owl-js','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2//2.0.0-beta.2.4/owl.carousel.min.js',array('jquery'),'1.12.4', false);

}

add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );


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

         jQuery('.slider').slick({
          infinite: false,
          speed: 100,
          slidesToShow: 4,
          slidesToScroll: 4,
          autoplay: true,
          prevArrow: '<span class="priv_arrow">&lt;</span>',
          nextArrow: '<span class="priv_arrow">&gt;</span>',
          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
                  }
                }
             ]
            });
    });
    </script>
    <?php
}
add_action('wp_footer', 'livewellnutritionuk_action'); 

function slider_test(){
    ob_start();
      get_template_part('best_product');
    return ob_get_clean();
}
add_shortcode('best_seller','slider_test');

best_product.php

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<?php
$args = array(
    'post_type' => 'product',
    'meta_key' => 'total_sales',
    'orderby' => 'meta_value_num',
);
$loop = new WP_Query( $args );
echo '<div class="owl-carousel">';
while ( $loop->have_posts() ) : $loop->the_post(); 
global $product; ?>
<div>
<a href="<?php the_permalink(); ?>" id="id-<?php the_id(); ?>" title="<?php the_title(); ?>">

<?php if (has_post_thumbnail( $loop->post->ID )) 
        echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); 
        else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="product placeholder Image" width="65px" height="115px" />'; ?>
<h3 class="woocommerce-loop-product__title"><?php the_title();?></h3>
</a>
<h4><?php echo woocommerce_price($product->get_price());?></h4>
<div class="best_seller_button">
<a href="<?php echo home_url(); ?>?add-to-cart=<?php echo get_the_ID() ?>" class="yellow-but">Add to Basket</a>
</div>
<div class="stock_status">
    <div class="status_in_stock"> <?php echo $product->get_stock_status();?></div>
     
    <div class="star-rating"> <?php echo $product->get_average_rating();?></div>'

    </div>
    
</div>
<?php endwhile; 
echo '</div>';
?>
<?php wp_reset_query(); ?>
<style>
      .owl-item > div:after {
        font-family: sans-serif;
        font-size: 24px;
        font-weight: bold;
      }
      
.owl-theme .owl-controls .owl-nav [class*='owl-']{
    background: #8bc34a;
    padding: 0px 8px;
}
  </style>
    <script>
     jQuery(document).ready(function () {
      var owl = jQuery('.owl-carousel');
owl.owlCarousel({
    loop:true,
    nav:true,
    arrows: true,
    margin:10,
navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },            
        960:{
            items:4
        },
        1200:{
            items:4
        }
    }

});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY>0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});
     });
    </script>