In general, we see multiple racks at a physical store. Where we can display our products. On the contrary, however using the WooCommerce Slider widget differently but smartly, we might showcase products on the online store. Here, I’ll show how you can use WooCommerce Slider Widget to represent your products smartly through a slider.
Follow the instructions with the pictures detailed below.
To Insert Widget
To insert a widget into the section actually more or less is fun. Simply, drag and drop the WooCommerce Slider widget in Elementor that you want to use for your project. As you see in the screenshot above.
Using the Content Tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot in designing the image sliders.
Now, I’m going to show the sections of the tab and how they work behind the widget.
Simply, go to the Content tab > Layout.
Firstly, you should come to this section to manage the Layout of the content. See, here, you can adjust the text alignment horizontally and vertically. Moreover, you determine the Image Size.
Mostly, you might go for the Content Reverse switcher button. And this button will help you to change the position of the contents of the slider.
Go to the Content tab > Slider Settings.
You know the Panel Slider widget is animation-supported. From this section, you can go for the animation (Slide, Fade, Scale, Push, and Pull).
One important thing is switcher buttons such as Autoplay, Pause on Hover, and Slideshow Fullscreen. Using these buttons, you can easily manage the behavior of the product sliders.
Here, you’ll find a scroll bar to handle the height of the slider. And the scroll control is Minimum Height.
Just, go to the Content tab > Additional.
In this section, you can manage all the contents of the slider. Just, you have to turn off and on the switcher buttons. In addition, you can select a heading tag from the Title HTML Tag control of the WooCommerce Slider widget.
Read More (alternatively, it is called the call-to-action button) mainly guides the users towards the goal. Here, you can add text and an icon or image to the button.
For example, go to the Read More Button section and set an icon as you see from the icon library along with icon position and spacing.
This section is a field used to control the movement of things from one place to another place. To work with the section, just go to the controls under Navigation.
Go to Navigation ( as such Arrows) > Arrows Position (as such Bottom Left).
Go to the Content tab > Query.
This section works for setting the source location of data that you need to display by the reference like Author, Categories, Tags, and Formats. The references can be different in accordance with the source location. Read more
A. Go to Source ➤ next select data location( as Manual Selection.)
B. Then set the categories from the Categories field.
C. On the other hand, the Exclude Product(s) field will allow you to add product Id with a comma to display the specific products. As well, you can go for the Product Limit.
D. Especially, here, using the controls Hide Free and Hide Out of Stock, you can manage the type of the product.
E. From the Show Products, you can define the product type(such as On Sale/ Featured ).
F. Order By and Order controls are here to arrange the data you want to display through Date, Price, Sale, or Random, and also with ascending or descending order through the WooCommerce Slider widget in Elementor.
Now, let’s work with the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design.
Styling with the tab in Elementor will always give you a fantastic experience.
Let’s have a look.
Just, go to the Style tab > Content.
Background control will allow you to add a background color to the Content only. On the contrary, Item Background control will allow you to add a background color to the whole Item of the product sliders.
Now, you come to the Price section. Here, you will be able to add Color, Margin, and Typography to the Regular Price and Sale Price.
Title, Text and Rating
These three sections will let you add Color, Active Color, Margin, and Typography to the Title and Text(description) and Rating. However, the controls can be different in accordance with the sections for the WooCommerce Slider widget.
Add to Cart Button
Simply, go to the Style tab > Add to Cart Button. From this section, you’ll be able to style under the two modes Normal and Hover. See the screenshot below.
The functionality of this section is quite similar to the section, Add to Cart Button. See the picture above.
In this section, you come to the Badge section. Here, you will be able to add Color, Background color, Margin, and Typography to the Badge for the image sliders. See the image example.
From this section, you’ll be able to style Navigation items (Arrows, Arrows, and Dots, Dots or, none).
Simply, go to the Navigation > Arrows > Position.
At the end of this documentation, hopefully, you’ve seen what is WooCommerce Slider Widget by Element Pack and how it works. Watch the video inserted above. If you want to discover what more is possible to do using this one, you can visit the demo page.