TIP Product Slider Pro adds Gutenberg blocks that allow you to display WooCommerce product sliders inside the WordPress block editor. The plugin includes two blocks:
- TIP Product Slider
- TIP Product Slider Builder
Both blocks are dynamic blocks. This means the slider is rendered by the plugin on the frontend and can update according to the current products and settings.
TIP Product Slider block
What it does
Displays one saved product slider.
When to use it
Use this block when you have already created a slider from the plugin panel and want to insert it inside a page or post without manually using the shortcode.
How to use it
- Open the WordPress block editor.
- Click the add block button.
- Search for
TIP Product Slider. - Insert the block.
- In the block sidebar, open the Saved slider section.
- Select the slider you want to display.
- Update or publish the page.
Available settings
Slider
Selects the saved product slider to display. Use it to choose one of the sliders created from the plugin admin panel. The selected saved slider is rendered on the page. If no saved slider is selected, the block displays a message asking you to select
a saved product slider.
TIP Product Slider Builder block
What it does
Allows you to build a custom WooCommerce product slider directly from the block editor.
When to use it
Use this block when you want to configure a slider only for the current page, without relying on a saved slider from the plugin panel.
Effect on the frontend
The plugin renders a product slider using the settings configured inside the block.
Important notes
The block settings are stored inside the page content. If you need to reuse the same slider in multiple pages, create a saved slider and use the standard TIP Product Slider block instead.
Builder block settings
The builder block settings are divided into sections:
- General
- Add to cart button
- Navigation arrows
- Products
- Content
- Carousel
General
Template
Selects the frontend layout of the product slider.
Available options
- Classic
- Card
- Overlay
- Minimal
- Centered
- Compact
- Hero
Use it to choose the visual style of the product cards. The template affects the visual layout only.
Products
Number of products
Sets how many products should be displayed. Use -1 to display all matching products.
Order by
Sets the field used to sort products.
Available options
- Date
- Title
- Price
- Sales
- Rating
- Menu order
- Random
Order
Sets ascending or descending product order.
Available options
- Descending
- Ascending
Filter products
Allows you to include or exclude specific products.
Available options
- None
- Include specific products
- Exclude specific products
Product IDs must be entered as comma-separated IDs.
12,34,56
Filter by product categories
Allows you to include or exclude products from specific WooCommerce categories. Category IDs must be entered as comma-separated IDs.
Filter by product tags
Allows you to include or exclude products from specific WooCommerce tags. Tag IDs must be entered as comma-separated IDs.
Filter sale products
Allows you to include or exclude products currently on sale.
Available options
- None
- Include sale products
- Exclude sale products
Featured products
Displays only WooCommerce featured products.
Free products
Displays only products with a zero price.
Only in stock products
Displays only products marked as in stock.
Content
The Content section controls which product elements are visible inside each slide.
Available options
- Image
- Title
- Price
- Rating
- Sale badge
- Add to cart
- Category
- Short description
- Sale percentage
- Excerpt words
Excerpt words
Sets how many words are displayed when Short description is enabled. Set the value to 0 if you do not want to display excerpt text.
Carousel
The Carousel section controls the responsive slider behavior.
Available options
- Desktop columns
- Tablet columns
- Mobile columns
- Desktop slides to scroll
- Tablet slides to scroll
- Mobile 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
Sets how many products are visible at the same time. Use different values for desktop, tablet, and mobile to create a responsive layout.
Slides to scroll
Sets how many products move when the user navigates the carousel.
Space between slides
Sets the horizontal spacing between product slides.
Autoplay
Enables automatic carousel movement.
Autoplay speed
Sets the delay between automatic slide changes. The value is applied in milliseconds.
Transition speed
Sets the speed of the slide animation. The value is applied in milliseconds.
Arrows and dots
Control the visibility of carousel navigation elements.
Add to cart button
This section controls the style of the add to cart button.
Available options
- Button background color
- Button background color on hover
- Button text color
- Button text color on hover
- Button border radius
Navigation arrows
This section controls the style of the carousel arrows.
Available options
- Arrow background color
- Arrow background color on hover
- Arrow text color
- Arrow text color on hover
Alignment
The Gutenberg blocks support wide and full alignment. Use wide or full alignment when you want the product slider to occupy more horizontal space inside compatible themes. Alignment support depends on the active WordPress theme.
License notice
If the Pro license is not active, the block settings are locked in the editor. Existing sliders can continue rendering on the frontend, but the block settings require an active license to be edited.