How to create a custom Cart Page with Elementor and Woolementor in Wordpress

 

hey guys and welcome back to the woocommerce series in this video we're gonna create a custom card so that you can easily add products to

your cards like this so that you will get a message like this you can view the card from here or from here and this is where we're gonna build

a custom cart page with completely free tools other than elementor pro so besides elementor pro you don't need anything to do this

so in the last episode we landed here and by the way if you're new to this series you can watch the previous episodes of

this series in the woocommerce playlist which you can find on livingroompixels.com playlist you can click over here to playlist and then click on woocommerce

to see all the videos if you're watching this there are videos over here so in the last episode we ended here where we created this custom grid page which automatically

filters based on the category you click on so let's first take a look on how our card looks right now so i'm gonna add a few products to the card like this and as you can see there is this full

width info bar which i don't really like the design of but it already works it's a little bit boring it doesn't look bad because astra by itself is pretty cool i'm using the theme astra for the people that don't know so esra is pretty cool if you like this design then you can just go along with it but what i want to do in this video is use a plugin called woola mentor and this plugin will

allow you to customize the things in woocommerce that you can't edit with elementor pro because for some reason elementor pro doesn't allow us to edit

the cart page and the checkout page and this plugin does but this plugin is not free there is a free version though

which we're going to use but the paid version if you click on pricing over here it's just a little bit too expensive for my taste i mean if you want the lifetime license you're paying 600 f r a plugin that only does a few things with woocommerce and i don't think that you can get better options for your money

things like croco block which i will talk about in future episodes of this woocommerce series because you will get a lot more for your money than this so i don't want to spend 600 on a plug-in only when it's really worth it but they have a free version as you can see so let's just get started with the free version so what i'm gonna do is i'm gonna install that plug-in

just search for it there it is okay so once it activated you will see something like this and they have more options for example they also have a filter which is not

really customizable i tested it i didn't really like it so i'm just going to use this for the card page so what you want to do once you're installed is go to pages

and then just click on edit for your cart page because first you need to tell woocommerce that you want to edit this page with elementor nd just click this away and just click

on edit with elementor and now we can edit this page so this is now an elementor page so what i want to do is just delete this whole normal astra thing i also want to

delete this title so i'm going to go over here and i'm going to make sure that i set this page on the elementor full width so that will only give me the header

and the footer so here you see i am completely free to do whatever i want uh so what i want to do is create one column over here just make sure that this one is

stretched and this one is unboxed just let's start by adding a little bit of padding on the top and the bottom and then dragging our elements so if you

scroll down you can now see that we have nothing over here because for some reason we have to activate it so if you go back to that plugin you

click on free and then you can check this one all and then click on save and then all the free widgets are activated so then go back just click on update for

now and refresh and now if you scroll down you can see all these new things that you can use so the ones that i'm going to use in this video are of course the card

widgets so let's just drag in the card items first and there you can see it this is already a different design than astra and like i said before estra is not that bad but the options for

customization are just too limited and you will get a little bit more freedom over here so let's see what you can do for example you can hide different things so

if you don't want to display the category for example you can just turn it off over here actually i want that because then it's nicely aligned you can even

see that there's already a coupon code over here so that's already embedded inside of this widget but they do have a separate widget if you want to for a coupon code that you can also

customize if you want another design than this but for now i'm just going to use this first one so this already looks pretty nice the bottom section by the way that

is this part so what you want to do is go to the bottom section and then uncheck the proceed to check out that's this button because that button is also part of the

widget that you also need which is the total widget so if you uncheck this then it looks like this pretty nice go back to your widgets and also drag in the card

overview like this and here you can also see that same button but here is a nice total and that is an extra functionality on top of what you get over here i think

that is what a client wants to see but as you can see this is super wide so what i want to do is just duplicate this whole section and then in the second section delete the first one and then in the first section delete the total and then it looks like those two are connected then we need to change the padding again but now we have to free them to add

padding on the inside of this so for example i can add 70 on the left or 60 and that will make our page look like this also over here never forget to uncheck the padding

so it's perfectly aligned to the grid and now we can try to customize it a little bit okay so i've changed a few things the

fonts for example a little bit of the padding and now the only thing that i want to do is edit this one and to make it in line with what we have already created so let's go back to our shop for example this title i also want to bring that title in so i'm going to open the shop template again and i'm going to copy a style that i already have and bring it into our new page so let's just drag that in just make sure that we have the right text and then you can delete this title over here just slide this one and here you can see that it looks different okay let's change up the button let's

change up the style of this background the border is set to none but you can see that there is a border so if you put

this as solid and then put in a zero over here then you can see that this looks a little bit better you can also just make

it completely white so now it looks like this okay i also want to use that title on top of our main table okay so i'm just playing around a little bit with the colors and the styles to

make it fit like our design so it feels that we're still on the same website so a few little details that i want to show you for example in this

button we have the same font as in the titles

so to make it feel like one design you should also do that in this button so let's just do that right now

always try to use the global fonts option whenever possible okay so i've changed up

a few things let's just test it i'm gonna click on update

now we're gonna go back to our website

let's just keep this one open so we can

actually see the difference

i'm gonna open our card again and let's

put it next to each other

so yeah that looks already a lot better

so as you can see this is the previous

one and not very customizable

and a little bit boring and now we have

a design that is much

more in line with our web shop so that

is pretty cool

and i want to change one more thing to

make it more luxurious and that

is an image background so you already

know what i'm gonna do this is not

really hard to do

you just create a new column like this

give it a little bit of padding on the

inside

and you make sure to upload a background

image insert it

make sure that it's center center and

the size on

cover maybe make it a little bit bigger

like this

and then what i want to do is drag in a

discard text and put it inside of here

and as you can see i've made

this little line a little bit shorter

because it looks a little bit weird if

it's so long

all right that looks pretty good so

let's just update it now

go back to our card and click on refresh

and as you can see

this looks pretty cool okay so now we're

almost done

the last thing that i see over here is

these buttons which i didn't see in the

elementor editor

i don't know why so that's one of the

things that i don't really

like about this woolen mentor plugin but

i can't see your preview so now i have

to guess

that's not really nice so what i did on

this website is i just removed the

background so i just went

to the style tab inside of this widget

all right

and then i went to quantity because this

is the quantity tab

and then the background just clicked on

it and i just made sure that this one

is on zero so the opacity layer is on

zero and then just make sure that the

icon color is a color that you can see

so maybe the text color let's click on

update now and see if

if that works click on refresh and that

looks a little bit better there's still

a border so

even this says it's on none this is

another one of those

things that i don't really understand so

i'm gonna put this at solid and then at

zero and let's see what happens

click on update refresh and now you can

see that this looks better

does it still work does the price change

if i click on update card

yes it will change so that's perfect

let's see how it looks on a tablet mode

okay that is not the most pretty

but i think that it does the job don't

always forget to add your

paddings on mobile a little bit on the

left what i always recommend is 20

on the left and on the right to make it

fit nicely

also make sure to check your mobile

phone and this looks pretty good but on

this down column you

of course want to delete the padding

because otherwise it's going to be too

small

so this looks pretty decent for a free

plugin i mean let's be honest we're

working with free software

so we shouldn't really complain let's go

back one more time to our cart page

let's check it and that looks pretty

custom so i am happy with this

now let's go to the checkout page

because that's also a page that i want

to edit

and unfortunately there are not a lot of

things that you can edit here

if you want to edit this page with

elementor you of course have to go into

the edit page

then make sure that this page is

editable with elementor

then you can see that you have the same

kind of setup so then

you can also put this on a full width

and then you have the same freedom sd

card page

for example a custom title like this but

there's nothing that we can change over

here because woola mentor

as you can see does not offer anything

in the free version so

the last few details for this webshop we

need to change that within the theme

for example one of the things that i

want to do in the next episode

is make sure that that error message is

nicely designed

because right now on our website if we

add anything to the card

so for example three of these watches

you can see this error message which is

full screen which is not what i want

and i also want to change the styling a

little bit of this maybe add the same

phone style so i want to make it a

little bit more custom but we need to go

into the theme settings for that

and that's also true for the checkout

page so that's what i want to do in the

next episode and we also need to set up

the payment systems because right now

everything is in pounds

and maybe i want to set it up in dollars

or in euros

we need to integrate stripes so we can

actually accept payments

but i think that we achieved quite a lot

in this episode

again if you want to see all the

episodes it's on this page on the living

pixels website

again you can buy woolamentor if you

want to get more features but

honestly i would wait for another

plug-in crocoblock that i do recommend

on the links page by the way i don't

recommend

woola mentor because i think it's just

too expensive for what you get

but there is one a plugin that i

recommend to customize

a lot more uh like croco block you can

see over here i'm already building

another web shop a much more

complicated web shop with filters and

and a lot of fun stuff so that is

something that you can watch in future

episodes but for now i just want to work

with elementor pro and free tools and i

think that we have achieved quite a lot

already so i hope that you like this

video

if you have any questions then please

let me know and

then i hope to see you in the next video

[Music]

you