How to Use WooCommerce Product Slider: A Detailed Guide

  • By: Ruhul
  • Updated:
WooCommerce Product Slider

WooCommerce product sliders are a great way to showcase your products and increase sales. This blog post will provide a step-by-step guide on creating one.

By the end of this blog post, you will understand how to use WooCommerce product sliders in your WooCommerce store.

So, what are you waiting for? Start reading now!

Difference between WooCommerce Product Slider and WooCommerce Product Carousel

Product sliders and product carousels are often used interchangeably, but the two have some key differences. 

Sliders can display one slide at a time, whereas carousels allow users to see multiple slides simultaneously.

Sliders are typically used to showcase a limited number of products. In contrast, product carousels can show a larger selection of products. Sliders are typically static, while product carousels can be interactive, allowing users to click through the images.

In short, the main difference between a WooCommerce product slider and a product carousel is that a sliders displays images one at a time. In contrast, a product carousel displays several images in a loop.

How to Use WooCommerce Product Slider?

WooCommerce product sliders are a very interesting feature, but WooCommerce doesn’t let you use it without a plugin. 

While several plugins are in the market, ProductX stands out the most because of its vast customizability.

So let’s see how you can add and use amazing sliders in your super amazing store with ProductX.

Video Tutorial

Here’s a video tutorial for you to help you understand the WooCommerce Product Sliders better.

Step 1: Install and Activate ProductX

Before we start creating wonderful product sliders, you have to get ProductX. The process is very simple and easy. 

Go to Plugins > Add new. Search for ProductX. Then install and activate ProductX

Install ProductX
Install ProductX

ProductX is the #1 WooCommerce blocks plugin with a collection of Customizable Product Blocks, a WooCommerce store page builder, and a huge library of starter packs and templates.

Step 2: Create a New Page

Generally, we add product sliders to the home page. So, you need to create a home page. You can create a new page with a default Gutenberg editor, then make it the home page from WordPress settings. Too much hassle!

Creating New Page
Creating New Page

Or, you can 1-click import home page templates with the ProductX WooCommerce Builder and directly make it your home page without any hassle. 

No need to create a store from scratch! However, if you want, you can also customize the premade templates and every consisting block after importing as per your needs. Yes! You can add other blocks, too!

Step 3: Add the Product Slider Block to Your Page

If you have been using WordPress for some time, you already know how to add a block. But for newcomers and beginners, it’s new but quite easy and interesting.

Click the “+” Icon to open the block library or use the “/” command. Type “Product Slider” and click to add the block to your page.

Adding Product Slider Block
Adding Product Slider Block

Your slider will work perfectly if you have enough products in your store. If you don’t have products in your store, the slider won’t work because there will be nothing to display as a slider.

Step 4: Publish the Page

Once you add the product slider block, you can do lots and lots of customization, which we will show you in a bit. But if you don’t want to customize, click the “Publish” button to publish your page.

Publishing Product Slider
Publishing Product Slider

How to Customize the WooCommerce product slider with ProductX

ProductX not only provides extensive product blocks for WooCommerce stores but it also provides extensive customization options for each of its blocks. The Product Slider block is no different. So let’s check what customization options the product slider block has for us.

Premade Patterns

One thing ProductX is also known for is its premade design library. You can get 9 different variations for this block, which you can 1-click import.

Patterns for Product Slider
Patterns for Product Slider

Click the “Explore Patterns” button to open the premade pattern library. You can get a live preview for each pattern and import the one you like. 

Importing Premade Patterns
Importing Premade Patterns

Once you import it, you can see your product slider is now changed with the imported design.

Product Slider Variation

ProductX provides 3 different variations for this block. And the variations also work with the premade patterns.

Product Slider Variation 1
Product Slider Variation 1

That means you can display your product slider in 27+ different ways.

Product Slider Variation 2
Product Slider Variation 2

Product Slider Animation

The default slider animation makes products go right to the left. ProductX lets you change the slider animation to fade. This means when you choose this, the products will keep vanishing until the next product comes up.

Product Slider Animation
Product Slider Animation

You also adjust the animation slider speed. Also, you can turn off autoplay for slider animation. This means the slider won’t change automatically unless someone clicks the arrow. 

Slider Speed Settings
Slider Speed Settings

You can even adjust the slider, width, gap, alignment, and other typographical settings.

Show/Hide Contents

ProductX’s product slider block lets you display or hide particular sections for the slider. Which are:

  • Taxonomy
  • Title
  • Description
  • Price
  • Add to Cart
  • Image
  • Arrows
  • Dots
  • Sale Tag
Slider Enable or Disable Settings
Slider Enable or Disable Settings

You can use the toggle bar to display or hide these inside the slider. 

Product Sorting

ProductX has advanced query sorting for most of its blocks. Which products do you want to display in the slider? You can easily sort them with different queries. 

Here are some of the queries you can sort your product for the slider:

  • Specific products
  • Recent view products
  • Random products
  • Most sales products
  • Related products
  • Top rated products
  • Most rated products
  • Most view products
  • Product Status
  • Order (date, title price, etc.)
  • Taxonomies and more.
Slider Product Sort Settings
Slider Product Sort Settings

Background Color

You can modify the slider’s background from the background settings, including color, margin, padding, overlay, border, border radius, box shadow, etc.

Slider Background Settings
Slider Background Settings

Content Typography Customizations

You will have typography-related customization for each content in the slider. 

Here are some of the major customizations settings you can do:

  • Width Control
  • Alignment
  • padding
  • Taxonomy control
  • Title customizations
  • Product Description
  • Product price
Slider Content Settings
Slider Content Settings

You will have a vast typography control for each of these settings, as you can see in the image below.

Add to Cart Button

As we have said earlier, you’ll have customization options for each element in the slider. 

Slider Add to Cart Settings
Slider Add to Cart Settings

You’ll have color and typography-related settings for adding to the cart button. You can add a plus-minus button, quantity box, adjust borders, and more.

Image Settings

Image is the most crucial part of any slider. So, customizing the way you want to display your image is important.

Slider Image Settings
Slider Image Settings

You’ll get every sort of customization option from the height, width, padding, borders, and border radius. Also, you can add image overlays and scale images according to your website design.

Sale Tag Customization

You can change the sales text, position of the sale tag, design of the sale tag, choose different styles of the tag, size of the tag, colors, etc.

Slider Sales Tag Settings
Slider Sales Tag Settings


As you already know, you can turn the arrow on or off; you can even choose device specific enable or disable options like:

  • Hide On Extra Large
  • Hide On Desktop
  • Hide On Tablet
  • Hide On Mobile
Slider Arrow Settings
Slider Arrow Settings

Also, you can adjust the arrow styles, size, colors, position, and other typographical options.


Dots are an excellent addition. It lets you know how many products there are. You can modify the dots, their size, colors, adjust the positions, and more from these settings.

Slider Dots Settings
Slider Dots Settings

Best Places to Add WooCommerce Product Sliders

WooCommerce Product sliders are a versatile tool that can be used to improve the user experience and increase sales on any website. Here are the 3 best places you can add them.

Homepage: Homepage is a great way to showcase your best products and attract visitors to your store. It can also be used to promote special offers or new arrivals.

Product pages: Product page is another good way to show off multiple product images and highlight its features. It can also include a video or a testimonial from a satisfied customer.

Category pages: Category page is also a nice way to show visitors all the products in a particular category. It can also be used to promote related products or to suggest other products that visitors might be interested in.

Quick Tips

Here are a few tips to keep in mind when creating your WooCommerce product slider:

  • Choose high-quality images of your products.
  • Use clear and concise text.
  • Include a call to action.
  • Test your slider to make sure it looks good on all devices.

Resourced You’ll Love

Here are a few article you might find helpful:


In conclusion, WooCommerce product sliders are a great way to showcase your products and increase sales. They are easy to create and can be customized to fit your specific needs. By following the steps in this blog post, you can create a WooCommerce product slider that will help you attract more customers and boost your sales.

So what are you waiting for? Add your WooCommerce product slider today with ProductX!

You can check out WordPress video tutorials on our YouTube Channel. Also, find us on Facebook and Twitter for regular updates!

Like this article? Spread the word

Written byRuhul

Ruhul is a technical and SEO-driven content writer, a tech enthusiast, and a pro gamer. He loves exploring new things and has written over 1,500 articles on diverse topics.

Leave a Reply