How to Use WooCommerce Slider Widget

How to Use WooCommerce Slider Widget

In general, we see multiple racks at a physical store. Where we can display our products. On the contrary, however 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 pictures detailed below.

To Insert Widget

To insert widget into the section actually more or less is a fun. Simply, drag and drop your widget you want to use for your project. As you see in the screenshot above.


Content Tab

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.

Now, I’m going to show the sections of the tab and how they work behind the widget.

Layout

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.

Slider Settings

Go to the Content tab > Slider Settings.

You know Panel Slider widget is animation supported. Form 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 slider.

Here, you’ll find a scroll bar to handle the height of the slider. And the scroll control is Minimum Height.

Additional

Just, go 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.

Read More

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.

Navigation

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

For example,

Go to Navigation ( as such Arrows) > Arrows Position (as such Bottom Left).

Query

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 AuthorCategoriesTags, and Formats. The references can be different in accordance with the source location. Read more 

For example, 

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 products type.

E. From the Show Products, you can define the product type(such as On SaleFeatured ).

F. Order By and Order controls are here to arrange the data you want to display through DatePriceSale or Random, and also with ascending or descending order.


Style Tab

Now, let’s work with 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.

Content

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.

Price

Now, you come to the Price section. Here, you will be able to add ColorMargin, and Typography to the Regular Price and Sale Price.

Title, Text and Rating

These three sections will let you add Color, Active ColorMargin, and Typography to the Title and Text(description) and Rating. However, the controls can be different in accordance with the sections.

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.

Normal:

Hover:

Read More

The functionality of this section is quite similar to the section, Add to Cart Button. See the picture above.

Badge

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. See the image example.

Arrows

From this section, you’ll be able to style Navigation item (Arrows, Arrows and Dots, Dots or, none).

Simply, go to the Navigation > Arrows > Position.

Video Assist

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.


About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.


Enjoy Black Friday Exciting Deals Right Now. Grab The Deals Before The Time Ends!

Day
Hour
Min
Sec