WooCommerce featured products slider automatic cycling

May 2, 2012 | Ecommerce, PHP, Time Savers, Tutorials, Wordpress | 33 comments

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. [Download not found]

A Donate Button!

33 Comments

  1. thomas

    dumb question… where do i add this code?

    Reply
    • Sean

      Hi Thomas,

      Not a dumb question at all. If you put it all in a .js file and get your theme to include it in the head section then it will just hook on and work. If you are feeling lazier than that just open up your header.php file and put around it. Should work in that case too.

      cheers
      S

      Reply
  2. djeko

    Hi Sean,

    Thanks for this little script ! It works perfectly for me 😉

    djeko

    Reply
  3. Bronwyn

    Hi Sean, this is a great idea but unfortunately I’m really new to wordpress so I have no idea where to put this code. Are you any closer to making this a plugin for us newbies?

    Reply
    • Sean

      Hi Bronwyn, no problem.. I have edited the post to include a plugin for you. Let me know how you get on.

      thanks
      Sean

      Reply
  4. Dan

    Hi Sean,

    Great plugin but I’m finding that it’s not pausing the slider when I hover over an item?

    Cheers

    Reply
    • Sean

      Hey Dan. sorry I don’t know why that might be off the top of my head. Does it pause before you add my code? I have been using it for stock Wootique so perhaps it’s not compatible with your theme?

      ta
      S

      Reply
      • Dan

        Thanks for the reply Sean.

        I’m using Woostore so I thought the base structure would be similar to Wootique. I’ve just increased the rotate time to give users a chance to check out the products instead as I’m quite newbie to all this.

        Reply
  5. kim

    Dear Sean..
    Thanks for your plugin. I have install and activated it into my website using Wootique theme, but still featured product image not appear in the flipper below the menu..

    have you any suggestion to make this work?

    Reply
    • Sean

      Hey Kim.. Sorry I don’t understand what you mean. The JS supposed to passively extend the scroller/flipper.. It doesn’t do anything to the images?

      thanks
      Sean

      Reply
  6. Rocket Robin

    Hi Sean,
    This [plugin worked awesomely good for me. Thanks for your valuable contribution. Now, what I need to fix is that when I hover over an item in the slider, there is a flipcard action and on the reverse side of the flipcard, the price states FREE! instead of the price of the item, and for the life of me, I can’t figure out how to edit this… any thoughts… Please go ahead and look at my site if you have time and see what I mean.
    Anyway, thanks very much again for the autocycle, it’s amazingly awesomely good… wait, I already said that, sort of…

    Reply
  7. Tillie

    I would love to be able to control how fast the slider moves and how many seconds it pauses for.

    I found some numbers that I changed which I think controls the pauses, but i want it to slide just a little slower and I don’t know how.

    But either way, I’m appreciative of your work thus far, thank you so much!

    Reply
    • Sean

      Hi Tillie, for that you would need to find the actual jQuery which runs the slider. All this code does it triggers it really.

      ta
      S

      Reply
  8. Jeremy

    Hello, I was curious if there was a way to have it scroll, just one product at a time… and not by “sets”?

    Reply
    • Sean

      Sorry Jeremy this code simply uses JS to press a button which is hidden so the functionality of the original slider can’t be changed. You could add a custom product slider easily enough and you wouldn’t need to use this code I suppose.

      ta
      S

      Reply
  9. Vinay

    Hi,
    Can this work with Mystile theme? It has static featured products? I tried but it didn’t work. How do I change the featured product to autoscroll?

    Thanks

    Reply
    • Sean

      Hi Vinay,

      The slider is different on the Mystile theme. I think you might find a products scroller for WooCommerce on codecanyon or something. That will be by far your best bet for only a few dollars spent.

      Let us know if you find one and rate it for me. I am keen to offer alternative recommendations to my readers..

      thanks
      Sean

      Reply
  10. TNB

    This is great, but it changed all my prices to FREE – I deactivate it but still prices are FREE – please can you advise… :/

    Reply
    • Sean

      This plugin is not capable of changing your prices as it is a bit of JS to get a slider moving. I suggest your issue is elsewhere.

      Reply
  11. Yoga Armonia

    Hi Sean, thanks for sharing the plugin.
    Unfortunately it didn’t work to me, I’ve installed and activated it but the featured products at bottom is still stopped. Any advice is highly appreciated 🙂

    Regards.

    Reply
    • Sean

      Hi Yoga,

      Sorry to hear that. The plugin worked with the version of Wootique at the time which was a year ago so if it doesn’t work now then they might have changed something. Alternatively you might not be using Wootique 🙂

      ta
      S

      Reply
  12. Elyse

    Hi Sean, thank you for creating this plugin. Is there anyway to loop the slider instead of reversing it? Or if images can be random based on the featured products one select, that would work great.

    Reply
    • Sean

      Hi Elyse, thanks for you feedback. Sadly the plugin is designed to simple trigger the buttons on the slider so extending the functionality isn’t really a small job. Hopefully this helps you out a bit.

      Ta
      S

      Reply
      • Elyse

        Thanks for getting back to me Sean.

        Reply
  13. Elliot

    FYI. If adding to another theme take the div from line 36 in wootique index.php.

    And corresponding css from style.css

    Reply
  14. Aleksandr

    Hi!
    This theme used jqueryUI jcarousel plugin.
    If you find file jquery.jcarousel.min.js (in this folder wootique/includes/js/) you can fix your problem.
    Just change this options
    auto:1 (in seconds),
    wrap:”both”,

    Good luck!

    Reply
  15. Stanislav

    Hi Sean,

    I’m trying to import the plugin into my website. After successfull installation of the plugin still automatic cycling on featured images not working. How to setup the featured images to use your code?

    Thank you in advance.

    Reply
    • Sean

      Hi, it only works with Wootique? could that be it?

      Reply
  16. Zack

    Thanks sean.
    I’ve been looking this for along time. Really helpful and work like charming.

    Reply
  17. andy

    great! thanks a lot

    Reply
  18. Syed

    Hi,

    Thanks for your this great tutorial. Can you please guide me how I may be able to increase the number of images to appear in feature images slider in the wootique theme?

    Reply
  19. Ashley J. Saunders

    Thanks Sean for the Plugin. I uploaded it and it works just great 🙂

    Now to solve the blurry imgs on the featured product slider!

    Thanks again buddy!

    Reply
  20. Kish

    Excellent. It worked great. Thank you very much.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

CommentLuv badge

Stay in touch!

Page Builder Cloud

Page Builder Cloud

A truly universal template library for WordPress Page Builders.

Page Builder Recommendation

Elementor Banner

We are BIG fans of the Elementor page builder. Give it a look!

About this site and Sean Barton

Picture of Sean
Sean Barton is a Freelance PHP Website Developer in Crewe, Cheshire. He is a Wordpress and CMS/Framework specialist and Co-Founder of Page Builder Cloud.
This site was set up in 2008 as a tutorial and scripting resource for the PHP language and Wordpress.
Find out more about Sean on the About Me page or use the Hire Me page to get in touch. For more information about Sean's work take a look at the Portfolio

Our Services

  • Wordpress plugin/theme development
  • Divi specialist
  • Ecommerce (Woocommerce, WPSC, Shopify, Magento)
  • PSD to Wordpress theme conversion (Responsive)
  • Website design work (Banners, Logos, Full Site, etc)
  • Website analysis (security, usability, SEO)
  • API Integrations (InfusionSoft, SalesForce, Ontraport, Customer Thermometer, etc..)
  • Wordpress consultancy & expert advice
  • Crisis support
  • Website hosting

The main services offered are Wordpress based although we do a great deal of technical programming for bespoke systems. From troubleshooting, extending frameworks, finding bugs to writing them from scratch.

Find out more by looking through our past projects or get a quote.

Be the first to hear about new products/updates!

This is a mailing list for those people interested in being told when we release a new product (Divi plugin or Theme).

We shall also use this list to let you know about product updates and releases.

You have Successfully Subscribed!