I have just spent a few hours looking at the dire attempts at making a product slider for WooCommerce. In the end I decided I couldn’t justify even $12 for a premium ‘effort’ on account of it being a bit dire. It seems these days people will cough up for things just because they are paid for on the assumption that because they had to part with some of their hard earned it’s going to be any good. Anyway moving on…

I found the fabulous Wootique theme that is offered as the general purpose theme from WooThemes contains a featured products flipper at the top as an option. It looks great and works with WooCommerce already so why not just make that autocycle? So I did…

Wootique Featured product flipper

The following block of Javascript/jQuery will cause the slider to cycle on every two seconds and when it gets to the end it will reverse direction and start in the opposite direction. Rinse and repeat…

I also added some code to detect when your mouse is hovering over the slider to pause it so it doesn’t carry on sliding whilst you are reading or studying one of the product images.

I shall make the entire thing into a plugin at some point but for now this works beautifully with Wootique or any Woo Theme with the same flipper at the top.

The Code

var hoverpause = 0;

jQuery(document).ready(function () {
    sb_timed_cycle('next');

    jQuery('#featured-products .jcarousel-container').hover(
	function () { hoverpause = 1; },
	function () { hoverpause = 0; }
    );
});

function sb_timed_cycle(direction) {
    setTimeout( function() {
	if (!hoverpause) {
	    if (direction == 'next') {
		if (jQuery('#featured-products .jcarousel-next').attr('disabled') != 'disabled') {
		    jQuery('#featured-products .jcarousel-next').click();
		} else {
		    direction = 'prev';
		    jQuery('#featured-products .jcarousel-prev').click();
		}
	    } else {
		if (jQuery('#featured-products .jcarousel-prev').attr('disabled') != 'disabled') {
		    jQuery('#featured-products .jcarousel-prev').click();
		} else {
		    direction = 'next';
		    jQuery('#featured-products .jcarousel-next').click();
		}
	    }
	}
	sb_timed_cycle(direction);
    }, 2000 );
}

The File
I have written this into a simple, just activate, type plugin for those that prefer this to theme integration. SB Woo Slider Auto Cycle (701 bytes)

Related posts:

1. Plugin SB Nivo Slider – guess what this one does?
2. WooCommerce removing the reviews tab
3. Adding your own WooCommerce Tabs simplified step by step
4. Editing WooCommerce default product column count

• Previous Entry: Tortoise IT Ltd is now open for business
• Next Entry: Editing WooCommerce default product column count