In terms of e-commerce business, we have to work with products. Interestingly, the WooCommerce Products widget is one of the best solutions ever for the trouble of showcasing the products.
In the doc below, I’m going to show you how to use the widget. Just, follow the instructions with pictures detailed.
N.B: If you don’t have any prior knowledge about WooCommerce, you can read this doc How to Use WooCommerce Plugin.
So, let’s get it started.
To Insert Widget
Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above, drag the Elementor WooCommerce Products inside your page in designing one of the useful WooCommerce plugins.
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 Content Tab and how they work behind the WooCommerce products widget.
Just, go to Content tab > Layout.
In general, this section will allow you to set Skin ( Table ) with the default one. In addition, you can go for Columns, Column Gap, and Row Gap to adjust them.
Mostly, using the controls Alignment, you can set the alignment of product title and price and from the Image Size control, you can set the size of the images for the WooCommerce plugins by Element Pack.
The most important thing is the switchers Show Filter & Masonry. When you will activate the Show Filter switcher button, there you’ll find another switcher button named Hash Location.
N.B: Show Filter – will help you to filter the products. On the other hand, Hash (#) Location – will allow you to filter the products with the location.
Simply, go to the Content tab > Layout > Skin > Table.
If you go for the Table Skin, you will get the layout seen in the screenshot above.
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 of the WooCommerce Products widget. 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, for excluding product use product ID in the Exclude Product(s) field.
D. Especially, here, using the controls Hide Free and Hide Out of Stock, you can manage the products type.
E. You can also set the Pagination.
F. From the Show Products, you can define the product type(such as On Sale/ Featured ).
G. 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.
This section will allow you to manipulate Show Badge, Ordering, Title, Title HTML Tag, Rating, Price, etc. See, if you on Cart Hide On Mobile, the cart will be hidden and through Quick View, you’ll be able to view product quickly.
Also, you can set Grid Entrance Animation (like, Fade, etc.)
Simply, go to the Content Tab > Additional > work with the controls and hit on the yes/no switcher button.
It is time to work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you want to design the WooCommerce Products widget.
Styling with the Style tab in Elementor will always give you a fantastic experience.
Let’s have a look.
In this section, under the modes (Normal and Hover), you will be able to style(Such as Background, Box-shadow, etc.) the product description (Title, Price, and Review). See the images below.
Just, go to the Style tab > Item > Normal.
Only, come to the Style tab > Item > Hover.
Only, go to the Style tab > Image.
From this section, you can go for the Border Type, Width, Color, Border Radius, Box Shadow of the Elementor WooCommerce products.
Title, Excerpt and Rating
These three 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.
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.
You, here, under the modes (Normal and Hover) will be able to style the button. As you see the following.
Just, go to the Style tab > Button > Normal and Hover one by one.
If you enable the Pagination switcher button from the Content tab, then you might see the Footer section under the Style tab. One more thing, but, Pagination mode depends on Skin (Default or Table )
Simply, go to the Style tab > Footer > Pagination.
In the section, you can adjust Alignment, Typography and Bottom Space. In advanced, you’ll find Desktop and Mobile mode. Both modes will allow you to style the Filter Bar.
From here, you can go for the Normal and Active. After that, just use the controls and style for the WooCommerce Products widget.
Go to Filter Bar > Desktop > Normal.
Go to Filter Bar > Desktop > Active.
Go to Filter Bar > Desktop > Active.
From this section, you can use the controls and style only for the Mobile. See the screenshot above.
At the end of this documentation, I hope you’ve noticed what is WC-Products Widget by Element Pack and how it works for you. 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.