How To Make WooCommerce Checkout Like Shopify - Conversion Optimized, Oh And [ FREE ]

[Music] if you're tired of having an ugly checkout page for your WooCommerce store this is the video for you because I'm gonna show you how right now without spending any money on any software you're gonna be able to take that ugly looking checkout and make it look beautiful and it might not be what you're thinking let's go take a look now I'm using the elegant and beautiful cadence theme it's a free theme however everything I'm going to show you has nothing to do with the WordPress theme I just wanted to mention that going into it this right here is the normal cart page now you might be wondering if we're going to change the check out to look like Shopify why are you showing me the cart page it's because I want to build up to it so just a follow me this is what the people cart page looks like and this is what you're going to be able to get the cart page to look like everything is more spread out it's larger it's a much more visually appealing layout now this is what a normal checkout looks like using WooCommerce and it is some dated stuff right here and I'm surprised that we've had to live with it as long as we've had to live with it I never liked it myself and this is what it's about to look like right here all these steps for checking out are broken down into step 1 enter in your email email address at the top this is something that's never been the first thing that is asked when someone checks out in WooCommerce see its name and last name and company name and it's like the last thing is the email address when email is the first most important thing you want to ask for then we have some billing information right here for step 2 step 3 is the payment method and finally we have a modern-looking payment input section on the checkout here this is connected to stripe right now and we also have PayPal as an option right here the buyer can toggle this actually is only a tiny bit of what you're going to be able to do because I don't have all of the features enabled so right here is X what's behind the this checkout page and it gives you a visual idea of everything that you're gonna be able to do so if I would have had Apple pay connected it's super easy if you have stripe to connect an Apple pay or Amazon Express Checkout you would have those icons listed up here at the top so someone can just quickly check out and then it would list the different steps and here's the shipping step I haven't on this demo site configured the shipping options and right here it's nice this is going to show you what it looks like if you have saved cards enabled that's a feature in the stripe gateway where if you have a customer that enters in their payment info and checks a box I actually have it enabled right here this is the box if they check on that it's going to remember their card information and all they'd have to do is check this box here and be able to check out using the same payment information and so and this is what we end up having it look like for me right now another thing to notice is the coupon code has been moved here and it's collapsible this is basically something that should have been there a long time ago and there's also field validation so if I click in here to the first name and I don't enter it in right or I don't enter anything and then I click to the next field you see it turns red I'm sure at this point you can agree that this is a big shift from what to commerce has been like up to this point and it looks kind of dated and still by default and now we're gonna be able to do this right out of the box it's not gonna cost any money it's official from a WooCommerce but there's a couple little caveats I want to make you aware of right now keep in mind this is new and it's implemented with WooCommerce blocks it's a plug-in that WooCommerce has made and release that adds blocks for WooCommerce to the default WordPress block building editor that's a mouthful right there you're gonna understand what I mean in a second so part of it being new is if you are using a plug-in that modifies the checkout experience WooCommerce right now there's a good chance it's not going to work with this so if you're using checkout field editor it's not going to probably be able to modify the checkout fields things like that it's just not gonna work now as someone that owns a software company that makes software for WooCommerce I'll tell you we're gonna be all over this because this is beautiful and I want my product it's cart flows I want my product to work with this new layout it's beautiful so the next caveat is this is a block builder Gutenberg thing this isn't gonna work in Elementor or some kind of a page building tool like Divi that you might want to use we're using the block builder Patong worry it's gonna be super easy enough talking let me show you how to do it okay first thing you're gonna need is a plugin called WooCommerce blocks to add that to your website you'll hover over to plugins click on add new next over in the top right you will just enter in WooCommerce blocks like that and for me it's showing right here in the middle WooCommerce blocks I have already installed and activated it if you don't have it on your website you would just click on Install Now and then click on activate next we need to go to the checkout page so I'm gonna click on pages I'm going to scroll down to my checkout page here it is and I'll click on it now your checkout page to look something exactly like this and this is the block builder in WordPress so what we need to do is remove this shortcode so I'm going to click on it here I'll click the three dots and I'm going to choose remove block and now we have nothing here what we need to do now is add the WooCommerce block for the checkout page so what we could do is click on slash and then it pulls this interface up and start typing in checkout and there it is checkout right here so I'm going to go ahead and click on it and what it does immediately is it pulls up a visual preview of that checkout now if I want to play around with some of these options it's super easy just click on the Settings icon right here I'm going to click and the panel is revealed so the first thing we're going to be able to do is show or hide some of these address options so by default company is hidden but if you also want to hide phone you can click right there and now phone is hidden as well next we have the option to show links to the privacy policy in the Terms & Conditions so when I scroll all the way down you'll see it right there where it says privacy policy you can show or remove that and then there's an option right here that says return to cart link and it's right here if you don't want that as well you can toggle it I had it off when I was showing you my example of it and that's pretty much all there is to it then you would click on update now if you also wanted to replace the cart page I recommend it I've never liked the default WooCommerce cart let's get out of here by clicking on the W on the top left and now I'm going to click into my cart page and we're gonna do the same thing you're gonna see the default cart shortcode for WooCommerce click on it click the three dots click on a remove block now it is gone one thing that's interesting I'm using a different version that hasn't been released yet of the block builder so if I click on the plus here in the top left it kind of shows me all of the blocks that I have installed right here and it's fixed so I can be in here editing my content and I have this panel here I like that so what we did when we added WooCommerce blocks is we added the block pack so let's scroll down to it right now so we can take a quick look at the blocks that were added and for this page we want to add the cart so I'm just gonna click right here where it says cart and it's gonna do the same thing where it shows me visually what its gonna look like now if I want to get rid of this panel I'll click on the plus and it goes away that's a feature that should be coming out later in 2020 that stuck to the left list of your modules and patterns it's really cool I've covered it on some videos on the channel ok so this is what it's going to look like you do have less options for the carts what's also neat is if the cart is empty I can click right here and you can get an idea of what it's going to look like when the cart is empty if someone lands on the cart page but I'll click back here to full cart and the only options we really have is right here for a shipping calculator and to show or hide the shipping costs and on here you can just click on update as well and we're pretty much done now I wanted to show you really quick that this will work with your themes shopping cart icon that's in the header we have it here so here I am on a product page and in case you're wondering I have a full tutorial coming out on how to create this exact site we're using a free theme actually everything we're using in here is free and this you're just not going to find a more full-featured ecommerce website than what I'm showing you right here we are able to because of this theme do some really interesting things let me show you two of the real interesting features that you get in this theme right here you notice there are these bullet points this will help increase the conversion and people wanting to purchase the various products and then we also can add this right here which is the payment icons actually there's a ton of things that we're gonna cover in this free tutorial but I did want to point that out but we have right here at the shopping cart icon in the header and when I click on it right here we get the slide-out cart from the side I can click on View cart or checkout and when I click on checkout you'll see it takes me to that new stylish check out that this whole video is about I just wanted to demonstrate that to let you know that this will work for some of the setups that you might have when I was talking about what might not work with it it was just plugins that modify the functions of the checkout page and as you can see in this theme I'm using the cart icon and the header and that works perfectly fine so when you combine all this together you're able to have a beautiful checkout hey listen to me if you a WooCommerce website right now that gets orders and you haven't done a lot to modify the checkout page of your WooCommerce website I want to challenge you to add this blocks add-on and try it out for a few days and see if the conversions in your store have increased and hopefully you're tracking how many people land on that checkout page and actually follow through so I want to just challenge you to consider doing that and I guarantee that by implementing this more elegant easier to process check out you're gonna increase your sales just by providing a better user experience for the people that are trying to spend their money with you so hey this is the best time for you to click on the thumbs up button it's gonna help me out here on YouTube they say smash that they say destroy it I'm asking you to do that right now if you appreciate tutorials like this that show you how to get more out of the websites that you've already created I'm gonna have that full tutorial on how to create that site in a matter of days hours probably like 48 hours or so and if you're watching this video after that I'll put a link in the video description box down below thank you for watching I really appreciate it ask me a question if you have a question subscribe if you're not subscribed click on the notification bell so you get info like this thanks for watching and I'll see you in the next video

Channel: WPCrafter.com WordPress For Non-Techies

Views: 115,354

Keywords: woocommerce checkout like shopify, woocommerce tutorial, make woocommerce like shopify, woocommerce checkout page customization, customize woocommerce checkout page, customize woocommerce checkout page layout, woocommerce checkout page customization plugin, aero checkout, aero checkout woocommerce, woocommerce checkout page design plugin

Id: q6HjxaHBPm8

Length: 12min 17sec (737 seconds)

Published: Wed May 27 2020