How To Customize The WooCommerce Checkout Page With Elementor, Beaver Builder, Divi (FREE)

in this video I'm gonna show you how to change the design and its entirety of your WooCommerce checkout page using your page builder first of all page builders don't have design control over the checkout page second you might be wondering why do I even care what my WooCommerce checkout page looks like anyway and I'll give you a startling statistic and that is 70% on average of people that make it to a checkout page never checkout they get there and for some reason they leave and part of that is maybe there's some information they still need when they're on the checkout page or there's something on the checkout page that puts a question in their mind and they leave that checkout page never to return it's called checkout abandonment it's a big problem and in this video I'm gonna show you some things that you can do now that you can actually control the design of your checkout page in order to reassure any buyer that's on your checkout page that that is the decision that they want to do how do you do this well you remove all distractions you can add testimonials so if they're feeling a little unsure about actually purchasing it for some reason well you can have testimonials there if that's what you choose to have on your checkout page maybe your buyers thinking is there what's the return policy and then they leave to go find that out and then they never make it back well you can have that maybe a list of frequently asked questions if they think what's the guarantee that this will work for me we can have some of these guarantee badges you can now control after this video you're gonna know how to full have full control over that WooCommerce checkout page so let's get started before we do that hi my name is Adam from WP crafter comm where I make WordPress tutorial videos for non-techies if you're new here consider clicking on the subscribe button if you don't want to miss a thing click on the notification bell and YouTube will let you know when I've uploaded new videos let's go ahead and jump in here is your standard checkout process buyer goes here looks at a product clicks on the product likes it clicks on Add to Cart they get to the Add to Cart and it leaves them here then they click on View cart here is the view cart and here is the checkout page and this is actually an optimized checkout page but you're gonna now have control over this checkout page it's not going to cost you a penny what if instead of this checkout page right here what if it maybe looked like this where we had an area up here to basically make this whole checkout page match the design of your website we have reassurance here with some trust badges some information on the guarantee and you have a full design control over it or maybe if we had our checkout page look like this where we have some reassurances of why to buy from us we could put some testimonials here you could do whatever you want or we can even do this one the point is you're gonna be able to make it look however you want it to look okay let enough talk let's get started this is what you do you're gonna go to plugins you're gonna click on add new you're gonna do a search for cart flows it's CA RT FL o WS one-word this is what comes up go ahead click on install now it's just going to download and install this ok now that it's downloaded go ahead and click on the activate button cart flows is a plugin that sits on top of WordPress and WooCommerce and it allows you to create sales funnels on your WordPress website and it's free now a side benefit of it is it also allows you to replace that global checkout that default checkout and you can replace it with cart flows and you're gonna be able to design it from scratch or use a template in your page builder now it'll support most page builders and if you have any kind of styling issue if you're using some different page builder not one of the main page builders and you run into any trouble you can submit a support ticket and they could fix that okay let's get started my click on cart flows right here and I'm not gonna design this from scratch I'm gonna probably use one of the templates so I'm gonna click where it says add new and there's templates for Elementor and they're coming soon for Divi and for beaver builder but it doesn't matter because you can just do this all from scratch so I'm gonna do instead of doing it from scratch I'm going to choose one of these right here so I think I'm going to choose this one right here so I'll click on import it's just going to take a moment and it's going to import it now what a flow is is a series of steps that your buyer goes through in a typical sales funnel you have a landing page where you sell them on the product then you have a checkout page where your buyer can place their order and then it will send them to a thank-you page but we're only going to use it today for the checkout and for the thank-you page I didn't let you know in the beginning but you're also going to be able to have a custom design as well for your thank-you page and this is a big missed opportunity for most ecommerce stores that's where now with having control you're gonna be able to maybe have a video let them know the next steps ask them to subscribe to your social media ask him to refer a friend there's so many things it's limitless of what you can do on a custom thank-you page and now you're gonna have control over that as well ok so first thing I'm gonna do is give this a name and I'm just gonna name it Global check out ok so there it is Global check out I'll go ahead and click on update so you see it's a series of steps the first step is a landing page then a checkout page and a thank-you page however we're just replacing the checkout we don't need this landing page step so I'm going to click right here where it says delete and it's gonna just go ahead and remove that check out or that landing page we don't lose the checkout page you want to lose the landing page okay and then I'll just do a quick update ok so now that that's done we're gonna go into this checkout page right here and the way we do it is we click here where it says edit ok and it's gonna take us into the settings so essentially here let me show you what it looks like right now ok it's pulling up so this is what it looks like right now everything outside of right here so everything above it and below it is done using Elementor in this case but if you're using a different page builder you can use that different page builder so everything that is going to be in the cart the settings we actually get to choose it all right here so and once we put our settings here we get a little shortcode we drop in our page builder and then we put it in this beautiful wrapper and we're good to go okay so first is to go here where it says checkout design but you get to have control over the design aspects of this checkout form so you can choose the color and this is primarily going to be the color of the button and then we have font options so you can choose a font style that matches the rest of your website and then you have Advanced Options if I click on this to enable it then you can have more fine-grained control over all of the fonts the headings and all that if you want a different font for your headings you just have full control over the design right there so what I'm gonna do is I'm gonna go here it's a select product I'm gonna select a product to put in there while we're designing it and then I'm gonna remove it and then I'm gonna make this our global checkout so I just need to put in the first three characters of any product okay so I entered T I'll just choose the cinnamon tea right here go ahead and click on update and then we're gonna go into Elementor so like I said if you're using Divi or beaver builder or Elementor using your own tech template what you want to do is go to shortcode and put this into your clipboard okay so now I'm gonna click on edit with Elementor because it's already a template that we can just start tweaking right now colors we can put testimonials in there frequently asked questions we could do whatever we want so right here it says your cart is empty if I click on this you can see that is where the short codes already put in because I started with the template but if I click on apply it should show me a preview of what this is going to end up looking like and there it is so you can see everything down here is page builder everything up here is page builder and I had those little settings to change fonts and to change the color of this which I'll do in a moment okay so this is all just normal page builder stuff guys so you can click right here if you wanted to change the background from this blue you click on style and then here's a color and you can start changing it to whatever you want it's fully up to you and you have all this design control over it right here if you wanted to switch it to a gradient or whatever make sense to you you could definitely do that if you wanted to add some testimonials you just go here and let's do a search for testimonials there it is right here I could just drag and drop some testimonials right here or make this two column and have some rotating testimonials basically anything that's gonna reassure the buyer that's on this page that the decision they're making is the right decision and that would be testimonials guarantees frequently asked questions have all that information that any buyer would potentially want right here so they don't have to leave your checkout page so I'm not going to do many style designs because you obviously know how to use your page builder what I will do is I'll take the color code I use for this purple and I'll change that button to be the same color so here's where the color code is so I'll copy that and I'm gonna make that button the same color so I'll go ahead and click on update and then what I'm gonna do is I'm gonna click here and click on exit to dashboard and then I'm gonna paste that color code in so I'm gonna go back to checkout design I don't want that orange I'm gonna go there and there's that same purple right there that I did I'll click on update and now I'm gonna go here and let's do a refresh so this is what it looked like a second ago and when I do a refresh you can see I changed the color and you're gonna see there the button has that same color that it inherited now Carlos does more than just give you all of this control there's optimizations to the checkout form so what it has is field validation so if someone goes to the first name and it's a required field and then they go to the click on tab and go to the next field that they didn't feel that out properly you saw now there's that red line going around the field box you see that right here now if they did put the name in right it would have gone green to give them a visual indicator that they did the right thing also the coupon is normally up here at the top and it was moved right here to a more logical position which is right under the order breakdown so cart flows is going to add these options these optimizations as well for you and it does some other things to make the fields a little more condensed that you can see right here with the three fields in the one column all right this is good so now what we need to do I'm going to go back to the step so for the global checkout I have to go back to select product and I did this just for testing I added that product we actually need to leave that empty to make this the global checkout so I'm going to click this little X like that it made it go away I'm gonna click on updates and it's going to be fine now what I need to do is click on back to edit flow and there's this option right here that says enable test mode and we need to uncheck that if you're going to use this you want to uncheck that and then click on update just like that now there's one more step that is very very important with if you're using any kind of performance plug-in like a caching plug-in that maybe WP rockets with performance there's a whole bunch of them you need to they all have an option to exclude parts of your website from the caching so since this is your checkout page it's a dynamic page you have to specifically exclude it from caching so if you click on edit the direct link to the checkout page is right here so you can change this if you wanted if you wanted the checkout page to have a different direct link you can do that but this is what it is now checkout page click on edit change it to whatever you want if that's what you want to okay so now that you've done that you've copied the link you've taken out test mode you've put an exclusion in we just need to assign this checkout page to be the default checkout page and the way you do that is you go to cart flows go to settings and there's a setting right here it says global checkout I'm gonna click this to do a drop down here is that checkout page I'll select that I'll click on Save Changes and then it's done so now what happens is if I go here let's actually start from the beginning so if I go here here's that product if I click on Add to Cart it says right here that it was added to the cart I'm gonna click on View cart and now when I click on proceed to checkout it should take me to this brand-new checkout page I click on it and you're gonna see it took us to that URL checkout - page and I'm on this totally custom checkout page you have full design control you can have multiple columns you can put some testimonials on the right hand column frequently asked questions you have total control over how this checkout page is gonna look obviously you saw I didn't put a ton of work into it but the point is is you know how to use your page builder and now you can use your page builder to do this and your page builder without cart flows does not do that it's not even an option okay so you can see right here here's the the default checkout you know I'm using Elementor and it's not even an option so you can't do this by default with Elementor with beaver builder or with Divi you don't get that as an option it's an area that's locked up and controlled by WooCommerce but if you add cart flows now you do get control over it you get all those additional optimizations last thing I want to go back into that float and here it is now you can also have sales funnels alongside of this so if you have a couple hot selling products you can take those products and create dedicated sales funnels for them that you can run paid traffic to so instead of running paid traffic to a WooCommerce product page you would instead run direct traffic to a beautiful landing page in a sales funnel for that product in order to increase the conversions that you're having okay so I'm gonna go back into the flow now I told you as well here's the Thank You page step you can do the exact same things that I showed you in the checkout page step you could do it in the Thank You page step and this is probably one of the biggest missed opportunities for all e-commerce stores so what you can do now is you can go in there do the same thing but maybe add a video thanking them for their purchase maybe saying here's where you can find us on social media go subscribe to us or here's a refer-a-friend form there's pretty much anything you want to do you can do right now using cart flows with this custom check out and this custom thank-you page right there now everything I just showed you is in the free version of cart flows it works fantastic there's also a paid version that adds some additional features a lot of additional features so let me show you here's one of the pro templates right here so not only does it include professional templates like the one you see right here it has additional options on the checkout page so let me show you when I go to the checkout page right here you can see it's the same concept of showing them information to reassure them we've got testimonials here here on the side but you can see here's the first thing that you could do with the pro version of cart flows is you can add order bumps and so what this means is you can have at the very last moment when someone's about to click on that order button you can have an offer right there that will enhance what they're already purchasing it can maybe be something similar or maybe an item to get them the results faster you make a irresistible offer here and all your buyer has to do is check the one box it spins and then it adds it to the cart now what this what this does is that average checkout amount will increase because your making an additional offer right there it's like a restaurant if you go to a restaurant and you order your dinner they say would you like dessert with that - and they say we what would they have on special it's the same concept now what else you can do with the pro version is instead of checking out then you can give them an upsell offer where the buyer can purchase it with one click perfect example is if you're selling online training courses maybe they buy a course as the the regular offer maybe they get a second course for maybe half off as the order bump and then the upsell is a membership maybe it's a bigger course or maybe it's private time with you or a mastermind group something that will get them the result faster and so that's also what the pro version does along with split testing shopping cart abandonment where if someone puts their email and doesn't check out you capture that and you can contact them to try to get them back in their pro templates a bunch of other things but everything I showed you in this video is using the free version of cart flows and you got a mitt I mean this is a really powerful tool it's ready for you it's there right now and in full disclosure cart flows is here because it was a product that I envisioned and I wanted to make available to everyone I'm involved with cart flows obviously if you go to the cart flows homepage you're gonna see a picture of me there a lot of my ideas have gone into this product to make this for you so anyways guys go out there increase the conversions on your checkout page make more money in your shop make it a easier easier and smoother process for your buyers using this free version of cart flows right now it's there available for you so hey if you found value in this video consider giving it a thumbs up remember to subscribe and click on the notification bell you have a question about cart flows you can ask in the comment section down below I'd be very happy to answer any question for you that you might have and also remember to share this video with a friend maybe if you know someone that has an e-commerce shop this will 100% benefit them this would be the best return on investment of their time to spend an hour making a beautiful checkout page and a thank-you page it's going to end up making their business a lot more successful so hey that's all that I have for you in this video thanks for watching and I'll see you in the next one

Channel: WPCrafter.com WordPress For Non-Techies

Views: 246,715

Keywords: customize woocommerce checkout page, customize woocommerce with elementor, customize woocommerce pages, customize woocommerce cart page, customize woocommerce checkout page plugin, customize woocommerce checkout page elementor, customize woocommerce checkout page layout, best wordpress themes for woocommerce, woocommerce tutorial, wpcrafter, customize woocommerce divi, customize woocommerce beaver builder

Id: MvNE5Gnavo8

Length: 20min 17sec (1217 seconds)

Published: Wed Dec 19 2018