Create interactive sliders to display your products in style.

Using Woo Slider #

Step 1 #

Make sure you have the Woo Slider widget enabled from your Dashboard > Droit Addons > Elements. Also, make sure to have the WooCommerce plugin installed and activated. 

WordPress Dashboard - new plugin

Step 2 #

Search for the Woo Slider widget from the left-hand side menu, and drag the widget to your preferred location.

Elementor page builder

Before you get started with the Woo Slider widget you must have the WooCommerce plugin configured and products listed with details. Here is an example.

To get started visit your Dashboard > WooCommerce > Add my products. From here you can add your products manually or import an existing product listing via a CSV file. 

WooCommerce - new product

Step 3 #

From here you can add your product title, description, tag, category, regular/special price, feature images, and so much more. 

WooCommerce new product details

Step 4 #

When you’re done adding your products to WooCommerce. Make sure to press “Publish” to make it live.

WooCommerce new product details

Step 5 #

After you’re done configuring/adding products from the WooCommerce plugin, your products will now be visible via the Woo Slider widget on your website. 

Let’s start by configuring the Layout menu. From here, you can adjust how your product list will look by adding spacing, alignment, and layout style.

Elementor page builder

Step 6 #

Now to customize your slider function, click on the Slider drop-down menu. From here, you can add slider left and right buttons, per page item count, autoplay toggle, and so much more.

Woo Slider - Slider Settings

Step 7 #

From the Query Settings drop-down menu, you will be able to add – select your preferred category, sort by order, order type, display limit, spacing, and posts per column. 

Woo Slider - Query menu

Step 8 #

You can customize your product titles from the Title drop-down menu. From here, you can add color, typography, and spacing to your product list.

Woo Slider - Title menu

Step 9 #

To customize the thumbnails of your product list, click on the Thumbnail drop-down menu. From here you can customize the image settings with height, weight, image fit, border type, margin, padding, and image shadow. 

Woo Slider - Thumbnail menu

And that’s it. When you’re done, press “Publish” to save your changes.

Powered by BetterDocs