Hey everyone! It's Scott from sertmedia.com and in this video I'm gonna be
showing you how to make your cart and checkout pages in WooCommerce look a
little bit more modern and a little bit more like Shopify. So everybody here is
probably familiar with what Shopify is, the second largest CMS in the world
right now. And it's very widely used for small businesses to produce their online
stores. However you've chosen WooCommerce, probably because you're a WordPress
fanatic and you want to get a little bit of influence of Shopify design in your
WooCommerce site and you can actually do that relatively easily. It can work with
any theme in theory. You may have styles that override it and you may have to
correct those, but for most people it should be a very simple, insert the code
and it will work. So I'm going to show you what the current cart and checkout
pages look like and what they can look like and I'm gonna show you how to
actually implement it and I'm gonna go over some of the cool things that you
can enable through these new cart and checkout pages. So um this is your basic
cart page found in WooCommerce. It says cart and it's basic. It's it's basically
the same that it's always been. If you have a customized theme like Avada, it
will have a customized nice stylish cart page that their own developers have
worked with. But this is the general storefront theme. This is how it's going
to look for most themes out of the box. It's not that attractive. It's frankly a
little hard to follow because all the information is so spread out without
really giving you what's important and the fact that your actual cart totals.
This is on a 1920 by 1080 resolution display and it's for 27-inch monitor.
That's what I have the my current monitor parameter to and as you can see
the checkout button is almost completely off the screen and that's the next
logical course of action. This is something that Shopify did better at is
it had a clean, this is what you have and this is what you're going to go to next
to actually complete your checkout process. Now this is what it looks like
after the adjustment. Very simple. Very clean. Basically looks just like Shopify
more or less. I have the shipping data hidden right now because I don't
actually have it set up because this is a playground but your shipping
cost will show up in this section as well and I'll show you how that works
here in a little bit, but this is just a much better user interface. It's clean.
it's easy to follow. It tells you what your checkouts are accepted. If you're
curious on how this works, it should more or less extract them from the payment
gateway I have. I set up. There you go. I set up the Stripe payment gateway and
PayPal and that's the only gateways that I have but these should just generally
fit most websites. My general recommendation is you should have Stripe set up to take
payment confirmation by directly on your website by inserting the credit card
number and then PayPal and then anything else is just ancillary and then the
checkout page on the existing WooCommerce website looks kind of
like this. It's again very ugly. Its basic, hard to follow, the spacing is all over
the place and it just doesn't look all that nice. This is what it looks like
after. It's super clean. It's easy to follow. All the information is easily
easily discernible and it just looks really good and if you have Apple Pay or
Google Pay setup through Stripe, it'll actually show a Express Checkout button
at the top and I'm going to show you how this all works in just a minute. It's
actually really simple. It relies on the WooCommerce Blocks plugin, which is a
totally free plugin that's being worked on by WooCommerce. Expect this to be set
up and implemented in WooCommerce core somewhere down the line, but for now you
do need to install WooCommerce blocks separately. You'll install it and it
basically just adds blocks to the Gutenberg editor. If you're using
classic editor, you'll have to go into your writing settings and allow you to
use the Gutenberg editor and change the classic editor to it, that way you gain
access to the block but after you gain access to the block it's really simple
to do. All you have to do is, we're gonna edit to the new cart page, is yet the add
the cart block and when you edit the cart block you insert
this new block and this is what it's going to show you. It's gonna allow you
to also view it as an empty cart. So this is what it shows if you have no products
and this is what I'll show you if you have products. These are just randomly
generated to show you what it will look like and as you can see it does
calculate the shipping costs and you can actually customize some items on the
right hand side and they are accepting feedback of what you think should be
added or some flexibility that you may need on here.
So I do highly suggest you give feedback, if you're trying to use this for your
own website, but for most people this is really all you need. It shows the
information clearly and it allows them easily check out without needing to
scroll and it just presents it in such a nice way. There is the shipping
calculator option right here. So you'll allow the customers to estimate shipping
when they enter their address. You can allow it here. If you just turn it off, it will
not allow them to change the address and then you could just hide the address
cost until the address has been entered, which is a standard WooCommerce
behavior. And then naturally of course, you could change the proceed to checkout
button to link to a specific page. Maybe you're experimenting with the
different checkout process. So you could have two separate cart pages and try to
do an A/B test to see how it works. But for now I would just leave it at
whatever the checkout page is set to in the WooCommerce settings. Now the cart
page is really basic. The fun one is the checkout page and as I mentioned right
at the top big bold, express checkout using Apple Pay. You know for us Android
users here, Google Pay would be nice at least to add in the demonstration but
you know that's fine. We will let the Apple fanatics get to their day, but you
do get a lot of flexibility in this checkout page, which honestly saves
people a lot of time. One of the things that's kind of annoying about the
default WooCommerce checkout process is it's hard to remove fields and sometimes
the fields are just redundant and this streamlines it very easy.
Your first one is the contact info and this is required.
Anything that's not is optional is required and you can
change with certain fields to be required. Notably a company name if and
you could choose to hide the company name altogether if you wish. The phone
field can be hidden, but personally I would suggest you leave it. That way we have a way
of contacting customers and you can mark it as required and that removes the
optional text and you can choose to remove the secondary address line for
like an apartment or suite number. Don't do that. I don't recommend doing that.
It's definitely a standard practice now to just have two lines one with the
apartment information and while the street address sometimes people do put
it on one line but most people have now gotten into the habit of it needs to be
on two lines and that's just how most doors are so I wouldn't change that
personally but if you want a cleaner layout and you most certainly can. Under
your navigation options though you could choose to show links to your terms and
conditions and privacy policy. This is another thing that a lot of plugins kind
of filled in the gap on and WooCommerce core kind of integrated it for the
privacy page but it's nice that you actually get to see it and that it's
down there. My only gripe with this is, is I feel like the terms and conditions
should kind of be somewhere above. It should show up somewhere other than in
the footer where you can't read. A lot of people in check out do require that
users click and accept the terms and conditions and it doesn't look like
currently. It's not that easy. You could go here and you can follow the settings
to set a terms of condition page and I'll show you what that does. So we're
gonna come over here. We're gonna set it. We're gonna reload and we set our terms
and conditions, but as you could see it just stuck it right next to the bottom
next to the privacy policy. So it didn't really do anything
which is a shame. And the demo here will show you payment gateways you've added,
but it may not always be a hundred percent accurate. So for instance the
PayPal button kind of looks like it's supposed to be
for the PayPal Express gateway, but this is just the PayPal standard gateway. The
payment information that it puts up there, it's just random. It's just a
random number. It's just to illustrate what it does. The shipping information,
you can configure your shipping options using a combination of plugins. I will
be making a video down the line of how to do shipping because it's a very
complex setup. The coupons code, you can't turn it off. You can't really modify
anything other than this block. This is one downside of this implementation is
it's not all that flexible, but over the old system, it's infinitely more flexible
and it just looks better. Really, it's just an overall improvement and because
you're able to add it to a page, you can add a bit of flexibility. For instance on
this checkout page I just have this right here/ I could add a cover photo if
I wanted to be inserted above and say like, let's see, like add a block before.
Whoops. Meant to make that before not after.
There we go. And we're gonna make this block a cover photo and you could just
style a very simple checkout page using, wow I only imported like the most basic
image. You could just style a very nice-looking cover photo and just says
thank you for being a valued customer and you can modify it a little bit. Set up a basic gradient
and along with your brand scheme like something like this. Modify the angle
just a little bit. Okay. And you can. And you can just make it
very flexible when it was previously very inflexible. And what's great is if
your theme is like Genesis or any real decent theme nowadays, you can set the
page layout to be full width and honestly this is just such an
improvement overall. I'm very glad to see it. I highly recommend you play around
with this. This is a good introduction to the block editor mostly because it's a
very simple layout. Check out pages are really just the one check out box and
maybe the header image like I just showed it right there. This is a good way
to introduce yourself to the block editor to get familiar with it and maybe
use its first some other simple pages, but overall this was just a quick guide
on how to make your style, your check out, and your cart pages look a
little bit more like Shopify. If you have any questions about the implementation,
maybe you have a question about how your theme was working with it, you can ask in
the comments below. I'll try to help you out but a lot of it does come down to
the themes and how well they support the block editor. But I will try to help you
out. Make sure you like and subscribe and I'll see you in the next one.