HostGator Web Hosting

Setting Up the WooStore Home Page Image Slider

Welcome back to our tutorial series on how to build a professional eCommerce site with WordPress, WooCommerce and the WooStore theme.  In the last few tutorials we showed you how to configure the WooCommerce plugin settings, how to setup the product categories as well as how to add the first products to your WooCommerce site.  Specifically, we setup variable products which involved the usage of product attributes and variations.WooCommerce Image Slider

Today we’re going to take another step forward in the creation of our demo site (WorldCupTees.com) by showing you how to setup the WooStore image slider that appears on the home page.  The featured image slider is a great way to grab the attention of your site visitors.  The image slider is the main feature that makes the WooStore theme our favorite of all the available themes that were built specifically for the WooCommerce engine.

How to setup the WooStore Image Slider

Step 1:  WooStore Slider Settings

Start by logging into your WordPress admin and going to WooStore > Theme Options > Slider Settings.  It’s important to remember that you can always circle back and make adjustments to the slider settings at any point.  There are however, a couple simple adjustments we recommend making before uploading your home page featured image slides.

As you scroll down the Slider Settings page you’ll come to an “Auto Start” check box.  By default, that box is not checked.  We recommend checking the Auto Start box so that the image slider automatically slides on the home page.  Another recommended initial adjustment is to change the “Auto Slide Interval” from the default setting of 6 seconds to 4 seconds.  We’ve tested this on a number of our personal WooCommerce sites and have found 4 seconds to be the ideal Auto Slide Interval setting.

Step 2:  Adding the WooStore Home Page Featured Image Slides

After you’ve made the initial adjustments to the slider settings, it’s time to upload your slides.  In the WordPress admin go to Slides > Add New.  You’ll see that adding featured image slides is very similar to creating a normal blog post in WordPress.  Simply give the slide a title, description, upload the featured image slide, select the “Slider Overlay Layout”, paste in the “Slide URL” (link to where you want people to go when they click on the image) and click Publish.

You’ll need to have a minimum of two featured image slides for the slider to show up on the site.  We recommend creating at least three slides and more than that if possible.  In our opinion, more featured image slides gives your eCommerce site a better chance of holding new visitors for longer periods of time.

You can create your featured image slides using any image editing software.  We prefer Photoshop, however, there are a number of very good free programs that will work just as well.  One of the best open-source (free) image editing programs is called Gimp.  Simply do a Google search for “Gimp” and you’ll have the tool you need to make professional looking featured images for the home page slider.

Recommended dimensions for the featured image slides: 620×320 pixels

HostGator Web Hosting

66 COMMENTS

  1. Hello,

    I am having a slight problem. When I go into my theme settings I have no slider set up. I cannot find my home page with in my pages at all. My site was built by someone else so I am not sure of what is happening.

    I hope you can help me figure it out. I have followed your video’s and
    they are a great help. Thank you.

    I am also having an issue with the logo picture being cut off. I played around and it is not the same as before. I have back-up files but I’m not sure how to use them.

    Hope to hear back from someone soon.

    Thank you,

    Zari’s Clothing

    • Hi Zulieka,

      Thanks for the positive feedback regarding our videos. I looked at your site and see that the logo is cut off. Have you tried resizing it in an image editing program like Photoshop or Gimp? The recommended logo size for the WooStore theme is: 306×76 pixels. If you can re-size the logo to be closer to those dimensions it should solve the issue.

      Regarding the home page slider. You’ll need to first create your slider images and upload at least 2 slider image before it will show up. It will not work with only 1 slider image. Please take a few minutes to watch our “WooCommerce Image Slider Setup” video again. It should help to answer most of the questions you have… http://uploadwp.com/woocommerce-image-slider-setup/

      Regarding organizing your Pages / top Navigation… I recommend using a free plugin called “pageMash”. pageMash allows you to hide pages that you do not want to show up in the main navigation. Also, it allows you to control the order which they show up on the site.

      I hope this helps and good luck with the site.

      Adam

  2. Hi,

    Your post about TheThe Image Slider is one of the only ones on the internet that addresses the problem of the slider not working after a URL change:
    http://www.916networks.com/wordpress-2/the-the-slider-not-showing-images-after-wordpress-site-move/

    I am having the same exact problem. I followed the instructions on your post and the link, too. It still does not work.

    Could you give me some direction on this problem?

    Here is the site:
    http://littleguylegal.com

    Thank you.

    • Hi – I really like your site – It’s a very clean / professional design. Regarding the image slider not working… It’s difficult for me to pin-point the issue without seeing the setup in the WP admin but a few things to check are:

      1. Do you have more than 1 Slide? You need at least 2 slides for the image slider to work.

      2. In the Slider Settings… Make sure that the “Auto Play” check box is checked.

      3. Check the image URL for each slide and make sure the slider image URL’s have been updated to reflect the new URL – It could be that the slider image URL’s still have the old URL that might not exist anymore which is why they don’t show. If that is that case, you’ll simply need to re-upload each slider image so that the image have the new URL. The same goes for the image “Link URL”.

      I hope this helps give you some ideas of what might be causing the issue. If not, please feel free to contact me via the Contact page on UploadWP.com and I can take a closer look.

      Thanks for contacting me and best of luck with your site going forward.

      Adam
      UploadWP.com

  3. Many Thnx for this tutorial, it really just made everything simple. Now I can send visitors to my ite with pride 🙂 The site was looking very dull without the Image Slider.

    Thnx guys, much appreciated!!!

  4. Hi, Iam starting my webstore with woostore but evethough I upload high resolution pictures they dont look good on the slider, I tried modifying and uploading lower pictures but still dont look good. Why is this?

    Love your site!

    My site is http://getyourgi.com/

    Please let me know.

    Thanks.

    • Hi – I’m glad you like the site and that the tutorials have been helpful. Regarding the slider images… Are the images you’re using in the slider smaller than the dimensions of the slider? It’s always better to use images that are Larger than the image slider. Making images smaller is fine and won’t hurt the quality of the image. However, trying to make a small image larger (so that it fits in the slider) will make it look bad. So I recommend starting with larger images instead of trying to make small images larger. Please let me know if that makes sense.

      Adam
      http://UploadWP.com/

  5. Thanks for taking the time to reply. I have tried this before and didnt work, now it does work. I probably just burned out after working all day with the theme. Thanks so much.

  6. Hi.

    I am starting my website with woostore. But i can’t add any slide at my store… Where is my slider? How can i show slider at my homepage? Please let me know. Thank you.

    My Site samsung.simkilidikaldir.com

    • Hi – If you’ve installed WooCommerce and the WooStore theme then here is how to locate your home page image slider settings… In the WordPress admin go to: WooStore > Theme Options > on the Theme Options page click on “Slider Settings” > update the slider settings however you’d like (I recommend setting the slider height to 320) > now that you’re home page image slider settings have been updated, the next step is to Add New Slides and here’s how to do that…

      In the WordPress admin go to “Slides” (located on left side-bar of WP admin) > click “Add New” > Create your slide and click Publish > repeat this step for as many slides as you’d like to display.

      Important Note on the WooCommerce Image Slider: You need to have at least 2 slides created for the image slider to show up on the site. If you’ve only created 1 slide the WooCommerce image slider will not be visible on the site.

      Please let me know if this helps.

      Adam
      http://uploadwp.com/

  7. hi, do you guys tried to add a slider ( i ‘ve tried a few ) to the Mystile wootheme ( + woocommerce )…seems like it is a hard nut to crack for me, any help ? ty

    • Hi – From what I can tell, the Mystile theme for WooCommerce does not have an image slider built in like the WooStore theme (used in this tutorial) does. However, there is an excellent free image slider plugin that I highly recommend giving a try. It’s called “The The Fly Image Slider” and I created a tutorial a while back on it. You’ll find my tutorial on “The The Fly Image Slider” here…

      http://uploadwp.com/the-the-fly-image-slider/

      I hope this helps and thanks for leaving a comment.

      Adam
      http://uploadwp.com

        • Hi Eddie – I’d be happy to take a closer look at it. Please send me a message through the Contact form on Upload WP with your site info and I’ll look at it asap. Thanks,

          Adam
          p.s. It will probably be a few days before I can take a closer look because I’m out of town visiting family. But if you want to send me your site info via the contact page I will get around to it hopefully by this weekend.

          • Hi,

            I want to do same thing with my website which is not live at this time. I want to put free slider on the place of banner on home page. I am using mystile theme. Is there any free plugin or any method? help me plz.

          • Hi,
            That help is great for slider plugin you suggested me.

            What actual problem I am facing is how to change the size of my shop homepage default slider just like you showed in the above post to change the size of it under WOOSTORE settings.

            I donot have WOOSTORE. How to get a WOO STORE in my WOOCOMMERCE PROFFET THEME?

            Do I have to buy WOOSTORE SUBSCRIPTION ?

            How to change my theme shop hompage default template slider size when not having the WOOSTORE option in my wordpres dashboard?

            Best,
            Geva

          • Hi Geva,

            Thanks for your question. WooStore is and actual theme and the slider in this tutorial video comes with the WooStore theme. It looks like you're currently using the Proffet theme which is why you don't see an option for the slider. If you go to WooThemes.com you can purchase the WooStore theme there. Or, if you want to stick with your current theme then I would suggest using an image slider plugin such as SlideDeck 2 or the Fly Image slider. We have tutorials on both. Here's the link to view them…

            SlideDeck 2 tutorial: http://uploadwp.com/enhance-your-wordpress-site-with-slidedeck-2/

            The Fly Image slider: http://uploadwp.com/the-the-fly-image-slider/

            Please let me know if this helps answer your questions and point you in the right direction.

            Thanks,

            Adam

  8. I have a question. I have been using an online photo editor called pixlr.com. when I edit a photo into a blank background, set to canvas size 620 x 320 and merge the layers together and upload it to my slider it wont show up. Why is this??

    • Hi Seth – Make sure to save the images as .png or .jpg. If you’ve already done that, then make sure to upload at least 2 slides. The slider won’t work with just one featured image. Also, make sure to double check the WooStore image slider settings to see if you missed anything. I hope this helps and best of luck with your site.

      Adam

  9. Hello – thank you for this very informative site, it has helped me tremendously. I am having a few issues with my slider. I have read all the posts above looking for my answer but have not found it. I have added two slides and enabled the slider feature per your tutorial videos. After running thru the steps the slides appear only at the very top and squeezed into a 1/8 inch bar across the top. I resized my images to 620×320 within the resize feature when you first upload your image into WordPress. Any ideas?

    I also have another very odd Font Size_ + on the very top right hand corner of my site. I can’t seem to locate where to remove this in WP admin. 🙁

    • Hi – Thanks for the positive feedback Luis. I just took a look at your site and it appears that you’ve solved the home page image slider issue. Please let me know if that is in fact the case. Also, I have to say that I really like the design / logo / look and feel of your site – Well done!

      WooStore Example

      • Many thanks – I have to give you credit as i watched almost all your videos on youtube. 🙂 I have a one small issue however, I have a Font Size -+ simple on the top right hand corner. How do I remove that?

        Thanks Again.

    • Luis – Here’s how to change the Widget Title fonts and font size for the WooStore theme… In your WordPress admin go to WooStore > Theme Options > Typography > check the “Enable Custom Typography” check box > scroll down to the Widget Titles section and there you can change the font size and font type.

      WooCommerce Custom Typography

      Let me know if this helps.

      Adam

  10. Hi,
    Your site is very informative and enjoyable to visit. Thank you for that.
    I downloaded Wootique and a couple of other free ecommerce themes,but I am struggling with customizing the thems.
    For example, could you tell me how do I go about changing the background colour in the slider and the side bar area(where the category appears)?.
    I would appreciate your help.
    Regards Tony

    • Hi Tony – I’m glad to hear that the tutorials have been helpful and thanks for the positive feedback. I’ve unfortunately not yet had a chance to work with the Wootique theme. However, if it’s like the WooStore theme, there is not an easy way that I know of to change the background color of the image slider or widgets section. You would most likely have to make updates to the “custom.css” file which you’d find in the WP admin by going to: Appearance > Editor > clicking on custom.css

      update custom.css file

      If you are not familiar with css, then I recommend using an outsourcing site like Fiverr.com or freelancer.com. You should be able to find a WordPress expert that can do any type of customization for very cheap on Fiverr and/or Freelancer.

      Thanks again for the support and best of luck with your site,

      Adam

  11. Hi Adam,
    Thanks for your answer. In your opinion, if I want to develop an ecommerce site for a client, what would be the best theme to use(gives you a lot of functionality)?. Also, would you consider Woocommerce the best plugin for creating an ecommerce site?
    Thanks in advance.

  12. Hi there,

    Thank you for your tutorial, i followed your instructions on the adding in the slider … but why is it that i cant click on the upload tab? when i do noting happens….the page to load the image does not appear….i can click it 10x but nothing happens ..

    Kindly advice,
    Thanks

    • Hi – May I ask what internet browser you’re using to manage your site? It sounds like it could be a browser related issue. If you’re using I.E. please try using the latest version of FireFox or Chrome and see if that solves the issue. Please let me know if this helps.

      Adam

    • Hi Luis – If you’re referring to tracking the shipping status / location of the items your customer purchases from you that info would come from the carrier (e.g. UPS, USPS, FedEx) that you choose to ship with. You would then provide the shipping tracking link (obtained from the carrier) to your customers via the Edit Order page in the WordPress admin. So after you ship the item you’ll get a tracking link. Once you have the link log into your WP admin > click Edit Order > set order status to Complete > in the Order Notes field paste the Shipping Tracking ID.

      We’re working on a detailed tutorial on this exact topic and it should be ready in the next few days so stay tuned. Thanks,

      Adam

  13. Hi Terry,

    You’ve done a fantastic job with your site and your tutorials have been a great help. I’ve only been using woo commerce for a few days and so far manged to set up a simple site. I would like to know how do I extend the slider across the whole width of the template. I found this example site so you know what im referring to

    http://www.ninjabox.co.uk/

    Chris

  14. Hi Adam, Terry,
    Just thought I’d come in and say thanks for the tutorials. I’m new to WooCommerce and have been slowly battling along. Once I found your tuts things started to pull together. I still have a bit of watching to do but it’s helping me big time. Your site’s now bookmarked.

    Very much appreciated,
    Gregor

  15. Hi there.

    I’ve watched your tutorial on Youtube about adding a logo and banner to the Mystile theme, but am having a problem with the banner – it doesn’t appear…

    I made it the same size as what you did in the video & had the same settings, but no banner.

    Any ideas ?

    Cheers

    • Hi Dazhan,

      The first thing that comes to mind is to make sure that the “Text Title” check box is Not checked. Specifically, in the WordPress admin go to Mystile > Theme Options General Settings > make sure that the “Text Title” box isn’t checked. That’s usually what trips people up when they have trouble getting the log and banner to display. Let me know if this helps solve the issue. Thanks,

      Mystile Theme Logo Not Showing

      Adam

  16. Hi Teddy,

    I found your tutorials on YouTube. Thank you for the great walk through. I have the Woo Theme “Function” and get the slider, however I am missing this “Add New” in the EP slide area.

    I have settings set to Dynamic Images ->WP Post Thumbnail and get an error message on the front page stating:
    “Please add some slides in the WordPress admin to show in the Features Slider. ”

    In other setttings the slider shows up and pulls a variety of strange sizes with an ugly black bar across it that shows the title.

    Can you please help.
    My site is http://www.enzieshahmiri.com

    Thanks,
    Enzie

    • Hi Enzie,

      I’m a dog owner (big female Weimaraner) and love your dog art prints! Regarding the issue you’re having with the WooTheme homepage slider… Have you found a solution? If not, please provide as much detail about the issue as possible so I can do my best to help. Thanks,

      Adam

  17. Hello Adam

    We had a correspondence with you on youtube and you asked that I contact you through this site. here is the page with the comments: http://www.youtube.com/all_comments?v=mPH-HOKTkAY

    I took a screen shot of my “theme options” area that shows that I have an image slider selected, but no “slider options” tab along the left side. I think it is probably something to do with the theme I am using, Wootique

    any thoughts? Maybe I need to download a plug-in slider and just deactivate the one that comes with wootique?

    • Hi Deanna,

      Thanks for your question on the Wootique theme. Unlike the WooStore theme, the Wootique theme does not have an image slider built into it which is why you’re not seeing the “Slider Options” in the left sidebar of the WordPress admin. Wootique does have a homepage featured products slider which you could use. However, it doesn’t have a full blown image slider like WooStore or Coquette. You can activate the rotating featured products slider by making at least 2 of your products “Featured” at the product detail level.

      Another free WooCommerce theme you could try is the Mystile theme. We have a full tutorial on customizing the homepage of the Mystile theme that shows how to insert an image slider. Here’s the link to view it…

      Customizing the Mystile theme Homepage

      Please let me know if this helps. Thanks,

      Adam

    • Hi – Thanks for your question.

      A good free image slider plugin you might want to look at is “TheThe Image Slider” (formerly known as TheThe Fly Image Slider). We have a tutorial on it which you can view here…

      TheThe Image Slider Tutorial

      SlideDeck 2 is a premium content slider plugin that we recently did a full tutorial on. That’s an option you might want to look at as well.

      SlideDeck 2 Tutorial

  18. Hello

    I did exactly as you said in the video and my featured image still does not show. Is there any custom coding that has to be done for this to work? Something about changing the cache folder to 777. I have not done this but will today. I literally copied your steps but it just does not show up for some reason. Please help!!!! I have the current wordpress and current woostore themes.

  19. Hi Adam,
    Thank you so much, I am trying to set up my website with woostore. Your tutorials are really amazing and helpful.

    I have question about the size of image.
    I want to change “Recent Product” the size of image on the homepage. They are too small so I want to make little bit bigger. How can I change the size of image on the homepage?

    Could you please kindly help me?

    • Hi Yun,

      Thanks for your question and for the positive feedback on our WooCommerce tutorials. Here’s how to change the size of the “Recent Products” images on the homepage of the WooStore theme…

      Log into your WordPress admin and go to… WooStore > Theme Options > Display Options > in the “Custom CSS” text box paste the following code…

      ul.products img { width:150px; height: auto; float: left; margin:0 12px 0 0; padding:0; border:0; background: none; }
      ul.products li a h3 { font-weight:bold; color:#555; font-size:14px; margin:5px 0 6px; display: block; font-family:sans-serif; }

      Here’s a screen capture of what it looks like on our WooCommerce / WooStore demo site…

      WooStore Recent Products Homepage

      You can adjust the Recent Products image size by changing the “width:150px” to whatever size you want. Just play around with it and change “150” to anything until you find the image size that works best for you. Thanks again for your question and please let us know when more come up.

      Adam

  20. Hi Adam,

    I would like to ask you how to set only 9 products will display in recent products column on my home page. I’m using woocommerce with wootique theme.

    And is it possible to change the background color of recent products column? Which the default color is white.

    Thank’s in advance 🙂

    • Hey Roy,

      Thanks for your questions. I’m not sure if there is an easy way to control the number of Recent Products that display on the homepage of the Wootique theme. I’ll go ahead and install Wootique on one of our test sites and see if I can figure it out. From what I can remember, there is not a way to control the Recent Products display from the Wootique theme options settings.

      In the meantime I’ll go ahead and publish this comment. If anyone else out there knows how to control the number of Recent Products that display on the homepage of the Wootique theme please chime in with the solution. You’ll be helping many people that are looking for the same thing.

      Thanks,

      Adam

  21. Hi Teddy Triton,
    I have bought the proffet theme of woocommerce.
    Here is the link to it.

    http://themeforest.net/item/proffet-responsive-woocommerce-theme/4047481

    My problem is that I don't have the Woostore in my WordPress Woocommerce theme at the right side nav.

    Can you help me out why is that so?
    Do I have to buy something to get this option?

    I am really in need of changing my Shop home page slide show size.

    It will do real good to me if you could help.

    Best,
    Geva Salerno

  22. Hi Adam,

    How are you? Always thank you for your effort and fantastic website. I don't know the reason the image slider pic on the main page is blurry. I searched I thought the size problem however If I change the size of 360X230 and 4608X3456 both are problem. I uploaded the two blurry images for test.

    Can you please give me an advice?

    My web is http://www.mylittlepopo.com

    Thank you,
    Yun

    • Hi Yun – I'm doing well and it's good to hear from you again. The reason your first two test images in the homepage slider are blurry is because they are too small. It looks like they both have dimensions of 300 x 225px which is smaller than the actual slider. So when they display in the slider, they are stretched out and look blurry. So to fix that, you need to start with larger original images so they don't get stretched out. For example, the last 3 images that look sharp… their dimensions are… 650x350px , 703x527px and 620x320px respectively.

      Let me know if this helps solve the issue. Thanks,

      Adam

      • IT's working now I think every time when I upload an image on slider I have to adjust size differently, right?
        Anyway Adam, you are my hero. Maybe it looks very simple thing however its' not to someone.

        Thank you always. Yun

  23. Hi Teddy,

    I'm using the theme Wootique and I would like to know if it is possible to insert the "featured products" flip slider in other page, because it only appears in the Apparience>Theme>Customize> set last entries as front page. I guess it is copying some code from the "index.php" and paste somewhere… and I want it appears in a page I create, and not like inserting this code->> [featured_products per_page="12" columns="4" orderby="date" order="desc"] because it is something else, it is not a slider and doesn't flip. At the moment my page is in localhost, when I'll finish it I'll post it to show you the final result :). Please let me know if it is possible to do and how.

    Thank you,
    Jose.

    • Hi Jose,

      Thanks for your question on inserting the Wootique theme featured products slider functionality into a page other than the Home page. Most likely it is possible to do, I'm just honestly not sure how. So I'm going to post your comment and ask for help on this one. When you're site is live Jose, please do share it with us.

      If anyone in the Upload WP community can help Jose it would be greatly appreciated and chances are excellent you'll be helping many other people that have the same question.

      • Thank you very much for answering, I hope someone in the community could help with it, I saw in the code the part for featured products slider, but I don't know how could I move to other page to make it works, I'm sure that someone who knows about php could do it easily, it is in the "index.php", I'll be very grateful. Sure, when I'll finish my site I'll post the link 😉

        Jose.

      • Hi Teddy, I finished my website although finally I couldn't add this featured products slider into the home page as I wanted, but anyway I like the final result, I post you here the link to my website as I told you, although it is to order oranges only in Spain, what a pity hehe:

        http://www.naranjasdeprimera.com

        Saludos! 🙂
        Jose.

  24. I have slider set up on my site but I would like the text to fill up the white space beside the slider on right side instead of being all underneath. I need to know this before I can continue setting up my home page. Any suggestions will be appreciated. David

  25. Hi. I am building my own website with wordpress. I have installed woocommerce and my theme is mystyle. I cant find any slider options. I have feature option but that doesn’t seem to work either. Can u tell me wt I’m doing wrong. I really want the slider or the feature image to work. Plz help.

LEAVE A REPLY