Are you tired of struggling to make your WordPress checkout process look like Shopify? Have you tried to optimize it, but it just doesn’t quite work?
In this video, I’ll show you how to make your WordPress checkout process look like Shopify.
And the best part is, it’s totally free! So if you’re looking to make your WordPress checkout experience more like Shopify, then this video is for you.
Products used in this video:
SureCart https://www.wpcrafter.com/surecart
Spectra https://www.wpcrafter.com/spectra
And of course WordPress 🤩
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart — https://www.wpcrafter.com/surecart (SAVE 50% Auto Applied)
🟡 SureMembers — https://www.wpcrafter.com/suremembers (SAVE 50% Auto Applied)
🟡 Presto Player — https://www.wpcrafter.com/prestoplayer (SAVE 33% Auto Applied)
🟡 Astra Theme — https://www.wpcrafter.com/astra (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows — https://www.wpcrafter.com/cartflows (SAVE 40% Auto Applied)
🟡 Cloudways — https://www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss — https://www.wpcrafter.com/buddyboss (SAVE 10%)
* Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra — https://www.wpcrafter.com/spectra
🟡 Elementor — https://www.wpcrafter.com/elementor
🟡 Beaver Builder — https://www.wpcrafter.com/beaverbuilder
🟡 Divi — https://www.wpcrafter.com/divi (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List — https://www.wpcrafter.com/hosting
🟡 Cloudways — https://www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger — https://www.wpcrafter.com/hostinger (SAVE 75%)
🟡 NameHero — https://www.wpcrafter.com/namehero (SAVE 70%)
🟡 SiteGround — https://www.wpcrafter.com/siteground (SAVE 70%)
CONTACT WPCRAFTER
☑ Website — https://www.wpcrafter.com
☑ Facebook Group — https://www.facebook.com/groups/wpcrafter
☑ Twitter — https://twitter.com/wpcrafter
☑ Twitter — https://twitter.com/adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link.
Think most people want that Shopify like Checkout experience because it's just Familiar on the internet that's what People are used to experiencing it and They want it on their WordPress E-commerce sites but unfortunately this Is kind of what the WordPress Ecommerce Checkout experience is like right here This is woocommerce and it sure ain't Pretty now you can use something like Cart flows which will improve this Dramatically but here's another E-commerce experience for WordPress it's Not that good either it's pretty bad and This right here is the layout that we're Gonna make in this video it's just going To take a little bit of your time it has The Shopify type of of aesthetic it has The contact contact information on the Left the payment information on the left It has the order summary here on the Right it's simple it's elegant and it's Effective and it's sure to make your Conversions go through the roof now this Is using sure car which is a free E-commerce platform forum for WordPress It's really great stuff and I'm going to Show you how to make this now step one Is to add sure cart to your website it's Super easy you'll go to plugins click on Add new in the top right here search for Sure cart and it's one word like this Sure cart I put sure cat it's a cart's Probably gonna take you to the right
Place uh and here it is sure cart just Install and activate it I have sure card Installed and activated on this website When you activate it it's going to have You create an account you can optionally Connect it to your payment gateways and All of that and what you're gonna want To do and then you're going to be at This screen what you're going to want to Do then is create a product and so I Have a few products that I've created Here already you're going to want to go And create a product it's super easy you Just click on add new give it a name and Then choose a few prices uh this is what A product that's all filled out will Look like name price and all of that but Your checkout form is going to be right Here underneath forms and it's going to It's going to say check out hyphen store Checkout this will be like the central Checkout but shortcut lets you create Unique checkout forms for specific Products if you want but let's go ahead And customize the default checkout we Can call it that the default checkout Now shirtcard's also going to create a Page right here called checkout let's go Ahead and see what that looks like you Can see out of the box it doesn't look That bad it kind of inherits some of the Styling of the theme that it's installed On it doesn't look bad but it's not Quite the Shopify experience so let's
Get started with that so let's go to Sure cart and click on forms and we're Going to click where it says checkout And this right here is that layout that You just saw so let's click this gray Area right here and it you pull up some Options here on the right and we're Going to want to click on change Template and when you do that there's a Little warning we click on OK and then Right here there's some checkout Templates you can choose I'm going to go Ahead and choose this one right here That's called the two column so let's Click on that and then click on next and Then let's click on create your card Lets you have a custom thank you page And all that we're just going to leave That default perfect and so here we have It but everything's a little backwards Right we want this contact information And address and all that on the left and Then we want the order summary on the Right now this is all built using the WordPress block editor so we can click This icon here and it's going to expand What's called the list view let's go Ahead and expand these out so here's the First Column and here's the second Column this is one of the things I love About the block editor in shirt card by Extension you can just like rearrange These like that so I literally just Switched them now you can can expand
These as well to reveal the different Elements that make up the checkout I'll Go ahead and just remove the express pay Because I don't think I have that set up And then we have everything here now you Can start customizing this all you want You can change labels at custom Fields You can do all that but that's not the Purpose of this video so let's go ahead And click on the first column now what We need to do is add some padding some Spacing so there's this option here that Says Dimensions so whenever you click on Anything there's options here on the Right so for this I'm going to put 70 And you see how it kind of pushed it and Gave it some space that's what I wanted To do looks pretty good actually so now What I want to do is slightly change the Background color and so here's the Option I'm clicked on column and I can Change the background color so and this You could set it to whatever you want so Shopify as some kind of kind of like a Gray or something you can put whatever Color you want you can click in here pop In a color code and you could you can Make this whatever color that you prefer So that actually looks pretty good so Let's go ahead and keep that now we want To do uh some spacing here on the right Column so I'm going to click right here For the column and I want to do the same Thing I want to add 70 for the spacing
But you can see right here for the Spacing it's not giving me the number But I believe I can click this icon here Yep there we go and now I can enter 70. Perfect so you can see everything's Lined up perfectly fine this is great so I will go ahead and click on update so Now I've changed the default checkout Form but I still need to change the Layout hide the header and the footer And give it the nice floaty hover effect And all that let's uh go here and do a Refresh you can see it doesn't quite Look how we want it yet but that's okay We're going to fix that all right now so I'm gonna go get out of this view by Clicking on the WordPress logo here on The top left I'll click on pages and now I want to go into that store checkout Page now here's where the way I do it is Probably going to be a little different From the way that you do it I'm going to Use the page building tool I have here For the block editor called Spectra you Don't have to use this you could use Elementor you can use a different block Thing you can use actually any page Builder you'll just pay attention to the Concepts that I show you right now and You'll be able to do this so this is the Block editor so I'm going to click right Here to see the list view again and you Can see I've got a container and a Heading and then I have this checkout
Form so first I want to actually hide The header and footer on the page that Would be this area up here and this area Down here so what I'm going to do is This is an option in the theme I have The Astra theme on this site all themes Are a little different but here I can Click where it says a for Astra it pulls Up the options I can click right here it Says disable elements and toggle these Two options on and it's going to disable The header and disable the footer let's Click on update and go to the front end And you can see so far so good now we Just need to work with this layout sum So let's go back into our design and What I want to do is I want to add a Container so I'm going to click right Here I'm going to click on container and When I scroll down you can see it's Adding a container for me and this Container I'm just going to choose one Right here for one column and the first Thing I'm going to do is add a some I'm Going to add some options to this Container but let's put something in it First because it'll be easier I'll click This and I'm going to Type image and I'm Going to add a logo image you don't have To do this you can add some text if you Want so let's go to the media library And choose the logo the this right here Is fine there we go and I'm going to Click here and I'm going to align it
Into the center this is exactly what I Wanted now I'm going to click back into The block settings and here's settings For this so you can manipulate it how You want but I want to get now into the Container settings so I'm going to Expand here and here's that new Container that I added so let's take a Look at some of these settings so right Here it says container I'm going to Expand it and we want this container to Take up the full height so we want there To be no scroll in here we want it to be The full height from top to bottom now The way you do that right here is where It says the minimum height we're going To click this option here that says kind Of hard to see it says VH and that's Basically percentage and we're going to Put 100 so it's going to take up 100 of The space now the next thing we want to Do you notice how the logo went into the Center we don't want that we want the The items aligned to the top so that's This option here where it says flexbox Properties we'll open it up and so Here's different settings for that and You can see where it says justify Content it's set to go into the center I Want it to go to the top see there we go When I click on that it goes to the Start of the container the top just like That now let's go ahead and give this a Background color I'm going to click on
Style and for type I'll choose color There's other options here and I'll Click here and choose one of the colors Of that yeah there we go that's a nice Simple color you can make this color Whatever you want it's the same thing You can click in here pop in a color Code use a theme color it's all your Choice next what I want to do is click On the container and down here you Should see a plus so I'm going to click On that and now I want to put another Container there we go this is what's Called an inner container and inside This inner container I'm going to put That checkout form now the checkout form Is up here but here here's the list view I can expand and I can click on the Checkout form and literally drop it in The container down here just like that Let's get it in there so that is not in It let's go just like there we go no There we go I dropped it right on top And it moved my checkout form in there Perfectly so now I can click on this Container that was there and just get Rid of it I don't need that anymore and We just have this so let's go ahead And save it and just look at our Progress so I'm going to do a refresh And you can see so far we're getting There now the reason there's a little Scroll is because of this admin bar if I Was not logged in there wouldn't be any
Scroll like this but so far this is Actually looking pretty nice I can Already see where I made a mistake where I top aligned everything this should Actually be Center aligned so let's go Ahead and do that let's add a white Background color here and let's add some Box Shadow that's all that we need to do So first let's fix my mistakes I'm going To click on container click on General It was in the flexbox properties I meant To go like that I shouldn't have made it Top aligned perfect that's what I wanted To do next I'm going to click on the Container that I placed my checkout form Just like this and I'm going to click on Style and for color right here for Background I'm going to click on color And I'm going to make that white just Like that it has a nice white background Color perfect next I'm going to click Where it says box Shadow now this is one Of the things I like about Spectros they Give you presets so I can choose any of These by just clicking on it and of Course I can adjust the settings too There we go that's nice and floaty so Now let's click on update let's go to The front to end and do a refresh and You can see now it's centered in and I Put the white background and that looks Good Um the things and you can see I've got The box Shadow so the things I need to
Do is get rid of this little bit of Spacing right here you see that that Little bit of spacing I need to get rid Of that uh and I probably want to maybe Add a little spacing underneath the logo Here so let's go ahead and do that so The spacing is probably coming from this Container no it's actually coming from This container right here so I'm going To click on that and then let's scroll Down and there's an option here that Says spacing there it is it says padding So there's little 10 pixels of padding All around it let's just get rid of that I'm gonna go put zero that probably did It let's go ahead and click on update go And take a look okay so that did it that Totally got rid of it actually this is Looking pretty good so now let's just Add a little spacing here there's Multiple ways of of adding spacing but I Can actually click on the logo image Click on style and there should be Margin there we go we can use margin to Put a little margin underneath it now You'll want to check this when you're Doing mobile optimizing this for mobile All right for bottom let's go ahead and Put maybe 30 pixels not 3 330 pixels Just like that do an update go to the Front end and see it there we go that's A little bit more balanced and actually We're there so you can like I said you Can change any of the colors that you
Want you can change the fields all of This is fully customizable you can see It just took a few minutes of your time Now uh just to be on the safe side Let's Test this in an incognito window to make Sure we don't have this little scroll Right here hey and here it is uh this Looks fantastic pop your information in There there's no scroll I'm scrolling up And down now if you add a bunch of Custom fields and this height increases When I scroll up and down uh there there Will be a scroll up and down if it takes More than the page height also if I was To shorten this you can see like that I've shortened it it will have a little Bit of a a scroll in it like that and That's all there is to creating a Shopify like experience you saw how easy That is how flexible it is everything's Fully customizable as a matter of fact And it's just up to your imagination and It's really easy to accomplish layouts Like that with any page builder I'm Using a free one Spectra's free there's No cost to that as well short cards free Spectros free like WordPress is free if You have a Hosting account so you're Getting pretty far in this video but What I need you to do before you go any Further is to give it a thumbs up if you Like content like this and it helps you Out I'd really appreciate that but That's it if you want a full tutorial
Video for sure cart I'll be sure to add One to the video description down below Thanks for watching this video I hope You learned something and I'll see you In the next one
