ProductX

  1. Home
  2. Docs
  3. ProductX
  4. All Blocks
  5. Product Slider Block

Product Slider Block

***ProductX is becoming WowStore. If you see the new working interface of WowStore, then you can follow along – the working process for product blocks, starter templates, and features all work the same way as it did for ProductX. So, if you’re working with WowStore, you can follow the doc and use the instructions. Essentially, there’s no difference between WowStore and ProductX when it comes to using the product in general.

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
Creating New Page

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
Adding Product Slider Block

Step 3: Customize the Product Slider

You can customize the product slider in several ways. ProductX provides many customization options and settings for the product slider block.

Premade Patterns

ProductX offer 9 different premade patterns for product slider.

Patterns for Product Slider
Patterns for Product Slider

Which you can import in 1-click.

Importing Premade Patterns
Importing Premade Patterns

Product Slider Variation

ProductX 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
Product Slider Variation

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
Product Slider Animation

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
Slider Enable or Disable Settings

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
Slider Product Sort Settings

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
Slider Background Settings

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
Slider Content Settings

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
Slider Add to Cart Settings

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
Slider Image Settings

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
Slider Sales Tag Settings

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
Slider Arrow Settings

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
Slider Dots Settings

ProductX 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

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

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

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

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
Was this article helpful to you? Yes No