Overview
Display your WooCommerce products and filter the exact products you want to display with this widget.
Transcript
hey everyone this is Noah from Elementor
today we’ll be going over the wood
products widget with which you could
display WooCommerce products on your
page with only a few simple settings
so first we’ll search for the widget and
drag it in and what’s abstract and you
will see the content area of the widget
where you have full control over the
layout and filter settings now note that
the style of the widget is influenced by
the theme style settings for WooCommerce
so in the layout here you could set the
amount of columns and the products that
are displayed with the widget so for
columns you have between 1 and 6 say you
could choose to two columns or six
columns etc and for the products count
you could set the exact amount of
products that you want for example 2 or
20 and so on
next for the filter you could choose the
source so you have either products or
manual selection for the products you
could set the categories and tags of the
products to display and for the manual
selection you could set the exact
products that you want to display and
we’ll get to it right after this so for
the products I set the categories so for
example I have a category of hoodies and
t-shirts alright so now you could see
that the widget is displaying only the
products of the categories that I set
here meaning hoodies and t-shirts same
goes for the product tags I could set
here the exact tags that I want to
display so say I have a fashion tag in
my shop
and camera so as you can see it’s
displaying only the camera and fashion
tags of my shop next we have order by
where you could set the order for the
products displayed with the widget so
you could set it by date title price
popularity rating or randomize it and
then you have order where you could set
it as ascending or descending so that
was for the product source next we have
manual selection source where here you
could actually search and select the
exact products that you want so say I
know I have a products named blue jacket
alright so here as you can see it
automatically recognizes the blue jacket
for men product that I have in my shop
so I click on it now as you could see it
automatically displayed the blue jacket
for men product that I chose so for this
source of manual selection I also have
the order by an order options so again
order by I could order it by date and
all the way to randomize it and for
order I have ascending or descending now
that we went over the widgets basics
I’ll just show you a few quick examples
of how to display this widget along with
other elements so if we scroll down here
you’ll see this really nice section a
full width section with a background
image and overlay and here we placed a
really nice button so this is actually a
rather standard WooCommerce products
widget as you could see it’s still at
default the columns for columns and for
products count and with no filter at all
and it still looks great
and the next section is divided into two
different columns the first column with
a heading and text and a button and the
second column has the widget with two
columns and two products count and the
filter is product categories I set it as
suits so as you could see it displayed
two products from the suits category of
my shop so basically this widget is very
helpful for those of you building a
virtual shop website I hope you enjoyed
this video for more videos on tutorials
subscribe our youtube channel or visit
us at Doc’s Elementor com
