fbpx

Table Of Contents

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


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 in designing the image sliders.

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

Layout

inserting the WooCommerce Slider 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.

Slider Settings

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.

Additional

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

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 type of the product.

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 through the WooCommerce Slider widget in Elementor.


Style Tab

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.

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 of the product sliders.

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

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

Arrows

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.

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.

SIGNUP NEWSLETTER

Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Missed Black Friday offer this year? Get up for flat 50% discount right now. Check Here

© Copyright 2021 All Rights Reserved by BdThemes

Missed the Black Friday offer this year? Get up for flat 50% discount right now.