Adding a product slider in WooCommerce can be a great way to show off your products and increase sales. If you’re looking for a slider to showcase your products on your WooCommerce or Elementor, you may be out of luck. Neither of these platforms has a built-in slider feature, but that’s where UltraAddon comes in.
You can add a product slider in WooCommerce using the UltraAddon Elementor Pro plugin. This plugin allows you to add a product slider to your WooCommerce store easily. UltraAddon is a plugin that lets you create slideshows of your products with just a few clicks. UltraAddon has a slider that lets you easily create an attractive and functional slider to show off your products.
This article will show you how to add a product slider in WooCommerce by using UltraAddon Elementor.
Table of Contents
How to add a Product Slider in WooCommerce by Using UltraAddon Elementor pro:
With Ultra Addons, you can integrate a WooCommerce Product Slider into Elementor. It is more convenient than the traditional method. Let’s have a look at how the procedure works.
When you use the Elementor Search Widget box to look for a product slider, you’ll see three different types of sliders.
1. Product Slider
2. Product Carousel
3. Product Flip Carousel
You don’t have to be worried because they’re all following the same process to add a Product Slider in WooCommerce.
So, here we are discussing only the product Flip carousel.
When you drag and drop this widget as per your preference, you will see a slider like below.
All your products will show up on your slider. You can customize it, so why not do it?
Have a look at the six types of section tabs that will help you customize your product flip slider on demand.
A. Query Setting:
1. Description Length: product details length.
2. Show Products: How many products do you want to show in your slider? This section will help to do it.
3. Page Number: Usually, you have lots of product pages; you can choose which shop page products you want to show on your slider.
4. Order: You can set your products to sort in ascending or descending order.
5. Orderby: Product is shown in slider order by None, Id, Name, Type, Random, and Modified.
6. Select category: Set products catagory.
7. Select Tag: You can set product attributes as like tags.
8. Product by included IDs: Add multiple product ids that only you want to show on your slider.
9. Product by excluded IDs: You can set their product IDs to which product you don’t like to show on your slider. Use comma-separated when you add multiple ids.
B. Slider Options:
1. Slider to Show: You can also decide the number of slides you want to show in each slider from the Slides to Show drop-down menu. Up to 6 slides can be shown in one slider.
2. Gap: This toggle switch button sets the spacing between two products on a slider.
3. Auto Play: Get the slides to rotate automatically, according to the speed you set.
4. Auto Play Interval: Set the time it takes for the slide to start rotating.
5. Pause on Hover: The toggle switch button sets the slide to pause when the mouse hovers over it.
6. Reveal: All the content takes the same size of the block on the slider.
C. Navigation Settings:
1. Navigation: Choose to display Round with arrows, Chevron, Arrow, Caret, Caret filled, Square with chevron dots or none.
2. Dark: This toggle switch button sets the background color of the Navigation.
3. Always Visible: The toggle switch button allows navigation to be visible on the slider or not.
4. Navigation Outside: If you use this toggle switch button, the navigation show will be outside the slider.
5. Small: Reduce the overall size of navigation.
You will see Navigation on a slider like below.
Indicators Settings:
1. Indicator Shape: Choose to display the indicator shape
as Default, Round Square.
2. Indicators: The toggle switch button allows Indicators to be visible on the slider or not.
3. Indicator Outside: The indicator shown will be outside the slider using this toggle switch button.
4. Indicators Highlight: You can set Indicators highlight.
5. Indicators Dark: Change the Indicators background color.
6. : If you want to show Indicator on the mobile device, you can enable this option.
You will see Indicator on a slider like below.
D. General Settings:
1. Animation Style: Set the animation effect of the content’s display when the slide is shown: horizontal or vertical.
2. Select Front Title Tag: Set the Front Title’s tag to H1-H6 or Div.
3. Select Back Title Tag: Set the Back Title’s tag to H1-H6 or Div.
E. Animation Options:
1. Enable Animation: If you want to set the animation effect overall slider, you must enable the toggle switch button.
2. Select Animation: You can set the animation effect all-around sliders.
Related Post
F. Wrapper Link:
just like other cool widgets of Ultra Addons, the Ultra Slider also brings the Wrapper Link section where you can insert your desired URL; not only you can insert an URL but also add a nofollow rule to it, make it open in a new window, and insert Custom Attributes by clicking the settings icon.
You can also include Dynamic Content by clicking the link beside the settings icon. Then, press the SEE IT IN ACTION button to find out more.
G. Hover Effect:
Ultra Addons feature numerous hover effects for all of its widgets. Just head towards the Hover Effect section and select the animation that you like the most for the Pricing Table.
Final Words
Adding a product slider in WooCommerce is a great way to showcase your products and increase sales. UltraAddon Elementor makes it easy to add a slider, and there are many customization options available, so you can make the slider look precisely the way you want. So be sure to check out UltraAddon Elementor if you’re going to add a product slider to your WooCommerce store. Elementor and WooCommerce do not have a built-in option to create a product slider, but UltraAddon does. This plugin is easy to use and can be customized to fit your needs. If you are looking to showcase your products, UltraAddon is the best option available.