Tag: WooCommerce product slider

If you use WooCommerce as your eCommerce platform you’ll find there’s no shortage of plugins to enhance its functionality. But it’s good practice to install a plugin only when strictly necessary and if you’re using a WordPress theme that incorporates a modern framework like Bootstrap, a lightweight option is to recycle the code to make your own custom WooCommerce product slider.

The example below uses Bootstrap 5 carousel code and shows 12 products 3 at a time. If a product is marked out of stock it’s not selected. You can change the number of products shown by editing $slides, $products_per_slide and the Bootstrap column code.

<div id="recent-products" class="carousel slide" data-bs-ride="carousel">					
	
        <div class="carousel-inner">	

	<?php 
	$slides = 4;
	$products_per_slide = 3;
	
	$args = array(
	'post_type' => 'product',
	'orderby' => 'date',
	'posts_per_page' => $slides * $products_per_slide,
	'meta_query' => array(
		array(
			'key'     => '_stock_status',
			'value'   => 'outofstock',
			'compare' => '!='									
		)
	)
	
	);	
	
	$recent_products = new WP_Query( $args );	
	
	if ( $recent_products->have_posts() ) :
		$i = 0; 
		while ( $recent_products->have_posts() ) : $recent_products->the_post();
			if ( $i % $products_per_slide === 0 ) : ?>
				<div class="carousel-item <?php if ( $recent_products->current_post == 0 ) : ?>active<?php endif; ?>">
					<div class="row">
			<?php endif; ?>
						<div class="col-sm-4">
							<a href="<?php the_permalink() ?>"><?php echo woocommerce_get_product_thumbnail(); ?>
							<p class="mt-3 text-truncate text-truncate--2"><?php the_title(); ?></p></a>
						</div><!--/.col-sm-4 -->
			<?php if ( $i % $products_per_slide === $products_per_slide - 1 ) : ?>
					</div><!--/.row -->
				</div><!--/.carousel-item -->
			<?php endif; ?>
		<?php $i++; 
		endwhile;
		?>									
		<?php if ( $i % $products_per_slide !== 0 ) : ?>
					</div><!--/.row -->
				</div><!--/.carousel-item -->
		<?php endif; ?>								
	 <?php wp_reset_postdata(); endif; ?>
	</div><!--/.carousel-inner -->	
	
	<div class="carousel-controls">
		<a role="button" class="me-1 reverse-image" data-bs-target="#recent-products" data-bs-slide="prev"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2 12l-4.5 4.5 1.527 1.5 5.973-6-5.973-6-1.527 1.5 4.5 4.5z"/></svg><span class="visually-hidden">Previous</span>
		</a>
		<a role="button" class="ms-1" data-bs-target="#recent-products" data-bs-slide="next"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2 12l-4.5 4.5 1.527 1.5 5.973-6-5.973-6-1.527 1.5 4.5 4.5z"/></svg><span class="visually-hidden">Next</span>
		</a> 
	</div><!--/.carousel-controls -->
	
</div><!--/.carousel -->	

#recent-products .carousel-controls {
	position: absolute;
	right: 0;
	top: -46px;
}

#recent-products .reverse-image svg {
	 transform: scaleX(-1);
}