How to add WooCommerce Product Slider Using ProductX - WPXPO
Autumn Offer up to 30% off
Days :
Hours :
Mins :
Seconds
Logo
Back To Blog

How to add WooCommerce Product Slider Using ProductX

How to add WooCommerce Product Slider Using ProductX 1

WooCommerce product slider is the best way to showcase featured products. But not all WordPress themes have this feature. Well, in that case, you can use the Slider block of the ProductX plugin to your current WordPress theme. So, how to add a Woocommerce product slider?

You can add a WooCommerce product slider by following these simple steps.

Step-1: Install ProductX Gutenberg WooCommerce Blocks plugin.
Step -2: Import the Product Slider premade design block.
Step-3: Customize the Product Slider.

1. Install ProductX

First of all, you need to install the ProductX plugin from the WordPress directory. For that, go to the plugin section and click on add new for adding a new plugin. Then search for PorductX and click on the install button. After that, click on the activate button to complete the installation process.

Install ProductX

2. Import the Product Slider Block

Now go to the page where you want to add the slider. To import the Product slider block click on the block library. There are two options available in the block library which are starter packs and ready-made block design. Click on the ready-made block design and you will get various options to choose from. Choose the product slider block and click on the import button. So, it will be added to the page.

Import the Product Slider Block

3. Customize The Product Slider

After importing the slider block, you can keep it as it is or you can also customize it. ProductX gives full control to customize any premade designed blocks. To customize any block you need to select it to go to the settings section. Under the settings, you can find lots of options to work with. Let’s take a look at the different options step by step.

General Settings: Under this section, you can get various options for customizations. First of all, you have the product view option. You can convert slider block to grid block. But for now, We are keeping it to the slider. Next, you can increase or decrease the gap between the columns. Decided whether you want to show Auto Play, Dots, and Arrows or not. There is also an option for increasing or decreasing the slider speed. You can also change the alignment of the elements of the slider.

General Settings of Product Slider

Query Builder: It is one of the main attractions of the ProductX plugin. First of all, let’s look at the quick query. By using it you can sorts products by rating, most sales, most views, etc. Next, you can increase or decrease the number of products of the slider or any other blocks. The Product Status allows choosing between featured and on sale products or you can also choose all products. You can choose single or multiple categories. So that, the products from the selected categories will be shown in the slider. Then you can order these products by price, date, popularity, etc.

Query Builder of product slider

Arrow: If you turned on the arrow for the slider block then you will see this option. From here you can choose any of the three arrow styles. Then you can adjust the size, height, width, and vertical position. Choose any color for the arrow along with the background color.

Arrow Settings of Product Slider

Price: Decide whether you want to show the price for the products and customize it according to your preference. You can choose any color and change the typography.

Price Settings of Product Slider

Review: From the review section you can choose any color and customize the margin.

Review Settings of Product Slider

Sales: If your online store has products under sales who you highlight them using this feature. You can change the text from sale to offer, discount, or any other text. Choose from two available styles which are classic and ribbon. Select any color for the text and background. You can also adjust the border-radius and padding.

Sales Settings of Product Slider

Image: There are many options available under the image settings. First of all, you can choose the size of the image. Multiple hover animations are available to choose from. You can also adjust the height, width, radius, and margin of the images.

Image Settings of Product Slider

Heading: You can add a heading for the product slider and it is highly customizable. First of all, you can add any text to the heading section. Changing the alignment and heading style are also available. Typography, color, spacing, etc all options are easy and flexible to use.

Heading Settings Product Slider

Title: Title settings have the options for title size, text color, hover color, typography, padding.

Title Settings Product Slider

Category: You can customize it by using the available options. You can choose the position, text color, background color of the category. Adjusting options of border, spacing, and padding are also available.

Category Settings Product Slider

Benefits of using the WooCommerce Product slider of ProductX

As you know all how to add and the Product Slider of ProductX now its time to talk about the benefits. There are numerous benefits you can get I am listing down some of them below.

You may also like to read:-

How to add WooCommerce Pagination

How to add WooCommerce Filter

Conclusion

That’s all about the WooCommerce product slider. I hope now you can add the slider to your online store. If you still have any confusion just leave a comment below.

Written byOmith Hasan

I am a gaming blogger for more than five years. Now, also working as a technical content writer for WPXPO.

Leave a Reply