TIP Product Slider Pro adds Elementor widgets that allow you to display WooCommerce product sliders inside Elementor pages.
The plugin adds a dedicated Elementor category: TIP Product Slider
The category includes two widgets:
- TIP Product Slider
- TIP Product Slider Builder
TIP Product Slider widget
What it does
Displays one saved product slider.
When to use it
Use this widget when you have already created a slider from the plugin panel and want to place it inside an Elementor layout.
How to use it
- Edit the page with Elementor.
- Search for
TIP Product Slider. - Drag the widget into the page.
- Open the Saved slider section.
- Select the slider you want to display.
- Update the page.
Saved slider
Selects which saved slider should be rendered. The selected saved slider is displayed inside the Elementor page. If no saved slider is selected, the widget displays a notice asking you to select a saved product slider.
TIP Product Slider Builder widget
What it does
Allows you to create a custom WooCommerce product slider directly inside Elementor.
When to use it
Use this widget when you want to configure a slider specifically for the current Elementor page.
Effect on the frontend
The widget renders a product carousel based on the settings configured in Elementor.
Important notes
If you need to reuse the same configuration across multiple pages, create a saved slider in the plugin panel and use the standard TIP Product Slider widget.
Builder widget settings
The Builder widget settings are divided into sections:
- General
- Products
- Content
- Carousel
- Add to cart button
- Navigation arrows
General
Template
Selects the frontend template.
Available options
- Classic
- Card
- Overlay
- Minimal
- Centered
- Compact
- Hero
Use it to match the product slider with the design of the Elementor page.
Products
The Products section controls which WooCommerce products are displayed.
Available settings
- Number of products
- Order by
- Order
- Filter products
- Products to include
- Products to exclude
- Filter by product categories
- Categories to include
- Categories to exclude
- Filter by product tags
- Tags to include
- Tags to exclude
- Filter sale products
- Featured products
- Free products
- Only in stock products
Product, category, and tag IDs
Allows you to manually enter IDs for products, categories, or tags. Use it when you want full control over which products are included or excluded. IDs must be entered as comma-separated values.
12,34,56
Content
The Content section controls the product information displayed inside each slide.
Available settings
- Image
- Title
- Price
- Rating
- Sale badge
- Add to cart
- Category
- Short description
- Sale percentage
- Excerpt words
Short description
Displays the WooCommerce product short description.
Excerpt words
Controls the number of words displayed from the short description. This option only affects the frontend when Short description is enabled.
Carousel
The Carousel section controls the slider behavior.
Available settings
- Columns
- Slides to scroll
- Space between slides
- Autoplay speed
- Transition speed
- Autoplay
- Infinite loop
- Arrows
- Dots
- Pause on hover
- Adaptive height
- Draggable/swipe
- Lazy load images
Columns
Controls the number of visible products.
Available responsive controls
- Columns – Desktop
- Columns – Tablet
- Columns – Mobile
Slides to scroll
Controls how many slides move when the visitor uses the carousel navigation.
Available responsive controls
- Slides to scroll – Desktop
- Slides to scroll – Tablet
- Slides to scroll – Mobile
Autoplay
Automatically advances the carousel. Autoplay speed controls the delay between automatic movements.
Add to cart button
This style section controls the WooCommerce add to cart button inside the slider.
Available settings
- Button background color
- Button background color on hover
- Button text color
- Button text color on hover
- Button border radius
Use these options to match the button style with the Elementor page design.
Navigation arrows
This style section controls the carousel navigation arrows.
Available settings
- Arrow background color
- Arrow background color on hover
- Arrow text color
- Arrow text color on hover
Use these options to customize the arrow colors in normal and hover states.
License notice
If the Pro license is not active, the Elementor widget settings are locked. Existing sliders can continue rendering on the frontend, but editing widget settings requires an active Pro license.