Carrousel produits mis en avant Woocommerce (Slick/Bulma) [PHP + JS + CSS]

Petite astuce pour afficher sous forme de carrousel les produits mis en avant. Fonctionne avec Slick carrousel et le CSS Bulma.

PHP (dans votre thème)

<!-- Produits mis en avant -->
<section class="section offres-moment content">
<div class="container">
<h2 class="title is-3 has-text-centered">Produits mis en avant</a></h2>

<?php
$args = array(
'post_type' => 'product',
'orderby' => 'id',
'order' => 'DESC',
'limit' => '10',
'tax_query' => array(
array(
'taxonomy' => 'product_visibility',
'field' => 'name',
'terms' => 'featured', <!-- supprimer cette partie pour avoir les dernier produits -->
),
),
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) { 
$numberPosts = $loop->found_posts;
if ($numberPosts==1) {?>
<div class="products">
<?php } elseif ($numberPosts==2) {?>
<div class="slider-offres-moment-2 products">
<?php } elseif ($numberPosts==3) {?>
<div class="slider-offres-moment-3 products">
<?php } else {?>
<div class="slider-offres-moment-4 products">
<?php } while ( $loop->have_posts() ) : $loop->the_post();
global $product;
?>
<div <?php wc_product_class( '', $product ); ?>>
<?php
do_action( 'woocommerce_before_shop_loop_item' );
do_action( 'woocommerce_before_shop_loop_item_title' );
do_action( 'woocommerce_shop_loop_item_title' );
do_action( 'woocommerce_after_shop_loop_item_title' );
do_action( 'woocommerce_after_shop_loop_item' );
?>
</div>
<?php endwhile; ?>
</div>
<?php } else { }
wp_reset_postdata();
?> 
</div>
</section>
<!-- /mis en avant -->

JS en plus de celui de Slick

$(document).ready(function () {
$('.slider-offres-moment-2').slick({
autoplay: true,
slidesToShow: 2,
slidesToScroll: 1,
dots: true,
responsive: [
{
breakpoint: 640,
settings: {
slidesToShow: 1
}
}
]
});
});
$(document).ready(function () {
$('.slider-offres-moment-3').slick({
autoplay: true,
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 1
}
}
]
});
});
$(document).ready(function () {
$('.slider-offres-moment-4').slick({
autoplay: true,
slidesToShow: 4,
slidesToScroll: 1,
dots: true,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3
}
},
{
breakpoint: 769,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 640,
settings: {
slidesToShow: 1
}
}
]
});
});

CSS (en plus de celle de Bulma)

/*--------------------------------------------------------------
# Produits mis en avant
--------------------------------------------------------------*/
.offres-moment {
background: rgba(255, 255, 255, 0.6);
}

.offres-moment .slick-dotted.slick-slider.products,
.offres-moment .products {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 5rem;
}

.offres-moment .slick-track {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}

.offres-moment .products .product {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 1em;
}

.offres-moment .products .product a img {
margin: 0 auto;
box-shadow: none;
width: 100%;
height: auto;
display: block;
}

.offres-moment .products .product .woocommerce-loop-product__title {
padding: .5em 0;
margin: 0;
font-size: 1em;
color: var(--main-text-color);
}

.offres-moment .products .product .price {
text-align: center;
display: block;
font-weight: 400;
margin-bottom: .5em;
font-size: .857em;
color: var(--color-1);
}

.offres-moment .products .product a.button {
display: block;
margin: 0 auto;
}

.offres-moment.content ul.slick-dots {
list-style: none;
margin: 0;
bottom: -50px;
}

.offres-moment span.onsale {
min-height: unset;
min-width: unset;
padding: 0.3rem;
line-height: 2;
border-radius: 3px;
background-color: var(--color-1);
font-weight: 700;
position: absolute;
text-align: center;
color: #fff;
font-size: .857em;
z-index: 9;
}

.offres-moment .products .product .onsale {
top: 0;
right: 0;
left: auto;
margin: 0;
}

@media screen and (max-width: 768px) {
.offres-moment .slick-track {
height: auto;
}
}