woocommerce Product Shortcode(Slick Slider)

on
/* Slick Slider */  
/* Our Product Slider ShortCode */
function our_product_slider()
{
ob_start();
$args = array(  
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => 4,
'orderby' => 'id', 
'order' => 'DESC',
);
$products = wc_get_products( $args );
?> 
<div class="our-product-slider-wrapper">
<div class="our-product-slider slider">
  
<?php 
foreach ( $products as $product ){
$pro_id = $product->get_id();
$img = $product->get_image();
$product_link = get_permalink($pro_id);
$product_name = $product->get_name();
?>
<div class="slider-item">
<div class="our-product-image">
<a href="<?php echo $product_link; ?>">
<?php echo $img; ?>
</a>
</div>
<div class="our-product-title">
<a href="<?php echo $product_link; ?>">
<h3><?php echo $product_name; ?></h3>
</a>
</div>
</div> 
  <?php 
}
wp_reset_postdata();
  ?>
  
</div>
</div>
<?php
    return ob_get_clean();
}
add_shortcode( 'our_product_slider' , 'our_product_slider' );


/* JS */
$(".our-product-slider").slick({
infinite: true,
dots: true,
arrows: false,
autoplay: true,
autoplaySpeed: 1000,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1
}
}
]
  });
  
/* CSS */   
.our-product-slider-wrapper .slick-slide img {
width: 100%;
}
.our-product-slider-wrapper ul.slick-dots{
display: flex;
justify-content: center;
margin: 0;
padding: 60px 0 0;
list-style-type: none;
}
.our-product-slider-wrapper ul.slick-dots li{
margin: 0 0.25rem;
}
.our-product-slider-wrapper ul.slick-dots li button{
display: block;
width: 14px;
height: 14px;
padding: 0;
border: none;
border-radius: 100%;
background-color: #dddddd;
text-indent: -9999px;
}
.our-product-slider-wrapper ul.slick-dots li.slick-active button{
background-color: #9e7f61;
}
.our-product-slider-wrapper .our-product-image{
margin-bottom: 25px;
border-radius: 0 30px 0 30px;
}
.our-product-slider-wrapper .our-product-image img{
border-radius: 0 30px 0 30px;
}
.our-product-slider-wrapper .our-product-title a,
.our-product-slider-wrapper .our-product-title a:hover{
color: #5f6d5a;
}
.our-product-slider-wrapper .our-product-title a h3{
font-family: "Poppins", Sans-serif;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.6em;
margin: 0;
padding: 0 35px 0 30px;
    display: inline-block;
    background: url(/wp-content/uploads/2022/06/product-right-arrow.png) no-repeat right center;
}
.our-product-slider-wrapper .slick-slide {
  margin: 0 20px;
}
.our-product-slider-wrapper .slick-list {
  margin: 0 -20px;
}
/* 991 */
.our-product-slider-wrapper .our-product-title a h3{
font-size: 16px;
padding: 0 35px 0 20px;
}
.our-product-slider-wrapper .slick-slide {
  margin: 0 15px;
}
.our-product-slider-wrapper .slick-list {
  margin: 0 -15px;
}
/* 767 */
.our-product-slider-wrapper ul.slick-dots{
padding: 40px 0 0;
}
.our-product-slider-wrapper ul.slick-dots li button{
width: 12px;
height: 12px
}
.our-product-slider-wrapper .slick-slide {
  margin: 0 20px;
}
.our-product-slider-wrapper .slick-list {
  margin: 0 -20px;
}