fbpx

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

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.

Table Skin

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

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.

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

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:

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

Hover:

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

Image

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.

Price

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:

Hover:

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

Badge

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 )

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:

Go to Filter Bar > Desktop > Normal.

Active:

Go to Filter Bar > Desktop > Active.

Mobile

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.

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