fbpx

Table Of Contents

WC-Carousel widget

How to Use WC-Carousel Widget

WC-Carousel widget allows multiple pieces of content ( such as text, image, video, etc.) on large or small viewports to occupy a single, coveted space. Here, in the documentation below, I will show How you can use the WC-Carousel widget to present your products in a carousel.

What’s more, I’ll instruct you with pictures detailed. So, let’s dive into the doc.

To Insert Widget

inserting WC-Carousel widget

Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above, drag the WooCommerce product carousel inside your page.


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

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

Layout

Go to the Content tabLayout section > and check all controls as instructed below.

This section will allow you to set determine Column numbers and Column Gap between every single item. As well, you’ll be able to adjust Image size, Text Align, and Title HTML Tag.

Here, the important thing is switcher buttons that will let you manage the contents(i.e Badge, Title, Rating, Price, Add to Cart, etc.) of the WC-Carousel widget. See the portrait above.

Mostly, the Quick View switcher button, utilizing this button, you can set a quick display effect with your product items. As you see in the image above.

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 Author, Categories, Tags, 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 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 for the carousel widget.

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 for the controls under Navigation

For example, Go to Navigation ( as such Arrows and Dots) > Arrows Position (as such center). If you need to hide navigation symbols in mobile mode, it’s a matter of one click on the switcher.

N.B: You can make the bullets dynamic. Just, you’ve to enable the switcher Dynamic Bullets. And also, you can show scrollbar enabling the Show Scrollbar? switcher button.

Carousel Settings

Go to Content tab > Carousel Settings.

Here, this section will allow you to set the carousel behavior. From here, you should work mainly with AutoplayAutoplay SpeedPause on HoverCenter SlideGrab Cursor, Loop and Animation Speed.

More importantly, from the layout control, here, you can go for the Coverflow/ Carousel. And another thing is Item Match Height and it will let you match the height of the columns for the WooCommerce product carousel.


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 the WC-Carousel widget. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Item

In this section, under the modes (Normal and Hover), you will be able to style (Such as Background, Box-shadow, etc.) of the product description. See the images below.

Normal:

Hover:

Quick View

Here, under the modes (Normal and Hover), in terms of Quick View, you’ll be to style (Such as Background, Box-shadow, etc.) the sections. Just, firstly, go to the Style tab > Quick View. See the images below.

Normal:

From the Quick view section go to the Normal.

Hover:

From the Quick view section go to the Hover.

Badge

Simply, go to the Style tab > Badge > then add style to the content.

Title and Rating

These two sections will let you add Color, Hover Color, Active Color, Margin, and Typography to the Title and Excerpt (description) and Rating. However, the controls can be different in accordance with the sections for the carousel widget.

Price

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

Add to Cart Button

Simply, go to the Style tab > Add to Cart Button.

Navigation

The navigation 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 and the subsection Scrollbar Style of the WC-Carousel widget.

Video Assist 

To sum up, hopefully, you have seen what things our widget includes.  And the things will help you get started all you want. See the video inserted above and to get more design knowledge, hook yourself with the demo page here.

SIGNUP NEWSLETTER

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

Enjoy Black Friday Exciting Deals Right Now. Check Here
© Copyright 2021 All Rights Reserved by BdThemes

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

Day
Hour
Min
Sec