How to Code a WooCommerce Featured Products Slider in Your Theme

If you’re curious about how to add a slider showcasing Woocommerce featured products on the shop page of your theme, you’re in the right place.

The slider I have in mind is not a WordPress slider plugin, but a desktop and mobile optimized jQuery plugin called bxSlider, designed and built by Steven Wanderski.

What You Need to Follow Along

If you’re planning to code along with me, you need the following set up.

  • A local WordPress installation.
  • The Woocommerce WordPress plugin installed and activated. If you’re going to add the slider to the Shop page, configure Woocommerce to add this page to your website.
  • A code editor. I use Brackets, but you’re free to use your favourite one, it won’t make any difference to the workflow in this demo.
  • The bxSlider jQuery plugin files installed somewhere on your hard drive.
  • A WordPress theme of your choice. For simplicity’s sake, I’m going to use the current WordPress default theme, Twenty Fifteen.

If your theme is not Woocommerce-compatible, follow these instructions on how to add Woocommerce theme support and you’ll be good to go.

Creating a Child Theme

If you’re developing your own Woocommerce theme, you can skip this step. However, I’m customizing an existing theme, therefore creating a child theme is the first step for me to take. This way, whenever an update of the Twenty Fifteen theme is released, I’ll be able to apply it to my install without losing any of my customizations.

Here are the steps you’ll need to follow to create a Twenty Fifteen child theme.

Creating the Child Theme Files

Inside the wp-content/themes directory of your WordPress installation add a new folder. I called mine twentyfifteen-shop. This is your child theme’s main folder.

Next, add a style.css file and a functions.php file inside your newly created child theme folder.

Add a folder for your JavaScript documents — I called mine js. Also, create a file inside the js folder and call it scripts.js Finally, unzip the bxSlider archive folder and paste the unzipped folder into your child theme’s folder. Here’s what your child theme’s file structure should look like now:

  • twentyfifteen-shop

    • bxslider

      • images
      • jquery.bxslider.css
      • jquery.bxslider.js
      • jquery.bxslider.min.js
    • js

      • scripts.js
    • functions.php

    • style.css

Adding Code to style.css

The required file in a WordPress theme is style.css. Because this is a child theme, the comment block at the top of the document looks a bit different from the parent theme’s.

/*
 Theme Name:   Twenty Fifteen Shop
 Theme URI:    http://yourwebsite.com/twentyfifteen-shop/
 Description:  Woocommerce demo on Twenty Fifteen Child Theme
 Author:       Maria Antonietta Perna
 Author URI:   http://mariaantoniettaperna.com
 Template:     twentyfifteen
 Version:      1.0.0
 Tags:        
 Text Domain:  twentyfifteen-shop
*/

The most crucial bit of information in the comment block above is Template: twentyfifteen. This snippet tells WordPress that this is a child theme of the Twenty Fifteen theme.

Turning a Woocommerce Product into a Featured Product

You can easily spot a Woocommerce featured product from the color of the star icon on the products list in your Admin panel. Click the Products menu link — here’s what a featured product looks like:

Woocommerce featured products in Admin panel
Woocommerce featured products in Admin panel

To turn a product into a featured product, open the product post for edit. Locate the Publish box on the top right of the screen, expand the Catalog visibility link and check the Featured Product checkbox. Click OK, click Update and you’re done.

Woocommerce featured product metabox
Woocommerce featured product metabox

If you haven’t added any products yet, just enable the Featured Product option before saving the new product.

Go back to the products list and check the star icon on your featured product. Does it look right?

Tackling functions.php

Next, open functions.php in your code editor. You’ll need to accomplish the following tasks:

  • tell WordPress which stylesheets and scripts your website needs and in which order you want them loaded in the browser. In WordPress language this is called enqueuing stylesheets and scripts;
  • coding the function to add the jQuery slider to the Shop page and hooking it to the woocommerce_before_main_content action hook.

Enqueuing Stylesheets and Scripts

When you add stylesheets and JavaScript files to your WordPress website, avoid adding <link /> and <script> tags to the <head> section of the header.php file.

Instead, use the appropriate wp_enqueue_style() and wp_enqueue_script() functions and hook them to the wp_enqueue_scripts() action hook.

In the Twenty Fifteen Shop child theme, you need to enqueue the following files.

  • The parent theme’s stylesheet, if you’re following along using a child theme.
  • The bxSlider stylesheet.
  • Your theme’s or child theme’s stylesheet.
  • The bxSlider’s stylesheet indicating jQuery as dependency (bxSlider needs jQuery to work, therefore you need to tell WordPress to load its copy of the jQuery library before loading the bxSlider script).
  • Finally, your theme’s or child theme’s JavaScript file.

Here’s the code.

<?php
function twentyfifteen_shop_enqueue_styles_scripts() {

  //Enqueue parent stylesheet
  wp_enqueue_style( 'twentyfifteen-style', get_template_directory_uri().'/style.css' );
	
 //enqueue box slider css
 wp_enqueue_style( 'boxslider-style', get_stylesheet_directory_uri().'/bxslider/jquery.bxslider.css' );
	
 //enqueue theme css
 wp_enqueue_style( 'twentyfifteen-shop-style', get_stylesheet_directory_uri().'/style.css' );
	
 //enqueue box slider js
 wp_enqueue_script( 
  'boxslider-script',
  get_stylesheet_directory_uri().'/bxslider/jquery.bxslider.min.js', 
  array('jquery'), 
  '', true 
 );
	
 //enqueue theme js
 wp_enqueue_script( 'twentyfifteen-shop-script',
   get_stylesheet_directory_uri().'/js/scripts.js', 
   array(), 
   '', true 
 );
}

add_action( 'wp_enqueue_scripts', 'twentyfifteen_shop_enqueue_styles_scripts' );

If you’re not using a child theme, you won’t need to enqueue the parent theme’s stylesheet. However, you’ll need to replace get_stylesheet_directory_uri() with get_template_directory_uri().

Coding the Slider

Still in functions.php, below the snippet you just added, enter the code to build the markup for the slider.

function twentyfifteen_shop_slider() {

 //array of arguments
 $args = array(
  'post_type' => 'product',
  'meta_key' => '_featured',
  'meta_value' => 'yes',
 );
 
 //are we on the shop page? If so...
 
 if( is_shop() ) {
 
   //build the query
   $query = new WP_Query( $args );
		
   //if the query has posts, run the loop
   if( $query -> have_posts() ) { ?>
  
    <section class="featured-products">
     <ul class="bxslider">
    <?php
    	while( $query -> have_posts() ): $query -> the_post();?>
     	<li id="post-<?php the_ID(); ?>">
       <?php if( has_post_thumbnail() )	{?>
        <a href="<?php the_permalink(); ?>">
         <?php the_post_thumbnail( 'full'); ?>
          <span><?php the_title(); ?></span>
         </a>
        <?php } ?>
       </li>
      <?php endwhile; ?>																		
     </ul>
    </section>
   <?php
   wp_reset_postdata();
   } 
  }
}
	
//hook the function to the appropriate Woocommerce action hook
add_action( 'woocommerce_before_main_content', 'twentyfifteen_shop_slider' );

You’re free to build the markup enclosing the slider any way you want. However, make sure the <ul> element has a class of .bxslider. You’ll use that class later to reference the slider in your jQuery code.

Here are the important points in the code above.

  • You enclose the relevant code inside a function.
  • Inside your function, prepare a set of arguments to use in your WordPress query. These are the arguments you’ll need to retrieve the Woocommerce featured products list.
    $args = array(
     'post_type' => 'product',
     'meta_key' => '_featured',
     'meta_value' => 'yes',
    );				
    
  • Next, you build your query and check if it contains any posts.
    $query = new WP_Query( $args );
     if( $query -> have_posts() ) { ?>
    
  • If the query has posts, run the loop and build the markup for the slider.
    while( $query -> have_posts() ): $query -> the_post();?>
      ... slider markup here					
    
  • Reset the loop.
    wp_reset_postdata();
    
  • Finally, hook your function to the appropriate Woocommerce action hook. Because I want my slider to appear at the top of the page, before the list of products, I choose the woocommerce_before_main_content action hook.
    add_action( 'woocommerce_before_main_content', 'twentyfifteen_shop_slider' );					
    

That’s it, you’re done with functions.php.

Initializing bxSlider with jQuery Code

Open scripts.js in your code editor and enter the snippet below.

(function($) {

 //initialize box slider
 $('.bxslider').bxSlider();
	
})(jQuery);

Here’s what the snippet above does.

  • The code encloses the jQuery script inside a no conflict wrapper. If other scripts in your WordPress website use the $ alias besides jQuery, your jQuery code will not conflict with them.
    (function($) {
    			
      //your jQuery code here
      
    })(jQuery);
    
  • It initializes bxSlider in the simplest way, leaving all its default options. If you’d like to add your own configurations, head over to the bxSlider Options page and see for yourself what else you can do with this plugin.

Conclusion

Congratulations, your slider should now be on the Shop page of your WordPress theme displaying your Woocommerce featured products! I’ve added a few styles to style.css to improve the look of the product title, but apart from this your work here is done.

Have a go at this yourself and let me know how the code works for you 🙂
Advertisements

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s