Woocommerce custom product slider shortcode - wordpress

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"><</span>',
nextArrow: '<span class="priv_arrow">></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"><</span>',
nextArrow: '<span class="priv_arrow">></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">
Add to Basket
</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>