Here’s a step-by-step process of adding a WooCommerce product slider.
Video Tutorial
Here’s a video tutorial for you to help you understand the WooCommerce Product Sliders better.
Step 1: Create a New Page
First, you need a page to add the product slider.
![Creating New Page](https://wpxpo.com/docs/wp-content/uploads/2023/06/Creating-New-Page.png)
So to create a page, go to Pages > Add New to open a new page.
Step 2: Add the Product Slider Block
Now you need to add the product slider block to your page. So, click the + icon to open the block library. Search for Product Slider and click on it to add the block to your page.
![Adding Product Slider Block](https://wpxpo.com/docs/wp-content/uploads/2023/07/Adding-Product-Slider-Block.png)
Step 3: Customize the Product Slider
You can customize the product slider in several ways. WowStore provides many customization options and settings for the product slider block.
Premade Patterns
WowStore offer 9 different premade patterns for product slider.
![Patterns for Product Slider](https://wpxpo.com/docs/wp-content/uploads/2023/07/Patterns-for-Product-Slider.png)
Which you can import in 1-click.
![Importing Premade Patterns](https://wpxpo.com/docs/wp-content/uploads/2023/07/Importing-Premade-Patterns.png)
Product Slider Variation
WowStore also provides 3 different variations for the product slider. These variations can be combined with the premade patterns to display your product slider in 27+ ways.
![Product Slider Variation 1](https://wpxpo.com/docs/wp-content/uploads/2023/07/Product-Slider-Variation-1.png)
Slider Animation
The default animation moves products from right to left. You can change it to a fade animation where products gradually vanish until the next one appears. You can also adjust the animation speed and turn off the autoplay.
![Product Slider Animation](https://wpxpo.com/docs/wp-content/uploads/2023/07/Product-Slider-Animation.png)
Show/Hide Contents
Customize the slider by showing or hiding specific sections such as taxonomy, title, description, price, add to cart button, image, arrows, dots, and sale tag.
![Slider Enable or Disable Settings](https://wpxpo.com/docs/wp-content/uploads/2023/07/Slider-Enable-or-Disable-Settings.png)
Product Sorting
Easily sort products in the slider using advanced query sorting. You can sort products based on queries like specific products, recent views, random products, best-sellers, related products, and more.
![Slider Product Sort Settings](https://wpxpo.com/docs/wp-content/uploads/2023/07/Slider-Product-Sort-Settings.png)
Background Color
Modify the slider’s background with color, margin, padding, overlay, border, border radius, and box shadow to match your website’s design.
![Slider Background Settings](https://wpxpo.com/docs/wp-content/uploads/2023/07/Slider-Background-Settings.png)
Content Typography Settings
Customize typography for each content element in the product slider, including width control, alignment, padding, taxonomy, title, description, and product price.
![Slider Content Settings](https://wpxpo.com/docs/wp-content/uploads/2023/07/Slider-Content-Settings.png)
Add to Cart Button
Tailor the appearance of the add-to-cart button with color and typography settings. Additionally, you can add a plus-minus button and quantity box and adjust borders for further customization.
![Slider Add to Cart Settings](https://wpxpo.com/docs/wp-content/uploads/2023/07/Slider-Add-to-Cart-Settings.png)
Image Settings
Customize the appearance of product images by adjusting height, width, padding, borders, and border radius. You can add image overlays and scale images to suit your website design.
![Slider Image Settings](https://wpxpo.com/docs/wp-content/uploads/2023/07/Slider-Image-Settings.png)
Sale Tag Customization
Change the sales text, position, design, style, size, and colors of the sale tag to draw attention to discounted products.
![Slider Sales Tag Settings](https://wpxpo.com/docs/wp-content/uploads/2023/07/Slider-Sales-Tag-Settings.png)
Arrow
Toggle arrows on or off and choose device-specific enable/disable options for a responsive design. Additionally, customize arrow styles, sizes, colors, and positions.
![Slider Arrow Settings](https://wpxpo.com/docs/wp-content/uploads/2023/07/Slider-Arrow-Settings.png)
Dots
Enhance the product slider with dots indicating the number of products. Customize the dots’ size, colors, and position according to your preferences.
![Slider Dots Settings](https://wpxpo.com/docs/wp-content/uploads/2023/07/Slider-Dots-Settings.png)
WowStore offers an intuitive interface for easy customization. Experiment with different settings and combinations to create a professional-looking and visually engaging product slider that matches your website’s style.
Step 4: Publish the Page
Once you are happy with the customizations, click the Publish button to publish your page.
![Publishing Product Slider](https://wpxpo.com/docs/wp-content/uploads/2023/07/Publishing-Product-Slider.png)
And that is how you can add a WooCommerce product slider in your store. If you need further assistance, do not hesitate to contact our live chat support from our website.
Advanced Settings
In the advanced tab, you will get settings for the following:
- General
- Responsive
- Custom CSS
- Advanced
![Block Advanced Setting](https://wpxpo.com/docs/wp-content/uploads/2023/08/Block-Advanced-Setting.png)
General
You can modify class ID, z-index, margin, padding, normal & hover colors, border, box shadow, and border radius from the general settings.
![Advanced General Settings](https://wpxpo.com/docs/wp-content/uploads/2023/08/Advanced-General-Settings.png)
Responsive
You will have the responsiveness settings for the blocks if you want to show the block on particular devices or not.
Use the toggle bar to enable the following options:
- Hide On Extra Large
- Hide On Desktop
- Hide On Tablet
- Hide On Mobile
![Advanced Responsive Settings](https://wpxpo.com/docs/wp-content/uploads/2023/08/Advanced-Responsive-Settings.png)
Custom CSS & Advanced
You can manually add your custom CSS to modify your blocks in the custom CSS field. And in the advanced field, you can add custom CSS classes.
![Advanced Custom CSS settings](https://wpxpo.com/docs/wp-content/uploads/2023/08/Advanced-Custom-CSS-settings.png)