Let’s take some time out to talk about WooCommerce Product Sliders. A WooCommerce Product Carousel permits you to add a mobile responsive slider feature to your products available in different categories of your WooCommerce online web store. It is a complete responsive and mobile friendly carousel which comes with many features. It permits you to make multiple product sliders on your Ecommerce store wherever you want, whenever you want.
Although, there are many product slider plugins on the internet but, in this excellent guide, we are using WCPS plugin.
So let’s begin,
Features of WooCommerce Product Slider Plugin
Here is a list of features available for WooCommerce Product Gallery Slider that you can use on your Ecommerce store for better user engagement and conversions.
- It is completely responsive
- You can add unlimited sliders wherever you want.
- You can add a custom number of slider items to query.
- You can create custom padding, change the background color, background image.
- Hide (out of stock) product.
- Custom number of slider column number for Desktop & Tablets
- You can add font size, change font color & align text.
- You have three different Slider options.
- The first option is slider Autoplay.
- The second option is slider Stop on hover.
- The third option is slider Touch Drag & Mouse Drag.
- It comes with three Ready Themes.
- You can add custom featured marker icon.
- You can add custom color, font size; text aligns for slider items Title.
- You can add custom speed for slider navigation & Pagination.
- You can add custom pagination background color & text color.
- You can add custom sale marker icon.
Step 1: Installing Woocommerce Products Slider Plugin
From your “WordPress Admin Panel” navigate to “Plugins >> Add New.” In the top right search bar for “Woocommerce Products Slider.” Once found, click on “Install Now.” After installing, click on “Activate Plugin.” For reference check the image below.
After activating the plugin, you will see “WCPS” menu at the left side on WordPress dashboard click “New WCPS” and use the options field “Woocommerce Products Slider.”
Under “New WCPS.” You’ll see the following options.
- Custom CSS
Step 2: WooCommerce Slider Shortcode
Just copy this shortcode and paste on page or post where you want to show the slider. On the other hand, you can also use PHP code to your theme’s file to view the slider.
Step 3: Product Slider Options
In this option, you can quickly set your slider settings for example slider items, slider column, slider speed, and slider pagination.
Step 4: WooCommerce Product Slider Style
In this option, you can set the Padding, background color, background image and themes for a slider.
Step 5: Product Slider Content
In this option, you can set the custom thumbnail image url, order, stocks and slider content.
Step 6: WooCommerce Product Carousel Custom CSS
Do not use the <style></style> tag, you can use the following prefix below as image in your CSS, sometimes you need to use “!important” to override.
Embed a WooCommerce Product Slider to Your Website
There! Guess that’s all folks. You’re almost done. Now it’s time to add your slider to a post or page. To do so, add the following shortcode in the text editor of your post or page.
Shortcode Example: [wcps id=”19″]
Now, you need to visit your website to see your product slider in action.
That’s all there is to it. I hope you have no concerns using WooCommerce Product Slider plugin and that this tutorial has proved to be of much help. If you have any query or suggestion about this tutorial, you can leave a comment below!
Meanwhile, you can also read An Exclusive Guide for Woocommerce Product Filter Plugin.
Saud is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform. Saud is responsible for creating buzz, spread knowledge, and educate the people about WordPress in the Community around the globe. In his free time, he likes to play cricket and learn new things on the Internet. You can email him at firstname.lastname@example.org
Start Growing with Cloudways Today.
Our Clients Love us because we never compromise on these