How to make a woocommerce product grid in WordPress using elementor free [ 2021 - Step By Step ]

 

going to have a section like

this one over here on your website so as

you can see this

is a grid section right so your products

are going to be arranged in a very very

nice section and you can arrange these

products according to new arrival

best selling the ones that are on sale

even depending on the price

so before we start my name is kuzai from

adwords.com and i'm going to be teaching

you today

how to make this section step by step so

before we start again

i would really appreciate it if you

could just subscribe because i'm going

to be making a lot of cool tutorials on

this channel

and if you appreciate something like

that just smash the subscribe button and

leave us a like okay

so let's get started so the first thing

i'm gonna do right now is i'm going to

go back to my

wordpress dashboard right so just going

back to my websphere dashboard as you

can see right now

i have two things installed

i have woocommerce a and

some products right so if you're going

to start this tutorial you're going to

need to have

woocommerce and some products and if you

don't know what that is then maybe this

is the wrong tutorial for you right

because this is just a great page

tutorial

so let's get started now so the first

step i want you to do

first of all is to make sure that you

have the page that you want to make the

grid for

so right now as you can see if i go to

my pages i have the

card page the checkout page the home

page so i'm going to be putting my

grid on the home page you can put it on

whatever page you want to just add a new

page all you have to do is just hover

over you over here

then click page then you can create a

new page on which you're going to be

adding your grid i'm sure if you've been

using wordpress for some time this is

going to be like super easy for you

so now the next step i want you to take

is i want you to add some plugins right

so we're going to add two plugins we're

going to add elementor

and an elementor add-on so to add a

plugin just

go to the left side on plugins then

click

add new

okay so we're going to be searching for

two plugins here are going to be

searching

for elemento elemento

just type it in over there then

what in the garbage is this

okay this is the website this is this is

the plugin that i'm looking for

click install now

the other plugin that we're looking for

fortunately it's just

right next to this one so we're looking

for the essential add-ons for elementor

this plugin over here click install now

as well

so for now these are the only two

plugins that i want you to install

you can add one extra plugin for extra

features but for now

just add these two plugins and let's

just create the section that you want

you know so that you know

your customers can have a better

experience on your website so let's now

go to install plugins

we just want to activate our plugin so

let's just click tick

tick here bulk actions activate and

click apply

so now this is the list of plugins that

i have

so i'm sure you have a lot more plugins

in your in your website but just make

sure that you at least have these three

plugins these are so important

for this to work if you don't have

woocommerce you don't have no products

so let's just take a brief look at the

number of products that i have

so these are my products as of right now

these are my products i'm sure you have

your very own products

so now we have our products we have the

three plugins that we want to use

now the next thing is we create the grid

section right that's what you came here

for

so let's go to pages

then i'm going to click on home here

then i'm going to click edit

now make sure that on page attributes

here

the template it's uh elemental full

width right

it's just it just makes it look way way

better than you know the custom you know

theme

the theme layout is not that great so

elementor full width

is going to do much much better for you

then i'm going to click over here edit

with elementor and it's now loading

okay now we are inside the section that

we really want to

add to our website so the first thing

i'm going to do is i'm going to add

a column on top right so let's drag a

widget let's click this one

then click this box over here

now this is how you use elementor you

just drag in a column

this easily that's it so now i want you

to click on the

on the rubik's cube on top here on the

left

just click that cube i don't know if

it's called rubix or whatever it's

called

okay now let's search for first of all

you're going to have to add the heading

right let's add the heading

let's call this heading let's say this

is going to be our heading

let's just put it to the center on

alignment just click

center this is going to be the heading

you're going to you know put like

let's say you want to write over here

new arrivals

let's say you want to put new arrivals

right okay

great now let's add something else

so now we want to make the the grid

section that you came here for

so let's click on the rubik's cube again

then here i'm going to be searching for

post grades

products grid i'm going to be searching

for product grid

so just type in grid here

so as soon as you type in grid you're

going to notice that on the left

sidebar here there's product grid

there's post grid data table all these

other greens

the grid that we want is the product

grid and that

product grid should have ea on top

which stands for essential add-ons

that's the plugin that we added you know

the the previous time

so let's just drag in that

module and just put it under new

arrivals here

bam just like that now i'm sure you also

notice that this looks

very ugly like what in the world of

design is this garbage right this is

this looks terrible so we gotta

we have a lot of work to do to improve

this they are so space they have this

you know this this bed display we don't

want this this looks so terrible

so the first thing we're going to do is

let's change the layout right

this layout looks terrible let's change

it to

grid so go on the layout then go to grid

and just like that you'll notice that

the products are now inlined in a very

very nice way

and then we also want to change the

number of

products that are on the page because

why would you want to have a grid if you

only have four products you know that

that doesn't make sense let's put in

some more products you know what let's

put in somewhere around

six and then change the columns to three

right

three columns two rows six products

let's do that

so here under layouts you're going to

have grid style preset

leave it to simple style then columns

change it from four to three

okay we now we have three columns but we

want to increase the number of products

in this column so we now have four

products now let's go to product

settings just click on product settings

let's change the products count from

four over here

to six

aha now as you can see we now have six

products and it

it looks much much better then click on

update so as we make our website we want

to make sure that we are also reviewing

how it looks like okay

so let's go to our home page this is my

homepage since i'm

developing this uh this section on the

homepage you you just have to go to the

page that

you put the grid on then i'm going to

refresh and just let's just see how it

looks like right now

so you see we now have this uh the grid

it looks very nice

very very nice so let's change something

else over here

i know that we have way more products in

our store than just

six products so we want to show all of

them so we want to have like a load more

button on the bottom over here

i know that on my final design here

there is no load more button because i

intentionally did that so

what you want to do is first of all i

don't know if you're like me but

i don't click black buttons and no

customer clicks black buttons so we want

to change these black buttons to

something you know something more

clickable something

a customer feels like you know i want to

click this i don't know why but they'll

just want to click it

then we also want to make sure that we

order

our products you know by new arrivals or

by best selling or

you know the way you want to order it

right this is going to be depending on

you but

i would order it with new arrival

because that's much much better

now let's get back to it

okay let's get back here so the first

thing i'm going to do

is i'm going to go to the add to cart

button

i'm not going to do that depreciation

over here and it says show pagination

so i'm so as you can see right now it's

on hide i'm going to

activate that and as soon as i do that

you just look

just below over here there's now one and

two

which means it's now showing all the

products you know

and your customers can just go to the

next page and the next page in the next

page and look for the product that they

want you know with that pagination over

there

if you look over here before we didn't

have that so let's just click on

update

then let's go to my wordpress website

over there and just

refresh the page and as you can see we

now have that uh this imagination which

is

really essential for customers you know

because they want to

see what kind of products you you have

you know everybody likes just browsing

through the store you know

even if they're not going to buy

anything they might still want to do it

and they have to do it

so let's see the second page we just

click two and this is now the second

page which

shows the other products so that looks

nice

now let's get back here now let's change

this pattern over here because i am not

liking this button this

is this is horrible this is not the ad

that was on the

thumbnail so let's change it from like

just go

to the tab and click style

edit for the grid and click style so

this is uh the product section we're

just going to

close that for now because what we want

to edit is the add to cart

button styles right so let's click add

to cut button styles

here and the background as you can see

here

it's black and no

no no no no let's change that so i want

the edge to cut button to match with the

stars you know

the stars over the stars looks really

nice and i want that color on my button

so

i'm going to go back to color and

typography here

and as you can see there is a star

rating

a rating color over here you just have

to click that

and let's copy that color and copy

now let's go back to the button that we

want to add

to change the color and go to background

click it then just paste

ah now this looks much much better now

we have you know like a consistent color

on our website you know the stars look

like that and the button you know

resonate with the stars and your

customer is just gonna love this you

know

they are going to appreciate that you're

putting a lot of work into your website

so let's just go down and see if there

is anything we need to check

so for now let's just update and yeah

let's just go and see how it looks like

on our website

okay so this is nice this is nice this

is exactly what we wanted

now let's get back over there and let's

see if there is anything else we need to

check

so first of all how are these products

being ordered you know you don't just

want the products to be ordered in some

random way so as we said before we want

this product to be ordered by you know

new arrival or by category or whichever

way you want to

order these products and if you've had

some sales on your website you can

actually order this

using best selling so that could be the

best you know because if somebody bought

a product they're most likely to just

buy it again so let's

let's go back

to content and product settings

now you're going to say filter by

over here it shows recent products so

you can change this to

featured products best selling products

sell products

if i click let's say sell products

you can see that it's now only showing

the products that are on sale here so

let's just say update

and let's just go refresh our page now

you can see that

only the products that are on sale are

being displayed but

as you can see my title says new

arrivals which means i have to go back

to the one that i chose the first time

so i'm so if you want your products to

be like on sale if this is going to be

like on sale

section showing a grid of products on

sale then that will be fine

you can choose whatever you want so i'm

just going to put this back to

recent products for new arrivals and

click

update okay

so this was it for this tutorial

but however before you go i would really

appreciate your subscribe it would mean

a lot to me and i'm also planning on

releasing a

full tutorial on how you can make a

website like this one

over here it's a full e-commerce website

where your customers are going to really

appreciate the work that you've put into

it

so if you want to see this tutorial if

you also want to see like some

extra wordpress tutorials you can just

subscribe to this channel i'm going to

be releasing videos on monday wednesday

and friday and i'm sure i will not

disappoint you

see you next time

English (auto-generated)