Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

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.


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.


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.


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.


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.


wc products widget style 1 - BdThemes

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


wc products widget style 2 1 - BdThemes

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


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.


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.


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


wc products widget style 6 - BdThemes


wc products widget style 7 - BdThemes

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


wc products widget style 8 - BdThemes


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.


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


wc products widget style 10 - BdThemes

Go to Filter Bar > Desktop > Normal.


wc products widget style 11 - BdThemes

Go to Filter Bar > Desktop > Active.


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.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.