The larger your product catalog grows, the harder it becomes for visitors to find what they want. Browsing through page after page hoping to locate the right item can become a chore. That’s where a product slider can come in handy.
With product sliders, you can showcase as many items as you want on a single page, and make your catalog easy to navigate. Your slider can occupy as little or as much space as needed, depending on the design you choose.
In this article, we’ll show you some of our favorite examples of eCommerce sliders. Then we’ll walk through how to build a WooCommerce product slider using two different plugins, both of which offer a free version.
Let’s get started!
The benefits of using a product slider on your store
Sliders are everywhere on the web. Many websites now use sliding galleries as a part of their hero sections:
If you want to show off reviews or client testimonials, sliders can also be an excellent choice:
However, few types of websites can get as much mileage out of sliders as online stores. Depending on how large your product catalog is, your visitors might have to browse through many pages to locate what they want:
There are a lot of ways to circumvent that problem. You can segment items by category, add in better search functionality, and of course, use product sliders:
With the right tools, you can easily create attention-grabbing product sliders that help you show off your top-selling items. Let’s talk about what your options are.
Two simple ways to add product sliders to your online WordPress store
There are a lot of plugins you can use to add sliders to WordPress. However, for an online store, you’ll want an option that’s compatible with WooCommerce out of the box. With that in mind, let’s look at how to use two of the best slider plugin options.
1. Use the Product Slider for WooCommerce plugin
Product Slider for WooCommerce is one of those plugins that tells you almost everything you need to know right in its name. With this plugin, you can take your WooCommerce products and place them within a slider.
You can set up as many sliders as you want, and insert them on any page, post, or custom template using configurable shortcodes. Every product slider you create is fully customizable. That means you can change its look, how it behaves, whether it’s set to autoplay, if it supports swiping on mobile devices, and more.
To make your life even simpler, this plugin includes three themes to choose from to make your sliders look unique. There are also dozens of other options if you purchase a premium license.
For any new slider you create, you need to pick a theme instead of starting from scratch. In the following tutorial, we’ll tweak our choice to make it unique, and in the process show you how the plugin fares when it comes to customization.
Before you get started, you’ll need a WooCommerce store with at least a few products. Here’s ours:
Now check out our finished slider, and then we’ll show you how we got there:
Setting up Product Slider for WooCommerce
The first thing you’ll need to do is set up and activate the Product Slider for WooCommerce plugin. As soon as you do, a new Product Slider tab will appear in your dashboard.
If you click on Add New, the first thing you’ll see is an overview of the ways you can add a new slider to your website:
Go ahead and set a title for your slider, then scroll down to the General Settings area. There you can configure what type of slider you want to build, along with the layout and theme you’ll use:
Theme One offers a clean and minimalistic style, so we’re going to stick with that choice.
Next, you can configure which products to display in your slider. The downside of this plugin’s free version is that it only enables you to create sliders for your latest items:
We’ll go ahead and configure our slider to display four columns on desktop devices and one on mobile devices, and to show 12 products in total.
Moving on to the Slider Controls tab, we’ll disable autoplay, and then enable navigation arrows and pagination:
The latter settings make for an easier browsing experience, so we recommend that you keep them on as well. You can also enable touch swiping and mouse dragging, which make navigation even more intuitive:
Moving onto Display Options, we set the text for our slider to black. We also set a different color for discount prices, to make the difference more evident:
Typography options aren’t available in the free version of the plugin. So at this point, our slider is ready to go. To publish a product slider, you can save it, and then copy and paste the shortcode at the top of the configuration screen within a Shortcode block on any page:
Overall, creating a fully-functional slider using Product Slider for WooCommerce only takes a few minutes. You’re a bit limited when it comes to styling options, but this plugin is great if you’re looking for something minimalist.
2. Build a product slider using PickPlugins Product Slider for WooCommerce
Next up, PickPlugins Product Slider for WooCommerce is a great alternative if you’re looking for more functionality in your product sliders. This plugin offers a whole suite of options when it comes to slider animations, including an autoplay feature with custom speeds, hover effects, and more.
One area where this plugin stumbles is that it doesn’t offer many customization options for your sliders’ styles. It does include several elements you can add to products that are on sale or have discounts. However, you have less control over the look of the text for your products.
On the other hand, the advantage of this plugin is that it enables you to add custom CSS to your product slider. That means you can customize every aspect of your slider’s design, as long as you’re comfortable with CSS.
With that in mind, we set out to use this plugin to create a simple product slider. Our goal was to create something similar to the slider in the last section, to demonstrate some key differences between the two plugins:
Setting up the plugin
The process was fairly simple. Once you activate the plugin, you can go to the WCPS > New WCPS tab to create a new slider. The first thing you’ll want to do is set a title, and the plugin will show you the shortcodes for your slider:
To begin the customization process, move over to the Options tab. There, you can choose how many columns should display for the desktop and mobile versions of the element. Once again, we opted for four and one column respectively:
Moving on, we disabled autoplay and enabled ‘looping’, which lets visitors swipe directly from the last element to the first and vice-versa. That’s a handy feature that the previous plugin didn’t include:
Beyond that, we turned on the mouse and touch drag options. One useful feature this plugin also offers is ‘lazy loading’, which loads elements within your slider progressively in order to increase page speed:
Now we’re ready to select what products the slider should display, using the Query Product tab. You’ll notice right away that this plugin includes many options beyond just your latest products. For this example, however, we’ll stick with that setting:
If you scroll down, you’ll see options for hiding out-of-stock products and including items that are on sale. Then in Style, you can select one of four themes to use as your slider’s base:
This section also includes ‘ribbons’, which are overlays that show up above your product images to display discounts and offers. Finally, let’s jump over to the Elements tab, where we can select what elements your slider should include:
Since we wanted to build something similar to our last slider, we disabled the Category and Sale Count elements. When your own customization work is done, you can save your slider, copy its shortcode and publish it using a Shortcode block.
To sum up our thoughts, we appreciate that PickPlugins Product Slider for WooCommerce offers more practical customization options for sliders. However, style customization and the interface itself are somewhat lacking. Our advice is to give the free version of both plugins a try, to see which one best suits your unique needs.
Conclusion
Product sliders may look simple, but they can pack a lot of cool functionality. You can add transition effects to your sliders, set them to browse specific product categories, use any design you want, and much more.
If you want a plugin that offers a decent range of options when it comes to both style and functionality, Product Slider for WooCommerce is a good bet. PickPlugins Product Slider for WooCommerce, on the other hand, gives you far more animation options and more control over which products to display (in the free version), but doesn’t let you tweak your slider’s style as much.
Do you have any questions about how to use product sliders in your online store? Let’s go over them in the comments section below!
Free guide
5 Essential Tips to Speed Up
Your WordPress Site
Reduce your loading time by even 50-80%
just by following simple tips.
Keep reading the article at ThemeIsle Blog. The article was originally written by John Hughes on 2020-02-03 06:09:00.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.