fbpx

Need Help?

Here are some good places you cant start.

Join the Community

Whats New?

Get updated about all the good stuff!

WooCommerce Product Slider

The WooCommerce Product Slider Widget helps you to showcase your WooCommerce products on any Elementor page in a interactive slider layout with full control over all the settings. It comes with advanced products query options that will give you full control to filter your products exactly the way you want. You can turn on or off different parts of the slider to make it suitable exactly for your needs.

 

Let’s look at each of the options in the “WooCommerce Product Slider Widget” below.

Install WooCommerce Product Slider Widget for Elementor

This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “WooCommerce Product Slider”
  3. Hover over the widget in the search results and click install
  4. Add your “WooCommerce Product Slider” widget to any Elementor Page

General Settings

1
Product Image Size

Select the product image size.

  • Medium Large
  • Large
  • Medium
  • Thumbnail
  • Full Size
  • 1536*1536
  • 2048*2048
2
Autoplay

Turn on or off the autoplay option.

3
Loop

Turn on/off the loop option.

4
Transition Speed

Set the transition speed for slider in milliseconds.

5
Autoplay Interval

Set the interval between autoplay transitions.

6
Enable Third Party Integration

Enable integrations for third party plugins.

7
Show Empty Message

Shows empty message when no product answers the query.

8
Empty Message

Type the empty message.

Buttons Settings

1
Product Link Button Text

Type text to display as product link button text.

2
Open Product in New Tab

Product link will open in new tab.

3
Add to Cart Button Text

Type text to display as add to cart button text.

4
Select Options Button Text

This text appears on variable products instead of add to cart text.

Arrows Setting

1
Arrow Left

Choose icon for left arrow.

2
Arrow Right

Choose icon for right arrow.

Layout Settings

1
Show Arrows

Show/Hide the navigation arrows.

2
Show Dots

Show/Hide the navigation dots.

3
Show Category

Show/Hide the product category.

4
Show Product Name

Show/Hide the product name.

5
Show Regular Price

Show/Hide the regular price of product.

6
Show Sale Price

Show/Hide the sale price of product.

7
Show Product Button

Show/Hide the product button.

8
Show Add to Cart Button

Show/Hide the add to cart button on carousel.

9
Show Rating

Show/Hide the ratings of product.

Badge Setting

1
Sale Label

Show text to display as sale label text.

2
Show Sale Label

Show/Hide the sale label.

3
Show Sale Percent in Label

Show/Hide the sale percentage in label.

Connected Widgets Settings

1
Enable Remote Connection

Use remote control widgets to create advanced creative layouts.

2
Widget Name for Connection

This name will be used to connect and controls this widget by other widgets.

3
Sync

You can connect two item-based widgets and sync them.

4
Sync Group

Choose the same group for two or more item-based widgets so they can sync together.

Products Query Setting

1
Products Source

Choose any of the below options for your product source.

  • Current Query Product
  • Custom Products
  • Related Products
  • Manual Selection
2
Include By

Include the products from different options given below

  • Author
  • Date
  • Post Meta
  • Most Viewed
  • ID's from PHP function
  • ID's from Post Meta
  • ID's from Dynamic Field
  • Products on Sale Only
  • Up Sells Products
  • Out of Stock Products Only
3
Include By Terms

Choose specific products that you would like to include from your selection by adding rules.

  • Include By Terms Relation
  • Include Terms Children
4
Exclude By

Choose specific products that you would like to exclude from your selection by adding rules.

  • Out of Stock Products
  • Products on Sale
  • Terms
  • Current Products
  • Specific Products
  • Author
  • Product Without Featured Image
  • Product with current category
  • Product with current tags
  • Offset
  • Avoid Duplicates
  • ID's from Dynamic Field

Post Pagination and Ajax

1
Pagination

Display the pagination for your post grid

  • None
  • Numbers
  • Using Pagination Widget
2
Enable Ajax

When turned on, all the filters, all the filters interaction will be with ajax.

WooCommerce Product Slider Widget Styling

A lot of styling options are provided to control every aspect of the widget’s appearance. Modify the colors to match your site’s look and feel.  You can customize every single detail to perfectly blend with your website design.

Slider Styling

Set the slider height, radius, border, and slider overlay.

Slider Content Styling

Style the vertical and horizontal alignment, content width, background, radius, border, padding, and margin.

Category Name Styling

You can set the category color, typography, and spacing.

Product Name Styling

In this section, set the product name typography, color, and spacing.

Regular Price Styling

Set the regular price typography, color, and spacing.

Sale Price Styling

You can set the sale price typography, color, and spacing.

Buttons Styling

Here, You can style the button background color, text color, border, spacing, and padding.

Nav Arrows Styling

You can set the nav arrow spacing, positioning, radius, background, and color.

Nav Dots Styling

In this section, you can set the nav dot size, color, spacing, and alignment.

Badge Styling

You can style the badge height, width, typography, color, background, padding, radius, border, and positioning.

Rating Styling

Style the rating spacing, color, and size.

Empty Message Styling

Style the empty message typography, color, background, radius, padding, margin, and border.

Usage Examples

Here are some live use cases for the WooCommerce Product Slider widget.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!