Hi everyone, Maya here!
Today, I’ll share a custom code snippet that allows you to create a sleek and responsive product carousel without relying on a third-party plugin.
Let’s dive into it!
Woocommerce Product Carousel Slider Without Plugin
Product carousels are a fantastic way to:
- Showcase featured products: Highlight your best-selling or latest items.
- Promote special offers: Draw attention to discounted products.
- Increase product visibility: Give more products a chance to shine.
- Enhance user engagement: Carousel rotation keeps visitors interested.
Step 1: Add the Code to your functions.php file
Access your WordPress dashboard and navigate to Appearance > Theme File Editor. Locate the functions.php file of your active theme and paste the following code snippet:
You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]
As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.
Show Code
/*
*Product Carousel Slider Shortcode by WPCookie
*[woo-slider card="4" num="10" sale_badge="on" rating="on" description="off" check_stock="off" on_sale="off" cats="" type=""]
*https://redpishi.com/wordpress-tutorials/product-carousel-slider-shortcode/
*/
add_shortcode( 'woo-slider', function ( $atts ) {
$atts = shortcode_atts(
[
"image" => "on",
"check_stock" => "off", // on
"description" => "on", // off
"price" => "on", // off
"num" => "10",
"card" => "4",
"add_to_card" => "on",
"cats" => "", // 10,15,
"on_sale" => "",
"type" => "", // featured or bestselling
"sale_badge" => "on",
"rating" => "on",
],
$atts,
"woo-slider"
);
static $woo_slider_first_call = 1;
$num = $atts["num"];
$card = $atts["card"];
$image = $atts["image"];
$cat = $atts["cats"];
$check_stock = $atts["check_stock"];
$description = $atts["description"];
$price = $atts["price"];
$add_to_card = $atts["add_to_card"];
$on_sale = $atts["on_sale"];
$sale_badge = $atts["sale_badge"];
$rating = $atts["rating"];
$type = $atts["type"];
$theme = "1";
$auto_paly = "";
$tax_query = $meta_key = $total_sales = $type_arr = "";
$tax_query_arr = [];
$orderby = 'date';
$max_num_pages = 1;
if ( $check_stock == "on" ) { $check_stock_term = ['key' => '_stock_status','value' => 'outofstock','compare' => 'NOT LIKE']; } else { $check_stock_term = []; }
if ( $on_sale == "on" ) { $on_sal_meta =WC()->query->get_meta_query(); $on_sale_q = array_merge(array(0), wc_get_product_ids_on_sale()); } else { $on_sal_meta = $on_sale_q = []; }
if ( $cat != "" ) { $tax_query_arr[] = ['taxonomy' => 'product_cat','field' => 'term_id', 'terms' => explode(",", $cat) ]; $tax_query= 'tax_query'; }
if ( $type == "featured" ) { $tax_query_arr[] = [ 'taxonomy' => 'product_visibility','field' => 'name','terms' => 'featured','operator' => 'IN', ]; $tax_query= 'tax_query'; } else if ( $type == "bestselling" ) { $orderby = "meta_value_num"; $meta_key = 'meta_key'; $total_sales = 'total_sales'; }
$class= 'woo_slider'.$woo_slider_first_call;
$output ="<div class='Main_wrapper swiffy-slider slider-item-show".$card." ".$auto_paly." slider-item-show2-sm slider-nav-round slider-nav-sm slider-nav-visible slider-item-first-visible slider-nav-autopause slider-indicators-round slider-indicators-dark slider-indicators-outside slider-indicators-sm ".$auto_paly." ".$class."'> <ul class='slider-container'>";
$arr = [
'post_type' => 'product',
'post_status' => 'publish',
'posts_per_page' => $num,
$meta_key => $total_sales,
'orderby' => $orderby, // order by title or date
'order' => 'DESC',
'meta_query' => [$check_stock_term,$on_sal_meta],
$tax_query => $tax_query_arr,
'post__in' => $on_sale_q,
];
$the_query = new WP_Query($arr);
$number_of_result = $the_query->found_posts;
$count = min( $number_of_result,$num );
if ($the_query->have_posts()){
while ($the_query->have_posts()):
$the_query->the_post();
$product = wc_get_product();
$current_price = $product->get_price_html();
$sale_badge_e = "";
ob_start();
the_permalink();
$link = ob_get_clean();
ob_start();
the_title();
$title = ob_get_clean();
if ( has_post_thumbnail( get_the_ID() ) ) {
$img = get_the_post_thumbnail( get_the_ID(), 'shop_single' );
} else {
$img = '<img src="' . woocommerce_placeholder_img_src() . '" alt="'.$title.'" />';
}
$output .="<li class='slider_card slide-visible'> <div class='post_card'>";
if ( $product->is_on_sale() ) { $sale_badge_e = ( $sale_badge != "off" ) ? "<span class='onsale'>SALE</span>" : ""; }
if ( $image == "on" ) { $output .='<a href="'.$link .'" style="position: relative;">'.$sale_badge_e.$img.'</a>'; }
$output .= "<span class='wwo_card_details'>";
$output .='<a class="p_title" href="'.$link .'">'.$title.'</a>';
if ( $product->get_average_rating() && $rating !="off" ) { $output .=wc_get_rating_html($product->get_average_rating()); }
if ( $description == "on" ) { $output .='<p >'.$product->get_short_description().'</p>'; }
if ( $price == "on" ) { $output .='<span class="price">'.$current_price.'</span>'; }
if ( $add_to_card == "on" ) {
ob_start();
woocommerce_template_loop_add_to_cart();
$add_to_cart_button = ob_get_clean();
$output .= '<span class="woo_add_to_card">'.$add_to_cart_button.'</span>'; }
$output .= "</span'>";
$output .= "</div></li>";
endwhile;
wp_reset_postdata();
} // end of loop
$output .= "</ul>";
$output .= '
<button type="button" class="slider-nav" aria-label="Go left"></button>
<button type="button" class="slider-nav slider-nav-next" aria-label="Go left"></button>
<div class="slider-indicators">
<button class="active" aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
</div>
';
$output .= "</div>";
if ( $woo_slider_first_call == 1 ) {
add_action( 'wp_footer', function () use($class) { ?>
<style>.swiffy-slider{position:relative;display:block;width:100%;--swiffy-slider-snap-align:center;--swiffy-slider-item-width:100%;--swiffy-slider-item-gap:1rem;--swiffy-slider-item-reveal:0rem;--swiffy-slider-item-ratio:2/1;--swiffy-slider-item-count:1;--swiffy-slider-nav-light:#fff;--swiffy-slider-nav-dark:#333;--swiffy-slider-nav-zoom:1;--swiffy-slider-track-opacity:0.1;--swiffy-slider-track-height:0;--swiffy-slider-nav-outside-size:3.5rem;--swiffy-slider-indicator-outside-size:1.5rem;--swiffy-slider-animation-duration:.75s;--swiffy-slider-animation-delay:0s;--swiffy-slider-animation-timing:ease-in-out}.swiffy-slider,.swiffy-slider::after,.swiffy-slider::before{box-sizing:border-box}.swiffy-slider ::-webkit-scrollbar{height:var(--swiffy-slider-track-height)}.swiffy-slider ::-webkit-scrollbar-track{background:rgba(0,0,0,var(--swiffy-slider-track-opacity))}.swiffy-slider ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.4);border-radius:1rem}.swiffy-slider ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.6)}.slider-container{--swiffy-slider-item-gap-totalwidth:calc(var(--swiffy-slider-item-gap) * (var(--swiffy-slider-item-count) - 1));--swiffy-slider-item-width:calc((100% - var(--swiffy-slider-item-reveal) - var(--swiffy-slider-item-gap-totalwidth)) / var(--swiffy-slider-item-count));overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scroll-behavior:smooth;display:grid;align-items:center;height:100%;grid:auto/auto-flow -webkit-max-content;grid:auto/auto-flow max-content;grid-auto-rows:100%;grid-auto-columns:var(--swiffy-slider-item-width);grid-auto-flow:column;grid-gap:var(--swiffy-slider-item-gap);list-style:none;margin:0;padding:0;scrollbar-width:none;scrollbar-color:rgba(0,0,0,.4) rgba(0,0,0,var(--swiffy-slider-track-opacity));background-clip:padding-box}.slider-container>*{scroll-snap-align:var(--swiffy-slider-snap-align);position:relative;width:100%;height:100%}.slider-item-helper .slider-container>*{background-size:cover;background-color:#e1e1e1;background-position:50% 50%;display:flex;justify-content:center;align-items:center}.slider-item-helper:not(.slider-item-ratio) .slider-container>*{min-height:20rem}.slider-item-ratio .slider-container>*>*{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.slider-item-ratio-contain .slider-container>*>*{-o-object-fit:contain;object-fit:contain}.slider-item-ratio .slider-container>::after{display:block;padding-top:calc(100% / (var(--swiffy-slider-item-ratio)));content:""}.slider-item-ratio-32x9{--swiffy-slider-item-ratio:32/9}.slider-item-ratio-21x9{--swiffy-slider-item-ratio:21/9}.slider-item-ratio-16x9{--swiffy-slider-item-ratio:16/9}.slider-item-ratio-4x3{--swiffy-slider-item-ratio:4/3}.slider-item-ratio-2x1{--swiffy-slider-item-ratio:2/1}.slider-item-ratio-1x1{--swiffy-slider-item-ratio:1/1}.slider-item-ratio-3x4{--swiffy-slider-item-ratio:3/4}.slider-nav-scrollbar{--swiffy-slider-track-height:0.5rem}.slider-nav-scrollbar .slider-container{scrollbar-width:thin}.slider-nav-nodelay .slider-container{scroll-behavior:auto}.slider-indicators{position:absolute;right:2rem;bottom:0;left:2rem;display:flex;justify-content:center;padding:0;margin-bottom:1rem;list-style:none}.slider-nav-scrollbar .slider-indicators{margin-bottom:calc(1rem + var(--swiffy-slider-track-height))}.slider-indicators>.active{opacity:1}.swiffy-slider.slider-indicators-outside .slider-nav{margin-bottom:var(--swiffy-slider-indicator-outside-size)}.swiffy-slider.slider-indicators-outside{padding-bottom:var(--swiffy-slider-indicator-outside-size)}.swiffy-slider.slider-indicators-outside .slider-indicators,.swiffy-slider.slider-indicators-outside.slider-indicators{margin-bottom:0}.slider-indicators>*{box-sizing:content-box;flex:0 1 auto;width:2rem;height:.2rem;padding:0;border:.4rem solid transparent;cursor:pointer;background-color:#fff;background-clip:padding-box;opacity:.5;transition:opacity .4s ease}.slider-indicators-square .slider-indicators>*,.slider-indicators-square.slider-indicators>*{width:.5rem;height:.5rem;border:.4rem solid transparent}.slider-indicators-round .slider-indicators>*,.slider-indicators-round.slider-indicators>*{width:.5rem;height:.5rem;border:.4rem solid transparent;border-radius:50%}.slider-indicators-highlight .slider-indicators>.active,.slider-indicators-highlight.slider-indicators>.active{border:.33rem solid transparent;padding:.07rem}.slider-nav{position:absolute;top:0;left:0;bottom:0;border:0;background-color:transparent;cursor:pointer;padding:0;visibility:hidden;opacity:.8;transition:visibility .1s,opacity .2s linear;margin-bottom:var(--swiffy-slider-track-height);display:flex;align-items:center;padding:0 .5rem;-webkit-filter:drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));filter:drop-shadow(0 0 .5rem rgba(0, 0, 0, .5));transform:scale(var(--swiffy-slider-nav-zoom))}.slider-nav::before{position:absolute;content:"";padding:.5rem;width:3rem;height:3rem}.slider-nav::after{content:"";-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'></path></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'></path></svg>");-webkit-mask-size:cover;mask-size:cover;background-color:var(--swiffy-slider-nav-light);background-origin:content-box;width:3rem;height:3rem}.slider-nav-arrow .slider-nav::after{-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'></path></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z'></path></svg>")}.slider-nav-chevron .slider-nav::after{-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M9.224 1.553a.5.5 0 0 1 .223.67L6.56 8l2.888 5.776a.5.5 0 1 1-.894.448l-3-6a.5.5 0 0 1 0-.448l3-6a.5.5 0 0 1 .67-.223z'></path></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M9.224 1.553a.5.5 0 0 1 .223.67L6.56 8l2.888 5.776a.5.5 0 1 1-.894.448l-3-6a.5.5 0 0 1 0-.448l3-6a.5.5 0 0 1 .67-.223z'></path></svg>")}.slider-nav-caret .slider-nav::after{-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z'></path></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='M10 12.796V3.204L4.519 8 10 12.796zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753z'></path></svg>")}.slider-nav-caretfill .slider-nav::after{-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'></path></svg>");mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'><path d='m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z'></path></svg>")}.swiffy-slider:hover .slider-nav{visibility:visible}.swiffy-slider.slider-nav-autohide.slider-item-first-visible .slider-nav:not(.slider-nav-next){visibility:hidden}.swiffy-slider.slider-nav-autohide.slider-item-last-visible .slider-nav.slider-nav-next{visibility:hidden}.slider-nav-outside .slider-container{margin:0 var(--swiffy-slider-nav-outside-size)}.slider-nav-outside .slider-nav{padding:0}.swiffy-slider .slider-nav:hover{opacity:1}.slider-nav-square .slider-nav{padding:0}.slider-nav-round .slider-nav::before,.slider-nav-square .slider-nav::before{background-color:var(--swiffy-slider-nav-light)}.slider-nav-round .slider-nav::after,.slider-nav-square .slider-nav::after{background-color:var(--swiffy-slider-nav-dark);width:2rem;height:2rem;margin:.5rem}.slider-nav-round .slider-nav::before{border-radius:50%}.slider-nav-round .slider-nav::after{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'%3E%3C/path%3E%3C/svg%3E");mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'%3E%3C/path%3E%3C/svg%3E")}.slider-nav-dark .slider-nav::after{background-color:var(--swiffy-slider-nav-dark)}.slider-nav-dark.slider-nav-round .slider-nav::before,.slider-nav-dark.slider-nav-square .slider-nav::before{background-color:var(--swiffy-slider-nav-dark)}.slider-nav-dark.slider-nav-round .slider-nav::after,.slider-nav-dark.slider-nav-square .slider-nav::after{background-color:var(--swiffy-slider-nav-light)}.slider-nav-sm{--swiffy-slider-nav-zoom:.75;--swiffy-slider-nav-outside-size:2.5rem}.slider-nav.slider-nav-next::after{transform:rotate(180deg)}.slider-nav.slider-nav-next{right:0;left:unset}.slider-nav-visible .slider-nav{visibility:visible}.slider-nav-dark .slider-nav{opacity:.6}.slider-indicators-dark .slider-indicators>*,.slider-indicators-dark.slider-indicators>*{-webkit-filter:invert(1);filter:invert(1)}.slider-item-snapstart{--swiffy-slider-snap-align:start}.slider-item-nosnap{--swiffy-slider-snap-align:unset}.slider-item-nogap{--swiffy-slider-item-gap:0rem}.slider-item-reveal{--swiffy-slider-item-reveal:8rem}.slider-item-snapstart.slider-item-reveal{--swiffy-slider-item-reveal:4rem}.slider-item-show2{--swiffy-slider-item-count:2}.slider-item-show3{--swiffy-slider-item-count:3}.slider-item-show4{--swiffy-slider-item-count:4}.slider-item-show5{--swiffy-slider-item-count:5}.slider-item-show6{--swiffy-slider-item-count:6}.slider-nav-mousedrag .slider-container{cursor:-webkit-grab;cursor:grab}.slider-nav-mousedrag.dragging .slider-container{-ms-scroll-snap-type:unset;scroll-snap-type:unset;scroll-behavior:unset;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.slider-nav-mousedrag.dragging .slider-nav{visibility:hidden}@media (hover:hover){.slider-nav-mousedrag .slider-container::after{content:"";position:absolute;width:100%;height:100%}}@media (prefers-reduced-motion:no-preference){.slider-nav-animation.slider-nav-animation-fast{--swiffy-slider-animation-duration:.25s}.slider-nav-animation.slider-nav-animation-slow{--swiffy-slider-animation-duration:1.25s}.slider-nav-animation .slider-container>*>*{transition:opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing),transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing);transition-delay:var(--swiffy-slider-animation-delay)}.slider-nav-animation .slider-container .slide-visible>*{transition:opacity var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing),transform var(--swiffy-slider-animation-duration) var(--swiffy-slider-animation-timing);transition-delay:var(--swiffy-slider-animation-delay)}.slider-nav-animation.slider-nav-animation-fadein .slider-container>*>*{opacity:.5}.slider-nav-animation.slider-nav-animation-scale .slider-container>*>*{transform:scale(.9)}.slider-nav-animation.slider-nav-animation-appear .slider-container>*>*{opacity:.3;transform:scale(.9)}.slider-nav-animation.slider-nav-animation-scaleup .slider-container>*>*{transform:scale(.25)}.slider-nav-animation.slider-nav-animation-zoomout .slider-container>*{overflow:hidden}.slider-nav-animation.slider-nav-animation-zoomout .slider-container>*>*{transform:scale(1.3)}.slider-nav-animation.slider-nav-animation-turn .slider-container>*>*{transform:rotateY(70deg)}.slider-nav-animation.slider-nav-animation-slideup .slider-container>*>*{transform:translateY(60%) scale(.99)}.slider-nav-animation.slider-nav-animation-slideup .slider-container{overflow-y:hidden}.slider-nav-animation .slider-container>.slide-visible>*{opacity:1;transform:none}}@media (min-width:62rem){.slider-item-show2:not(.slider-item-snapstart) .slider-container>*,.slider-item-show4:not(.slider-item-snapstart) .slider-container>*,.slider-item-show6:not(.slider-item-snapstart) .slider-container>*{scroll-snap-align:unset}.slider-item-show2:not(.slider-item-snapstart) .slider-container>::before,.slider-item-show4:not(.slider-item-snapstart) .slider-container>::before,.slider-item-show6:not(.slider-item-snapstart) .slider-container>::before{content:" ";display:block;position:absolute;left:calc((var(--swiffy-slider-item-gap)/2)*-1);top:0;width:1px;height:1px;scroll-snap-align:var(--swiffy-slider-snap-align)}.slider-nav-outside-expand .slider-nav{margin-left:-4rem}.slider-nav-outside-expand .slider-nav.slider-nav-next{margin-right:-4rem}.slider-nav-sm.slider-nav-outside-expand .slider-nav{margin-left:-3.5rem}.slider-nav-sm.slider-nav-outside-expand .slider-nav.slider-nav-next{margin-right:-3.5rem}.slider-indicators-sm.slider-indicators{display:none}}@media (max-width:62rem){.swiffy-slider{--swiffy-slider-track-height:0rem;--swiffy-slider-item-reveal:0rem;--swiffy-slider-item-count:1;--swiffy-slider-nav-zoom:.875}.swiffy-slider .slider-item-show2-sm{--swiffy-slider-item-count:2}.slider-item-reveal{--swiffy-slider-item-reveal:4rem}.slider-item-snapstart.slider-item-reveal{--swiffy-slider-item-reveal:2rem}.slider-item-show6 .slider-container{grid-auto-columns:calc(25% - (var(--swiffy-slider-item-gap)/ 4*3))}.slider-item-show6.slider-item-reveal .slider-container{grid-auto-columns:calc(25% - (var(--swiffy-slider-item-gap)/ 4*3) - .5rem)}.slider-item-show6.slider-item-reveal .slider-container>*{scroll-snap-align:unset}.slider-item-show6.slider-item-reveal .slider-container>::before{content:" ";display:block;position:absolute;left:calc((var(--swiffy-slider-item-gap)/2)*-1);top:0;width:1px;height:1px;scroll-snap-align:center}.slider-nav::after,.slider-nav::before{width:2rem;height:2rem;padding:.3rem}.slider-nav-round .slider-nav::after,.slider-nav-square .slider-nav::after{width:1.75rem;height:1.75rem;margin:.125rem}.slider-nav-outside .slider-container,.slider-nav-outside-expand .slider-container{margin:0 2rem}.slider-nav-outside-expand .slider-container{margin:0 var(--swiffy-slider-nav-outside-size)}.slider-nav-outside-expand .slider-nav{padding:0}.slider-indicators-round .slider-indicators>*,.slider-indicators-round.slider-indicators>*,.slider-indicators-square .slider-indicators>*,.slider-indicators-square.slider-indicators>*{width:.3rem;height:.3rem}.slider-indicators{margin-bottom:.5rem;display:none}.slider-nav-scrollbar .slider-indicators{margin-bottom:0}.slider-indicators>*{width:1rem;height:.125rem;border-width:.25rem}.slider-indicators-sm .slider-indicators,.slider-indicators-sm.slider-indicators{display:flex}}@media (max-width:48rem){.slider-item-show6 .slider-container{grid-auto-columns:calc(50% - (var(--swiffy-slider-item-gap)/ 2))}.slider-item-show6.slider-item-reveal .slider-container{grid-auto-columns:calc(50% - (var(--swiffy-slider-item-gap)/ 2) - 1.5rem)}}@media (hover:none){.swiffy-slider.slider-nav-touch .slider-nav{visibility:visible}.swiffy-slider:not(.slider-nav-touch).slider-nav-outside .slider-container,.swiffy-slider:not(.slider-nav-touch).slider-nav-outside-expand .slider-container{margin:0 0}.slider-item-nosnap-touch{--swiffy-slider-snap-align:unset}}
/*# sourceMappingURL=swiffy-slider.min.css.map */</style>
<script>const swiffyslider={version:"1.6.0",init(e=document.body){for(let t of e.querySelectorAll(".swiffy-slider"))this.initSlider(t)},initSlider(e){for(let t of e.querySelectorAll(".slider-nav")){let i=t.classList.contains("slider-nav-next");t.addEventListener("click",()=>this.slide(e,i),{passive:!0})}for(let t of e.querySelectorAll(".slider-indicators"))t.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(e,()=>this.handleIndicators(e),60);if(e.classList.contains("slider-nav-autoplay")){const t=e.getAttribute("data-slider-nav-autoplay-interval")?e.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(e,t,e.classList.contains("slider-nav-autopause"))}if(["slider-nav-autohide","slider-nav-animation"].some(t=>e.classList.contains(t))){const t=e.getAttribute("data-slider-nav-animation-threshold")?e.getAttribute("data-slider-nav-animation-threshold"):.3;this.setVisibleSlides(e,t)}},setVisibleSlides(e,t=.3){let i=new IntersectionObserver(t=>{t.forEach(e=>{e.isIntersecting?e.target.classList.add("slide-visible"):e.target.classList.remove("slide-visible")}),e.querySelector(".slider-container>*:first-child").classList.contains("slide-visible")?e.classList.add("slider-item-first-visible"):e.classList.remove("slider-item-first-visible"),e.querySelector(".slider-container>*:last-child").classList.contains("slide-visible")?e.classList.add("slider-item-last-visible"):e.classList.remove("slider-item-last-visible")},{root:e.querySelector(".slider-container"),threshold:t});for(let t of e.querySelectorAll(".slider-container>*"))i.observe(t)},slide(e,t=!0){const i=e.querySelector(".slider-container"),s=e.classList.contains("slider-nav-page"),l=e.classList.contains("slider-nav-noloop"),r=e.classList.contains("slider-nav-nodelay"),o=i.children,n=parseInt(window.getComputedStyle(i).columnGap),a=o[0].offsetWidth+n;let d=t?i.scrollLeft+a:i.scrollLeft-a;s&&(d=t?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft<1&&!t&&!l&&(d=i.scrollWidth-i.offsetWidth),i.scrollLeft>=i.scrollWidth-i.offsetWidth&&t&&!l&&(d=0),i.scroll({left:d,behavior:r?"auto":"smooth"})},slideToByIndicator(){const e=window.event.target,t=Array.from(e.parentElement.children).indexOf(e),i=e.parentElement.children.length,s=e.closest(".swiffy-slider"),l=s.querySelector(".slider-container").children.length/i*t;this.slideTo(s,l)},slideTo(e,t){const i=e.querySelector(".slider-container"),s=parseInt(window.getComputedStyle(i).columnGap),l=i.children[0].offsetWidth+s,r=e.classList.contains("slider-nav-nodelay");i.scroll({left:l*t,behavior:r?"auto":"smooth"})},onSlideEnd(e,t,i=125){let s;e.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(s),s=setTimeout(t,i)}),{capture:!1,passive:!0})},autoPlay(e,t,i){t=t<750?750:t;let s=setInterval(()=>this.slide(e),t);const l=()=>this.autoPlay(e,t,i);return i&&(["mouseover","touchstart"].forEach((function(t){e.addEventListener(t,(function(){window.clearTimeout(s)}),{once:!0,passive:!0})})),["mouseout","touchend"].forEach((function(t){e.addEventListener(t,(function(){l()}),{once:!0,passive:!0})}))),s},handleIndicators(e){if(!e)return;const t=e.querySelector(".slider-container"),i=t.scrollWidth-t.offsetWidth,s=t.scrollLeft/i;for(let t of e.querySelectorAll(".slider-indicators")){let e=t.children,i=Math.abs(Math.round((e.length-1)*s));for(let t of e)t.classList.remove("active");e[i].classList.add("active")}}};window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||(document.currentScript.hasAttribute("defer")?swiffyslider.init():document.onreadystatechange=()=>{"interactive"===document.readyState&&swiffyslider.init()});
//# sourceMappingURL=swiffy-slider.min.js.map</script>
<style>
span.wwo_card_details {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 10px;
}
span.wwo_card_details {
padding: 30px;
padding-top: 5px;
}
button.slider-nav:hover, button.slider-nav:focus {
background: none;
}
.entry-content ul, .entry-content ol {
padding-bottom: 34px;
padding-top: 15px;
}
div.post_card {
transition: all 0.3s ease!important;
padding: 0px;
min-height: 200px;
background-color: white;
border: 0px solid #e7e7e7;
border-radius: 5px;
box-shadow: 0 0.35em 1.25em rgba(0, 0, 0, 0.085);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
gap: 15px;
}
div.post_card:hover {
transform: translateY(-3px);
box-shadow: 0 0.75em 1.85em rgba(0, 0, 0, 0.185);
}
div.post_card a {
color: black;
font-weight: bold;
display: block;
font-size: 1.05rem;
}
span.onsale {
position: absolute;
color: white;
background-color: #a46464;
padding: 3px 8px;
left: 7px;
top: 7px;
border-radius: 5px;
font-size: 0.9em;
}
a.p_title {
font-size: 1.2em;
}
.Main_wrapper a {
text-decoration: none!important;
}
.Main_wrapper img {
aspect-ratio: 1;
object-fit: cover;
}
span.woo_add_to_card a {
color: white;
background-color: gray;
padding: 11px 27px;
border-radius: 5px;
}
</style>
<?php }); }
add_action( 'wp_footer', function () use($class, $theme ) { if ( $theme == "2" ) { ?>
<style>
div.<?= $class ?> li.slider_card.slide-visible {
overflow: hidden;
}
div.<?= $class ?> span.wwo_card_details {
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
position: absolute;
inset: 0;
background-color: #ffffffe6;
justify-content: center;
transform: translateY(100%);
}
div.<?= $class ?> .slider-container .post_card:hover span.wwo_card_details {
transform: translateY(0px);
}
</style>
<?php }
});
$woo_slider_first_call++;
return $output;
});
Step 2: Use the Shortcode in your pages
The above code registers a shortcode in WordPress, which you can use to add a product carousel to your site. Here’s how it works:
[woo-slider sale_badge="on" rating="on" card="4" description="off" check_stock="off" on_sale="off" cats="" type="" auto_paly="off" theme="1"]You can insert this shortcode anywhere on a page or post to display the carousel. Here’s a breakdown of the attributes you can use with the shortcode:
card="4"sets the number of cards (products) displayed in each slide to 4.num="10"limits the number of loaded products to 10 (default value).sale_badge="off"hides the sale badge on discounted products.rating="off"hides the product rating.description="off"hides the short product description (default).check_stock="on"excludes out-of-stock products from the carousel.on_sale="on"displays only discounted products.cats="10,15,"displays products from specific categories (separate IDs with commas).type="featured"displays only featured products.type="bestselling"displays best-selling products first.
For example, this shortcode displays a carousel showcasing discounted products from 12 and 17 categories:
[woo-slider num="15" on_sale="on" cats="12,17" ]Product Carousel PLUS+
The Plus version of this code has all the features of the standard version, along with two new exciting features:
- If you set the auto_play attribute to “on” the carousel will automatically start playing.
- In addition to the standard theme, you will also have access to a new theme, which can be activated by setting the theme attribute to “2”
If you want to enjoy the benefits of the Plus version, you need to update your code with the following snippet.
Show Code
Product Carousel PLUS+ shortcode:
[woo-slider card="4" num="10" sale_badge="on" rating="on" description="off" check_stock="off" on_sale="off" cats="" type="" auto_paly="on" theme="2"]If this article is difficult for you to read in text, you can watch the video version below.
Why Go Plugin-Free?
While plugins offer convenience, they can introduce drawbacks:
- Security: Plugins can be vulnerable to attacks, putting your site at risk. Custom code minimizes this risk.
- Performance: Plugins can slow down your site, negatively impacting user experience and SEO. Custom code keeps your site lean and fast.
- Compatibility: Plugins can conflict with each other or with your theme, causing issues. Custom code avoids these problems.
- Control: Custom code gives you full control over the carousel’s functionality and appearance, allowing you to tailor it to your needs.
Got Questions?
Here are some additional points you might be curious about:
Can I use this code if I’m not familiar with web development?
Yes! This guide provides a simple, step-by-step process that anyone can follow, regardless of their technical knowledge. Just copy the provided code snippets and follow the instructions.
Can I use this code to create multiple carousels on the same page?
Yes, you can use the shortcode multiple times with different attributes to create distinct carousels on the same page.
Is this carousel mobile-responsive?
Absolutely! The carousel is built with responsive design principles, ensuring it adapts seamlessly to different screen sizes and devices.
How can I customize the appearance of the carousel further?
If you’re comfortable with CSS, you can add custom styles to your theme’s stylesheet to modify the carousel’s appearance. Use the browser’s developer tools to identify the carousel’s elements and apply your custom styles.
Share Your Experience
Have you tried this custom code for creating a WooCommerce product carousel? Let me know in the comments if it worked correctly for you or if you encountered any issues. I’d be happy to assist and provide further guidance.
