Table Of Contents

WooCommerce Products widget

How to Use WooCommerce Products Widget

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

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 Content Tab and how they work behind the WooCommerce products widget.

Layout

wc products widget 2 2 - BdThemes

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.

wc products widget 3 - BdThemes

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.

Table Skin

wc products widget 5 - BdThemes

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.

Query

wc products widget 6 - BdThemes

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 

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

wc products widget 4 - BdThemes

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.

Additional

wc products widget 7 - BdThemes

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.


Style Tab

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.

Item

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.

Normal:

wc products widget style 1 - BdThemes

Just, go to the Style tab > Item > Normal.

Hover:

wc products widget style 2 1 - BdThemes

Only, come to the Style tab > Item > Hover.

Image

wc products widget style 4 - BdThemes

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

wc products widget style 3 1 - BdThemes

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.

Price

wc products widget style 5 - BdThemes

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.

Button

You, here, under the modes (Normal and Hover) will be able to style the button. As you see the following.

Normal:

wc products widget style 6 - BdThemes

Hover:

wc products widget style 7 - BdThemes

Just, go to the Style tab > Button > Normal and Hover one by one.

Badge

wc products widget style 8 - BdThemes

Footer

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 )

wc products widget style 9 - BdThemes

Simply, go to the Style tab > Footer > Pagination.

Filter Bar

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.

Desktop

From here, you can go for the Normal and Active. After that, just use the controls and style for the WooCommerce Products widget.

Normal:

wc products widget style 10 - BdThemes

Go to Filter Bar > Desktop > Normal.

Active:

wc products widget style 11 - BdThemes

Go to Filter Bar > Desktop > Active.

Mobile

wc products widget style 12 - BdThemes

Go to Filter Bar > Desktop > Active.

From this section, you can use the controls and style only for the Mobile. See the screenshot above.

Video Assist

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.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.