March 11, 2020

How to set up a WooCommerce Product Slider?

Are you thinking of adding creative sliders to showcase your products/services on your WooCommerce website?

With the ever-increasing competition in the eCommerce space and with the dwindling attention spans, people do not invest time going through the long list of products. 

To keep them hooked to your WooCommerce store and to stay ahead of the curve, it helps in having a beautiful product slider on your home page that allows you to display your featured products in a manner that is visually appealing, instantly informative and attention-grabbing. 

In this article, we will take you through a detailed process of setting up a WooCommerce product slider on your store with the help of a slider plugin.

Before we begin, let’s quickly take a look at some of the benefits you stand to gain with a WooCommerce Product Slider.

Benefits of using a WooCommerce Product Slider

Employing a product carousel on your WooCommerce store may seem like a bit of a task but, honestly, it works wonders in turning your visitors into customers. Take a look:

  • Increased Engagement: Using sliders to showcase your products in a beautiful manner can increase engagement and improve the chances of your customers diving deeper into your store and sticking around longer, maybe just enough to make the purchase. 
  • Works as a great marketing strategy: Using a slider to highlight sales or discounts can help in grabbing the attention of your visitors. For eg: an online clothing store can stand out by using a product slider smartly on the homepage to display pictures of clothes that are on sale and grab the attention of their customers immediately leading to conversion.
  • Better customer experience – Mobile phones are a great invention and people are addicted. For someone browsing through your products on mobile, sliders can play a vital role in reducing their efforts of scrolling and help in providing convenience and better customer experience. 
  • Use it flexibly – Depending on the nature of your business, you can use the slider accordingly to either showcase your featured products, portfolio of designs, houses or villas, highlight your company’s vision and mission, and much more allowing you to place the slider anywhere on your website as per your convenience.

Well, these are just some of the benefits that we’ve listed, you can check out more benefits of having a product slider on your WooCommerce store.

Awesome, now that we’ve covered this aspect, let’s dive into the setting up of the product slider.

Setting up a WooCommerce Product Slider

1. Install and activate the plugin

WordPress, with its new Gutenberg editor, makes it possible for you to incorporate a carousel block by using its additional features plugin like the Co-blocks plugin. These plugins usually come with other complex layouts and features.

However, we recommend using a separate dedicated slider plugin that focuses solely on creating the best sliders for you – right from choosing different types of sliders, functionalities, editing settings, and more in order to ensure your slider looks visually appealing and eye-catching.

Now, there are several slider plugins out there that allow you to display beautiful images through a product slider but, in this article, we will be using the Smart Slider 3 plugin to set up the product slider.

The reason we recommend using Smart Slider 3:

  • Since we’ve used it, we believe it is one of the best plugin that gives you the freedom to create your own layout, allowing you to give your product slider the look you want. (Yaay!)
  • It comes with a whole lot of functionalities like 16 different types of layers, different types of sliders (video, carousel, etc.), different effects and much more making it super easy to use, design and develop slides.
  • Plus, the plugin doesn’t need you to be a coding genius to edit and create the sliders.

Well, if you’ve decided to go ahead with this plugin, then your first step will be to install the plugin. To do that follow the below steps:

  • WordPress Dashboard > Add New > Install Smart Slider 3.
Install Smart Slider 3 from WordPress Dashboard

After installing the plugin, go ahead and activate it. Once you’ve activated the plugin, move on to the next step to create a slider.

2. Creating a WooCommerce Product Slider

Wondering how to get about creating those beautiful image slideshows and attracting your customers?

Well, allow us to enlighten you 🙂

Now that you’ve installed the plugin, you should see a Smart Slider tab on your WordPress dashboard.

To create the slider, follow the below instructions:

  • WordPress dashboard > Smart Slider > New Slider.

Doing this will open up a pop-up window that’ll allow you to manage a few settings like:

  • Slider Name – This setting lets you set the name for your slider.
  • Width & Height – The plugin enables you to set the dimensions for your slider as per your convenience and as per your website model.
  • Slider Preset – You can select the slider preset (Default, full-width, thumbnail-horizontal) depending on what fits best on your website.
  • Import sample slider –  From the slider dashboard, you can also select one of the predefined templates for your slider if you feel it matches and suits your needs.

Note: There are 10 slider templates you can access with the free version but, the library has over 100 ready to use slide templates that can be accessed with the PRO version.

Create Slider on WooCommerce

After you’re done with the settings, hit ‘Create’.

Great! You’ve created a Slider on your own and that’s a step forward 🙂

Moving on to,

2.1 Creating Slides for the Slider

You should find yourself on the Slider page if you’ve successfully followed the above instructions.

On this page, you’ll be able to add 10, 20 or as many slides as you wish to according to your business plans.

Now, click on the Add Slides to create slides. It gives you the option to add images through your media library.

The best part – You can add more than one image at a time, which means you can create multiple slides at once. What a relief, isn’t it?

What’s more fascinating is that the plugin allows you to add different types of sliders like a Video slider, an empty slider, a post thereby, providing you the opportunity to showcase your products/services in the most dynamic fashion.

Creating Slides for the Slider for WooCommerce

Having done this, you can even change the order or sequence of the slides as per your needs.

Note: You can also access the Slide Library which is a pre-designed collection of slides that you can use if you wish to.

Well, that’s it! That was simple, wasn’t it?

But, it doesn’t end here though. There are certain Smart Slider settings you need to know about in order to ensure a smooth slider creation.

3. Configuring Smart Slider Settings

You will only drive a car if you know how to operate its gears and levers, i.e. if you don’t wish to crash 😛

Similarly, driving your sales through product carousels works magic when you know about its gears and levers. In this step, we will acquaint you with the slider’s settings so that you know exactly how these gears and levers function 🙂

Let’s take a look at the popular settings of the slider.

3.1 General Settings

To access the general settings, you can go to the slider page and hover to the General Tab.

Smart Slider 3 General Settings

Here you will find the basic settings of the slider:

  • Name – Don’t overlook this setting. Make sure you give a unique name to your sliders since you might have several sliders over time and it can get difficult to find which one’s been used where.
  • Alias – You can enter the alias for the sliders and use it for the shortcode/PHP code to publish the slider.
  • Control – Under these settings, you can turn on the ‘Touch and Pointer Drag’ option that will allow your users to switch slides by dragging with your cursor and by swiping on the touch screen.
    With the mouse wheel option, you can use your mouse scroll to switch your slide or you can enable the Keyboard option to switch slides by using arrows.
  • Slide background image fill – You can make use of this option if the size of your image varies from the size of your slide’s. The different fills available will help in improving the results. 

If you scroll down a bit, you’ll find the animation option that allows you to add background animations to your slider to make it more appealing, especially if you’re selling children’s products.

3.2 Size Configuration

On the third tab beside the general’s tab, you’ll find everything related to the size of the slider.

With different screen types available today, people may view your products through a cell phone, a tablet or the good old desktops. However, for each of these screens, the Smart Slider 3 does a pretty good job of being responsive in order to provide a good user experience.

It also gives you the option to display your sliders in the portrait or the landscape view depending on your preference and enables you to set the size (height & width) of the slides for these devices.

Smart Slider 3 Size Configuration

After going through the Size settings, you can move on to the next tab – AUTOPLAY, which will allow you to switch your slides automatically.

3.3 Loading settings

This setting essentially lets you delay the load time of the slides which helps in increasing the speed of your website.

You can also delay the image loading by a few milliseconds depending on how the users are interacting with each slide. This can be subjective based on the nature of every user and having concrete data on this can help you decide the timer.

Having said that, you can also access the lazy loading settings with the PRO version that will help in improving user experience and increasing the speed of your web store.

These were the basic slider settings that help in determining and setting your slider attributes to ensure your slider is properly configured for your visitors and the user experience is not hampered.

Great! Now that you’re well-acquainted with basic Slider settings, let’s check out the control settings and see how it can help you.

4. Configuring Control Settings

So many settings!!! Ughhh

We’re not surprised if you feel this way but, stay with us because, in the end, it’s these small efforts and detailing that will make your WooCommerce Product Slider stand out and help you gain a competitive advantage.

You can find these control settings in a bar below the Slider settings as you can see in the image below.

Smart Slider 3 Configuring Control Settings

There are different tabs you can explore as you must’ve noticed from the above image. Let’s see what each of these tabs has to offer.

4.1 Arrows & Bullets

These settings will allow you to choose and use Arrows or Bullets to take your visitors through different slides in the slider. You can choose either of these depending on your preference.

Moreover, you can style the arrows or bullets by using different colors for it, have a text in your arrows, and also choose to position them anywhere on the slider as per your convenience.

4.2 Text Bar

With the Text Bar, you can provide information regarding the active slide’s Title and Description on a bar.

The description of the slide is usually longer than the title. You can use different colors to style them, make them look big or small and position them as per your requirements.

Text Bar Smart Slider 3

You can also make changes in the Thumbnails section – The plugin allows you to choose and show the thumbnail of your slides and navigate using them. Add caption to these thumbnails and choose to align them on your slide as per your needs.

Oh, before we move on, don’t forget to save your changes. You’ve put in lots of efforts and hard work 😛

You can also preview to see how the changes look in the slider. If you feel something is missing or something isn’t right, you can always go back and check the slider settings.  

Well, you’re now ready and this brings us to the end of the Slider Settings 🙂 

With that being said, we will now check out the Slide editor that’ll help you edit and add information in each slide or to the image in the slides. 

5. Configuring Slide Editor

Before moving ahead, if you’ve made it so far without dozing off, thank you for staying with us 🙂 

It’s almost over.

So, let’s see check out what the Slide editor has to offer. 

To access the editor option, follow the below instruction:

  • Go to the Smart Slider Dashboard.
  • Click on any one of the slides to edit.
Smart Slider 3 Configuring Slide Editor

Once you land on the page that resembles the above image, select the Background option. This allows you to change the background color of the image in the slider and optionally you can also choose to blur the image in the background in order to allow people to focus on the text or the message you’d like to display.

5.1 Add Layers

Now, this is an important and enjoyable part that’ll help in adding the information in the slides and will enable you to convey the details to your users in the most efficient and effective manner.

So, scroll down a bit to add layers to your slides.

Smart Slider 3 Add Layers

Note: Before moving ahead, ensure that you’re in Content editing mode to get the best responsive results.

The arrow in the above image points towards the layer settings. If you click on the Green Plus button, you’ll come across different types of layers like:

5.2 Heading

With this option, you will be able to add a Heading on your Slide which can be used to give context to the information you’re going to display.

The best use of the Heading would be to showcase the name of the product/service.

To add a Heading, just click on the Heading Tab or drag it on the slide.

Smart Slider 3 Heading

You can also change the font style and size of the Heading text, change the color, alignment, and make other heading related changes according to your needs.

5.3 Text

The text layer allows you to add content to display the information you’d like to showcase to your visitors. It’s usually the product/service description.

We recommended you to add only the required and the important content as the slides are meant for instant information with quick scrolling.

Smart Slider 3 Text

As per your needs, you can make the necessary changes related to font color, size, alignment, etc. Just ensure you don’t overflood the slide with too much text or information.

5.4 Buttons

The next layer is to add a Button on your slide which is essentially meant to lead your visitors to a page that’ll provide them with more details regarding your product. If your visitor wants to explore the product then you should have a button that they can click on which will lead them to a detailed product page.

Smart Slider 3 Buttons

You could always have a different Button that fits your requirements the best as suppose to ‘Read More’.

The Button settings will allow you to change the color, text, size, alignment, etc. as per your convenience.

Before we move ahead, make sure you add the link to the ‘Read More’ button that’ll lead your visitors to the required page.

You can adjust the width and the spacing of the layers according to your requirements.

Note: You will find more layers in the PRO version. 

Remember we mentioned earlier about editing the slides in the Content mode?

Well, there’s one more option called the ‘Canvas Mode’ that lets you place your layers in any position on the slide.

But, we don’t recommend using this mode because it requires more responsive adjustments.

With that being said, finally, your layers are ready and you can view them in different device formats like Tablets, mobile and desktop to see how it looks in each of these devices and accordingly make more changes if it doesn’t satisfy your needs.

Once you’re done. Save your changes.

6. Publish a slider to your website.

Congratulations! Now that you’ve become a professional in adding slides and creating a slider 😛 let’s take a look at the final step of publishing your slider on to your website.

To embed a slider to your website, go to:

  • Slider settings panel > Publish.
Smart slider 3 Slider settings panel

As you can see from the above image, there are three ways to publish the slider to a page. We will be using Shortcode to add the new slider.

To publish the shortcode:

  • Copy the shortcode under the shortcode block and paste the code on the content area of the page you want your slider on.
Smart slider 3 edit post

Image courtesy: smartslider3

You can save the changes, make sure you update your page to apply the changes. This brings us to the end of the WooCommerce Product Slider set up (Yaay).

Endnote

We hope we’ve provided you with enough information to set up a WooCommerce Slider using the Smart Slider 3 plugin.

Let us know if you have any questions, in the comments below, we will try our best to answer them 🙂

Disclosure: Some of the links in this blog post might be affiliate links. When you purchase through a link on our website, we receive a small commission, at no added cost to you, which helps us run Epitrove and keep producing great content. This does not influence our recommendations; we only recommend products we work with or love. Thank you for your support!

Love Shah
Love Shah

I can't function without tea, books, and movies. When not working, you'll find me weaving stories.

Responses

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.