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 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 tab > Layout 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 Autoplay, Autoplay Speed, Pause on Hover, Center Slide, Grab 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.
