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">	

	<?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);
}

How much does a website cost?

This is a question that we try not to answer over the phone or before going through a web design brief thoroughly. The cost of a website is determined by quite a few factors that include design time, the platform used and functionality involved.

If we’re pricing a website for a large business we take into account discovery meetings, wireframing, design visuals, custom functionality, fixing bugs and so on. The hours worked would then be reflected in the price.

On the other hand, if a startup gets in touch wanting a quick online web presence we can usually price that straight away as we know what’s involved.

how much does a website cost

To give a general idea of costings, a small business website could be priced at anything from £550 to £2000, and a bespoke website with custom features will usually start at £2500.

You can learn more about our web design process and services by clicking the following links: Website Design & Development, WordPress Websites, eCommerce stores.

Or if you have a project you’d like to discuss complete the form on our Contact Us page to give us an overview and we can set up a call to go over the available options.

Illustration: Eleanor Wright

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.