WooCommerce recent products slider without a plugin

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.

recent products slider

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

	$slides = 4;
	$products_per_slide = 3;
	$args = array(
	'post_type' => 'product',
	'orderby' => 'date',
	'posts_per_page' => $slides * $products_per_slide,
	'meta_query' => 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++; 
		<?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 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>
	</div><!--/.carousel-controls -->
</div><!--/.carousel -->	
#recent-products .carousel-controls {
	position: absolute;
	right: 0;
	top: -46px;

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

Sync your eCommerce store with Mailchimp

If you are running an eCommerce store powered by WooCommerce, a free plugin you could be using to help develop your eCommerce marketing strategy is Mailchimp for WooCommerce.


Mailchimp is an award-winning email marketing service that you can use for free if you have less than 2,000 contacts, making it perfect for small growing businesses or stores that are just starting out.

The first thing you need to do is sign up for a Mailchimp account which takes less than a minute and doesn’t require a credit card. As soon as that’s done, you need to install the Mailchimp for WooCommerce plugin on your WordPress site.

The plugin automatically syncs your customers and their purchase data with your Mailchimp account, allowing you to easily send out targeted email campaigns.

Sending out emails is relatively easy. Once the sync is completed, you view your audience (subscribers) through Mailchimp’s intuitive dashboard and then use the drag and drop builder to create emails for your email campaign. After you’ve sent a campaign, you can view engagement stats for open and click rates.

Email marketing is still the most effective marketing tool as it tends to have a higher return than other marketing channels, and Mailchimp makes it easy to market your business.

Looking for help with email campaigns? We can provide WordPress and Mailchimp support as and when needed. Why not get in touch and tell us about your business and its goals.

WooCommerce abandoned cart recovery

Shopping cart abandonment is not a new phenomenon for eCommerce stores. According to the Baymard Institute the average online shopping cart abandonment rate is as high as 69.80% and just a natural consequence of how people use eCommerce sites.

Their latest quantitative study cites a number of reasons for abandonment with the main one being online shoppers using carts like wish lists, looking for the best deals and abandoning them before checkout.

Other reasons included too high shipping costs, needing to create an account or too complicated checkout processes. The full list is below:

abandoned cart stats

So what can online retailers do to bring back users and encourage them to complete their purchase?

Besides hiring an eCommerce website developer to make design changes and rethinking fees, a popular strategy for store owners is to send out abandoned cart emails – emails that remind customers they have items in their cart and encouraging them to complete the checkout process.

If you use WooCommerce to power your WordPress eCommerce store a good abandoned cart plugin is Abandoned Cart Lite for WooCommerce.

abandoned cart plugin

The plugin has free and paid versions but the free version works just fine to capture email addresses for follow up emails.

Once you’ve installed the plugin you’ll need to decide on the kind of recovery email you want to send. There is a default email template that follows the standard WooCommerce template style, or you can add your own email code into the editor.

Next, it’s worth searching for ‘cart abandonment email best practices’ to help with subject line and copy ideas. For example, humour can have an impact on the minds of the people but is humor right for your brand? There are a wealth of posts out there dedicated to getting the best open rates and recovering lost sales.

The plugin template section has a preview and send test email function so you can check layout and content before you enable recovery mode.

There’s no such thing as the perfect abandoned cart email, so test out different subject lines, copy and sending times to see which emails convert into sales.

Track only genuine visitor carts

Open your robots.txt file and add the following lines to prevent bots crawling the Cart, Checkout and My Account pages and creating false visitor carts.

User-Agent: *
Disallow: /*add-to-cart=*
Disallow: /cart/
Disallow: /checkout/
Disallow: /my-account/

You can read more here: Track only genuine visitor carts.

Add a tagline to the storefront theme

Add a tagline to the storefront theme

If you have a WooCommerce eCommerce store and use the popular Storefront theme, a simple way to add a tagline below the logo is to use the ::after selector.

.custom-logo-link::after {
	color: #333;
        content: "award winning jeweller, writer and broadcaster";
	display: block;
        font: 400 1rem 'Oswald', sans-serif;
	margin-top: 1rem;
	text-transform: uppercase;

It’s not really an SEO friendly solution as search engines don’t care what’s inside your stylesheet, but it is a rather neat way to display the logo and tagline together.