In this post, you’ll see how to create a WooCommerce product slider to display your WooCommerce store’s products. Then, you’ll attach the slider to the end of your Posts. The second part of this will be specific to the Genesis Framework, but can be used with any theme by adding the code to the appropriate template file.
As an e-commerce website owner, one of the most important ways to market your store is through content marketing – providing valuable content for your users. While content marketing must be useful and provide value to the reader, you also need to maximize exposure for your products or services. Content marketing serves to bring the reader to your website, then you need to draw attention to your products to convert the reader into a paying customer.
One method e-commerce websites can employ is displaying products in their content. Obviously, linking to various products directly in the content of a blog post, for example, is one way to go. However, if you get too carried away with this, customers will start to see through it – your post will come off as more of a sales pitch than a resource. Instead, you may want to consider a slider to display your products at the end of a post.
Creating the WooCommerce Product Slider
First, let’s create the product slider. Since we’re using WooCommerce for our e-commerce capabilities, we’ll need to determine how we want to query our products. Which products do we want to retrieve and display to the reader? For this project, we’ll query the top 5 selling products. In the slider, we’ll show 3 at a time, with the other two being visible when the slider is scrolled. When all is finished, our product slider will look like this.
The following code should go in your child theme’s functions.php.
<?php
/**
* Retrieve top selling products
*
* @param (int) $posts_per_page - Number of products to retrieve
* @return (array) Product posts
* @author UltimateWoo https://www.ultimatewoo.com
*/
function uw_woocommerce_get_top_selling_products( $posts_per_page = 5 ) {
$args = array(
'post_type' => 'product',
'posts_per_page' => $posts_per_page,
'meta_key' => 'total_sales',
'orderby' => 'meta_value_num'
);
$products = get_posts( $args );
return $products;
}
/**
* Enqueue Slick JS assets
* @author UltimateWoo https://www.ultimatewoo.com
*/
function uw_woocommerce_product_slider_scripts() {
// Don't enqueue if not on single posts
if ( ! is_single() ) {
return;
}
wp_enqueue_script( 'slick', get_stylesheet_directory_uri() . '/js/slick.min.js', array( 'jquery' ), '1.8.0', true );
wp_enqueue_script( 'slick-init', get_stylesheet_directory_uri() . '/js/slick-init.js', array( 'jquery', 'slick' ), '1.8.0', true );
wp_enqueue_style( 'slick-theme', get_stylesheet_directory_uri() . '/css/slick.css' );
}
add_action( 'wp_enqueue_scripts', 'uw_woocommerce_product_slider_scripts' );
/**
* Output the product slider
* @author UltimateWoo https://www.ultimatewoo.com
*/
function uw_woocommerce_product_slider_markup() {
// Get out if not a single post
if ( ! is_single() ) {
return;
}
?>
<?php $products = uw_woocommerce_get_top_selling_products(); ?>
<div class="product-slider">
<h2 class="slider-title">Our Top Sellers</h2>
<?php foreach ( $products as $product ) : ?>
<?php $_product = wc_get_product( $product->ID ); ?>
<div id="product-<?php echo $product->ID; ?>" class="product-slide">
<a href="<?php echo get_permalink( $product->ID ); ?>" class="product-link">
<img src="<?php echo get_the_post_thumbnail_url( $product->ID, 'full' ); ?>" alt="" class="slide-image aligncenter">
<h3 class="slide-title"><?php echo $product->post_title; ?></h3>
<div class="slide-price"><?php echo $_product->get_price_html(); ?></div>
<a href="<?php echo get_permalink( $product->ID ); ?>" class="slide-button">View Item</a>
</a>
</div>
<?php endforeach; ?>
<div class="previous-slide">
<svg enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline fill="none" points="15.5,21 6.5,12 15.5,3 " stroke="#000000" stroke-miterlimit="10" stroke-width="2"/></svg>
</div>
<div class="next-slide">
<svg enable-background="new 0 0 24 24" id="Layer_1" version="1.0" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline fill="none" points="8.5,3 17.5,12 8.5,21 " stroke="#000000" stroke-miterlimit="10" stroke-width="2"/></svg>
</div>
</div>
<?php }
add_action( 'genesis_after_entry', 'uw_woocommerce_product_slider_markup', 5 ); In this code, we’re doing a few things:
- Creating a function,
uw_woocommerce_get_top_selling_products(), that retrieves a given number of top selling products. It sorts the products based on number of sales. It takes one parameter (number of products to fetch), and returns an array of Product posts. - Enqueues the necessary scripts and styles for Slick.js. It loads the slick.min,js, slick.css, and slick-init.js files. It only loads the files on single posts – you can change this to fit your needs.
- Adds the slider output after single post entries. The markup also includes custom previous and next arrows, which will be covered in a second.
Next, download the Slick.js package from Github. There’s a minimum of 2 files you’ll need to copy to your child theme: slick/slick.css (copy this to the css folder of your child theme), and slick/slick.min.js (copy this to the js folder of your child theme).
Then you’ll need to create a Slick initialization file, slick-init.js. This file is responsible for initializing the slider, and adding its settings. Paste the following into this file, then upload it to the js folder of your child theme.
jQuery(document).ready(function($){
$('.product-slider').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 1,
slide: '.product-slide',
prevArrow: $('.previous-slide'),
nextArrow: $('.next-slide'),
// centerMode: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
}
]
});
}); In the initialization, we tell Slick.js that it should apply to the .product-slider class. It shows dots below the slider, does not loop over, transitions between slides at 300ms, shows 3 slides/products at a time, scrolls by 1 slide/product, tells it that each individual slide has a class of .product-slide, sets the previous/next arrows to the HTML elements we added to the markup above, and defines how many slides to show at a few different breakpoints (this helps with responsive layouts). You can customize these settings anyway you want – refer to the Slick.js documentation page for available settings.
Lastly, add some styling for the slider and slides. Add this to your child theme’s style.css.
.product-slider {
position: relative;
margin: 50px 0 100px !important;
}
.product-slide {
padding: 10px;
text-align: center;
-webkit-transition: transform .3s;
transition: transform .3s;
}
.product-slide:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.product-link {
display: block;
}
.slide-title {
color: #000;
}
.slide-price {
color: #000;
}
.slide-button {
display: inline-block;
padding: 10px 20px;
margin: 10px auto;
background: #000;
color: #fff;
}
.slide-button:hover {
background: #5533ff;
color: #fff;
}
.previous-slide,
.next-slide {
width: 25px;
position: absolute;
top: 50%;
}
.previous-slide:hover,
.next-slide:hover {
cursor: pointer;
}
.previous-slide {
left: -50px;
}
.next-slide {
right: -50px;
}
.slick-dots li button:before {
font-size: 20px;
} And that’s all. You now have a WooCommerce product slider that displays top selling products, and appends the slider to display after entries in a Genesis child theme. Go have fun with it, and customize the code to build something awesome!
Credits
Slick.js
Previous and Next Arrow SVGs (project removed from http://icons8.com/android-L/)
