hey how's it goin Alex here from idea spot and in today's WooCommerce tutorial we are going to be customizing the cart and checkout page using Elementor and
completely free plugins so if you are tired of your cart looking like this and you check out looking like this and you'd like to customize it and optimize
it and get it looking a little bit more like this and your checkout page looking like this then keep watching the plugins we will need our WooCommerce blocks by
automatic now automatic is the group that brings us WooCommerce now Ruka most blocks is actually what they put out when they're testing new features and
developing WooCommerce so this is what gives us the upgraded cart and checkout features for WooCommerce which we're going to use to upgrade our cart and
check-out the next one we need is element or header footer and blocks template now this comes with most Astra start a template so you should get that automatically done if you're using Astra but if not go ahead and grab this one as well this is by brain storm force this is the group that brings us Astra theAstra theme and this will actually let us design custom headers and footers for
specific pages so we're going to be using a custom header for our cart a custom header for our checkout so that's completely optional but I really like to
have a separate header for our cart and check-out just to make things a little bit more distraction free and essential add-ons for Elementor I really love this
when I'm using the free version of Elementor I think most people who use the free version of Elementor will get a lot of value out of just adding this
free plugin just to make up for some of the gaps that the free version of Elementor has and this gives us that product grid which I'm gonna use to add
some interesting things to our footer like put some featured products or sale products into our cart at the footer so go ahead and install and activate that
one as well now this one is optional we'll enter this is what I used in my previous video to customize the shop and the product pages so it's a really good
way if using the free version of Elementor to add WooCommerce features optional but totally recommend trying this out at least see what you think
it's a really good way of using the free version of Elementor to design WooCommerce features so we'll enter now
like I mentioned before I am using Astra and I am using a starter template so you've got your starter templates plug-in here and for this demonstration
I'm using the coach starter template so this is what I've come up with I've basically just changed the background image at my logo installed WooCommerce
and had at the we come in a shop to our header menu and I've added the cart mini cart to our header menu as well just by choosing WooCommerce as the last item in
the menu so all that is pretty straightforward let's get on with upgrading our card so this is our very standard WooCommerce cart now this is
what comes with WooCommerce it's been like this for a long time now the cart works totally fine it isn't that good of a design by today's standards though
everything is a little bit too spaced out there's three buttons and the most important button proceed to checkout is down the bottom so it's not that
intuitive when you look at it straight away in terms of what am I supposed to do this one's grayed out so it's a little bit fiddly we're gonna upgrade
that let's get started so first of all that's here edit page now the default cart page this is all it is it's a title and a shortcode that says a WooCommerce
car now all we have to do to upgrade this is go ahead click on it and we're going to delete that by removing the block so we've got a blank canvas now
and we are gonna go and add a new block and we can scroll down and we've got a WooCommerce this is what we call most blocks gives us some new blocks to add
on our pages for WooCommerce so there's lots of things here but the most important thing from this tutorial is the card so where is that car is right
there go ahead there we go this is the new card in the straightaway the design is better just because it's much more compact and there's only one button
which is proceed to checkout so that's obviously going to improve our sales there are a couple of options that we can change on this we can turn the
shipping calculator on or off and we can hide the shipping costs in toulon addresses and it as well so I think that's pretty good I'm going to turn
that that one on and this one on as well the other thing we can do is I have a look at what the empty cart will look like so by default it's got a little
frowny face your cart is empty you can browse the store and it's got the new in store which will show us the new so we can go ahead and add and remove
these things as we wish so I might just go ahead and maybe I'll just remove that block and remove this block and I'll never like this block either
I like to keep things fairly simple let's get rid of the sad face as well I think that's kind of corny your cart is empty that is all I'd like to see on my
empty cart and just a link to browse the store maybe rather than a link to browse the store let's make a button that takes the user back to the store so let's go
ahead and let's pop in a new block and let's search for the button element there we go so let's go back to shop there we go add the link back to the
shop that should be all good there we go I'm gonna make that centered so let's change the alignment to the center and that looks pretty good
and let's click update so full cart it looks like this empty cart looks like that we don't need that browse store link anymore your cart isn't be back to
the shop simplicity sometimes is the best less is more so let's actually look at this and see what it looks like in practice so
let's look at our cart our cart now looks like in this this is a big improvement we've just got the one button a much more compact layout very
much more intuitive so if the cart was actually empty let's remove all this stuff out from the cart and see what the empty cart looks like so now I cut is
empty we can get back to the shop that'll take us back to the shop let's go back again to the cart so we've just got our empty cart and we've got our
standard footer I'm gonna show you how we can edit that in a minute as well before we do that let's just pop an item into our cart sort of don't have an
empty cart there we go let's add to cart there we go we've got something in there we can proceed to checkout so if you're happy with that now think this is almost
all you need to do the only thing that might like to do here is make custom headers and custom footer is specific for the car and for the checkout just to
make things a little bit even more clean a little bit more distraction-free just to boost those conversions that a little bit more the other thing we can do is
use a little bit of CSS to tweak the styling of these descriptions and buttons and things that's totally optional but I will go ahead and do the
in a minute as well so we are back in our dashboard we're going to make the cart header so I'm on the appearance and we're in header and footer blocks here
so we're going to go ahead and make a new header so this is going to be our cart header I'm going to call it that and it is many be called a header and
we're going to display that header only on a specific page so we can actually decide to only display this on a very specific page so specific pages and
we're going to search for the cart and there we go we've got the cart page there so there we go let's go ahead and let's publish this
right now there we go and now we can actually edit this using the normal editor or I'm going to edit this using the free
version of elemental which I really quite prefer so let's load that up and we can start designing a header now rather than starting from scratch I
always like to take design that's already there and adapt it to certain purpose so let's go to our main page we can actually adapt just the front page
here so let's edit that with Elementor I'm going to copy some of the style from this page and usually in our header so let's just copy them the front element
here let's copy that let's paste it in here and let's get rid of all this stuff in here get rid of this get rid of this we want to have two columns I think is fine rather than all that let's just get rid
of all of it there we go let's get rid of the whole thing there and now we can just add another column we can have to even columns seems good and let's head
to our section and get to the style we don't need this image it's just a head out we just need plain nice blue gradient I think that looks pretty nice
now it looks like there's obviously some padding or some margin here so yeah we're right we've got padding 250 on the top and 250 on the bottom let's drop
that back to zero I think we don't need any padding for a header then let's look at our layout we want this section to be want to be full width and I wanted to
stretch this section as well that looks a lot better when you're using as a header now the only thing I really want in my cart header it's just a logo
and the word cart so people know that there are still on my website and that they're in the car that's all we need we don't need any distractions we don't
need any menus or other things to click on we just want them look at the cart and then go to the checkout so let's work on that so I'm gonna pop my logo in
that's just an image was dropped that there and our image is from our media library we've already made our logo and uploaded that let's insert that there
and I really want that to be left and I want my column and vertical alignment to be middle just to be sure it's obviously a little bit too big so let's go to
image and edit the image we can go to the style and we can change the width we can change it in pixels I think just keep it fairly small keep it fairly
distraction-free so that's our logo 60 pixels seems pretty okay and then we can just bring that actual width of the margin in a bit now we can go put a
heading in there for our card that's gonna be our cart and I want that to be white text so that's what we really need and that's our new header we do want to
have a look at this on the mobile and tablet view as well so the tablet that isn't great let's go to the advanced and I think we've got our section an
advanced yeah we've got padding there for them for the tablet view as well and the actual image itself needs to be improved a bit there as well so the
column width let's bump that up to 10 I think that's okay maybe 15 okay and we can see the columns are breaking onto two rows that is because this one is
probably too big we want to call them let's make that one 50 and let's make this one 15 so that will be fine for tablet view and mobile view same deal
it's good to have some some padding that I certainly copied from our last section from the main page and we'll get rid of that padding and let's just change those
column widths I'm like that 24 will make it 25 and let's make the cart column with make that 25 as well shall we
yeah maybe 35 give us a little bit of wiggle room okay let's update that so responsive mode desktop tablet and mobile you get
the idea but this is our cart headed now so we're all good so let's have a look and see how this goes so here on I made it just as our normal header and let's
go ahead and look at our cart and this is what the header that we've just design is so that is much cleaner we just on the cart page you're still on
the idea spot website and we can proceed to the checkout that's all you really want the user to do so that is what I like and I'm going to leave it like that
we could get a little bit more fancy with our footer in the cart I might go and work on that now so let's go back to our dashboard and I'm back under
appearance header and footer blocks and we've got our footer there I might actually just duplicate that footer so let's go éä duplicator
that'll give us a copy so there's our draft footer I'm gonna go ahead and edit that one I'm gonna call that the cart foot it now so what we're going to do is
we're going to replace the footer on the cart with this footer and again I think I'm going to just restrict it to the cart so specific pages we're gonna
change that to the cart and we're gonna go ahead and search for the cart there we go we'll go ahead and publish that one and we're gonna go and edit that in
Elementor so this is our footer we can go ahead and add some more stuff let's add some more cart related content to the actual cart footer so what I might
do here is let's minimize these normal element or elements and we're gonna look at essential add-ons we talked about that a little bit earlier you can also
use Wulin tour here but I'm gonna use the product grid from essential add-ons so let's scroll down a bit where is our product grid there we go let's just drop
a product greeting above this footer cool I think what I'll do here is just drop that down to three products maybe make it to let's go three there three
and three columns and let's turn the writings off I think that's a bit tidier so that looks pretty cool and actually instead of choosing recent
products we could choose say bestsellers or sale products top-rated products anything would do totally up to you it's just a nice thing to add some extra
things for the user to last-minute additions to the cart so let's just leave it on a recent products for now but you can customize that if you have
featured products for example that would be a great way to implement this the other thing we might do is just give an option for the user to go back to the
shop if they want to go continue their shopping so let's put back to the shop and let's go let's make a bet here let's say shop so that's that little button
there it opens up with shopping let's go there and let's just put the shop link there and let's click update so that looks pretty cool I think that's a
little bit too big actually the font let's make that let's make it a normal paragraph oh it's small okay let's go h4 that's pretty cool you know I changed my
mind rather than having that there at all let's delete that and let's actually just call this back to the shop nothing that's better back to this shop there we
go update and this is sometimes less is more like I always say awesome now let's have a look at see what this looks like on
the actual car so again let's go back to our car and there we go there's our new little WooCommerce additional info and we've got a button that takes us back to
this shop but we've got our proceed to checkout there right up the top and easy to find easy to continue this is totally up to you you don't have to put this in
here if you really just want to keep the focus on proceeding to the checkout you could get rid of that altogether just leave it as a blank blue thing maybe
just have a basic a basic footer and just keep the focus on that checkout button for the user so why don't we head to the checkout and give the checkout
the same treatment that we gave to the cart so this is the old-school WooCommerce checkout and it looks like a lot of work I think this definitely does
cost you a few sales here in there because it just looks like a lot of work and you've got a fill in all this stuff and then proceed to the payment I think
we can do a lot better let's go ahead and edit the page again we want to just delete the standard WooCommerce checkout and we're gonna add this new Google
commerce blocks checkouts we should have that down here somewhere they would go check out cool so here we have our new and improved check out we
have a few options that we can add here we can turn the company on and off apartment suite etc I think some countries use that a lot more often than
other country is so if you want that on turn on if not turn off in Australia we usually just use one line addresses it's much more comment so I'm going to turn
it off in my case but totally up to you phone number on and off I think you can make it mandatory as well which can be pretty good depending on what sort of
industry you're working in that can be good I'm gonna leave it optional but I'll leave the phone on there I'm sure links to policies and show a
could return to cut the links so that's the return to love cuddling that's your privacy policy you can turn those policies on or off like that so totally
up to you let's click update and let's have a look at the document options here I will like to disable the title and disable the footer bar as well I really
just want to keep the focus on people proceeding to the payment when they're in the checkout if you've done all this work getting the users to go into the
checkout just keep them focused on getting that payment and getting us to heels made so I'd recommend setting up like that
and clicking update so this is our checkout now I'd have to say it definitely is a big improvement it just looks like less work for the user it
just seems quicker to fill this in and proceed I really quite like it if you want to go back to your cart you can go back to your cart but that's not a
prominent button the most prominent button is right there in the middle where you proceed to your payment I've only got PayPal setup but whatever
payment methods you've got will show up there the only thing I will do here is like what we've done with our cart we've got a custom cut I might make it custom
checkout header for this page as well so let's go ahead and do that so the easiest way to do that is we've already done the cart header I basically want
the same thing I've got essential add-ons for Elementor and you've got this ei duplicator we can go ahead and just duplicate the cart header there and
then we go ahead and edit this one instead of calling it the car head it guess what we call it now the check out header right
and get rid of that cop there and we want to apply it to the checkout there we go let's go ahead and publish that one and I think we're pretty good the
only thing we need to do here is edit that with Elementor and we need to change one word car becomes checkouts not even a whole word which needs to
change the characters after the see awesome hit update and there we go our beautiful clean sales optimized checkout so cool this is gonna it's a much more
sensible and friendly flow for the user to flow through the shop through the car to the checkout I think this is a big improvement on the standard we've
communist page give us a like if you think this is going to help your store because it's definitely helped the stores I've been building lately now I
did mention earlier I wanted to apply a little bit of CSS it's gonna depend on the start of template you're using but I really want this description text to be
larger I want this proceed to checkout button to match the buttons on my other parts of the website like that nice blue color and I'd like it to be I don't need
it that bold I'd like it to be the same weight as the other font and I think that's about it let's go ahead and add some CSS to this so let's go to
customize open that in a new tab and additional CSS and this is some CSS ah prepared earlier so I've just made that text a little bit bigger there and made
this button a blue button I think that's about it same thing in the checkout when we go to our checkout we can see that our
instructions are a little bit bigger as well and we've got our blue button there as well so a little bit cleaner a little bit more consistent so that's all I
needed to do you can go ahead and change that background color to suit your button and change the font way if you don't want the bold font I've just got
normal font way now I've made those metadata in the description they have made that just normal one one lion font so just a little bit of a tweak you can
change that or just leave it as stock I think even even the stock standard didn't look too bad anyway so I think that's a little bit of an improvement
but totally up to you I will share that in the description so check that out if you're interested okay now that we've finished customizing
the cart and the checkout you should check out my previous video on customizing the shop and product pages so I've put a link here if you haven't
seen that video already and also check out my videos on customizing the login pages because that can really improve things too but thanks for watching I'll
see you next time
No comments:
Post a Comment