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

In this WooCommerce tutorial, I'll show you how to take your boring and poorly converting WooCommerce checkout page and make it conversion-optimized just like Shopify.
As I shared in the video, I have a full WooCommerce tutorial on the way, the link will be added below in a day or two.
Also, make sure to check out the free Kadence Theme www.wpcrafter....
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart -- www.wpcrafter.... (SAVE 50% Auto Applied)
🟡 SureMembers -- www.wpcrafter.... (SAVE 50% Auto Applied)
🟡 Presto Player -- www.wpcrafter.... (SAVE 33% Auto Applied)
🟡 Astra Theme -- www.wpcrafter.... (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows -- www.wpcrafter.... (SAVE 40% Auto Applied)
🟡 Cloudways -- www.wpcrafter.... (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss -- www.wpcrafter.... (SAVE 10%)
Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra -- www.wpcrafter....
🟡 Elementor -- www.wpcrafter....
🟡 Beaver Builder -- www.wpcrafter....
🟡 Divi -- www.wpcrafter.... (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List -- www.wpcrafter....
🟡 Cloudways -- www.wpcrafter.... (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger -- www.wpcrafter.... (SAVE 75%)
🟡 NameHero -- www.wpcrafter.... (SAVE 70%)
🟡 SiteGround -- www.wpcrafter.... (SAVE 70%)
CONTACT WPCRAFTER
☑ Website -- www.wpcrafter.com
☑ Facebook Group -- / wpcrafter
☑ Twitter -- / wpcrafter
☑ Twitter -- / 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.

[@ecobob101]

I love it when you've been working on trying to get a page looking better all morning and give up and watch youtube... then a video like this solves all the morning problems in minutes. - thanks for your efforts!!!

[@monmon3681k]

Same here ! When i discover this video I was so happy T_T

[@galenkauffman4811]

But why does that plugin have such bad reviews? That makes me very nervous to try, as wonderful as it looks.

[@AussenseiterKEKS]

@@galenkauffman4811 For me, the preview of the blocks change didn't load and after reading some 1 star reviews I deactivated it, risk was too high for me to crash my site

[@michaelvaughan2888]

literally the same happened to me

[@itsjosephwells]

I've been having problems with my woocommerce checkout page because like you said it's ugly. this has been going on for a week with me trying to find a solution. I watched a previous video that popped up and loved it so I checked into you channel and saw this. this was fantastic thank you so much brother. Looking forward to learning. New sub here!

[@simonnotley]

Brilliant. Can't believe how easy it was to completely change my check out pages.

[@LunaaVision]

THANK YOU SO MUCH FOR THIS TUTORIAL! I was stuck on these two for days and this simplified the process and made my store so much more aesthetically pleasing. you're awesome!

[@HernanBensasson]

Love you man! Thanks for sharing knowlegde for us to improve our websites. Your tutorials are so easy to follow and that is a big WIN for everyone. Thanks again!

[@bethw7]

How cute is this checkout?! I've honestly been procrastinating about building an ecommerce site because I was overwhelmed by the prospect of juggling Astra, Elementor, Gutenberg, Cartflows, and starter sites. There is some overlap and figuring out what to use where is daunting. I'm greatly encouraged by the direction you're going in with tutorials, so thank you!

[@miketaiwanwalkcity6355]

Big thank you! Got the Kadence PRO from your link 2 weeks ago. I didn't know I could change the cart

[@stefanpfadt4353]

This is the kind of video I am grateful for! Thank you so much, easy, clear and to the point. You deserve way more subscribers ;)

[@samirpadhan8151]

I've spent countless times and energy just to do this without any useless bloated plugin. Thanks a ton mate !

[@anuragagarwal161]

can you help what you did exactly Sameer

[@nightcity_cyberpunk]

Amazing video! Helped so much. I love my new checkout. Thank you!

[@miketaiwanwalkcity6355]

watched for the 2nd time and implemented my checkout and cart pages! THANK YOU Adam!!!

[@simonmuddimer]

Thank you so much, i always find your videos straightforward concise and to the point, i love your videos, this one is exactly what i was looking for without knowing what it was i was looking for... thank you

[@THEMARTIALMAN]

Great video thank you for the information. One question though, how do we add a create username and password option on checkout using WC blocks?

[@ink50]

I did get this to work with Beaver Builder. I just converted the block to htlm and paste it in a HTML modle with Beaver Builder. This is amazing.

[@Ta3allamOnline]

awesome for real! :) Thanks!

[@maddy1mymk]

I saw a video that cartflow does similar thing as this when it comes to modify the cart and checkout. It's less risky to do cartflow instead of causing troubles trying something new that might cause issues.

[@virsavp]

Oh man, what an introduction. I am saying it is the art of vloging. Thanks a lot. You made me a pro from negative.

[@lualfaro1992]

Your videos have taken me out of darkness and see the light while learning how to design websites. Thank You very much. I would like to know for an e-commerce in Costa Rica do you still recommend to use Stripe?. Its an online supermarket and since I am learning I am wondering if I should choose to go for something else rather than Stripe but it looks like this is the most usefull company. Can you please enlighten me in the subject a bit more?. Thank You for your videos, BTW!

[@iamlocs]

Woo Commerce really is the best option economically, but you are right the checkout and cart really needed an updated look and thanks to your video my shopping cart looks just as awesome as a Shopify cart! Thank you!!

[@dongamshengu1311]

You sir are talented. Bless you.

[@yaboiiprettyeyez]

Thank you for sharing this! Is your new woocomerce tutorial available for us to view? I'm really looking forward to it! lmk.

[@RWallyb]

Hey thanks, was really straight forward and to the point. I use elementor but hadn't made any changes to my woocommerce checkout or cart pages so the block editor worked fine and now they look much more modern!

[@HabReport]

Which theme? Hello? The blocks won't appear in my website.

[@dirtylaur5]

Finally...someone who knows how to explain and has all the steps clear

[@inderdeepsingh502]

Oh man!! I was eagerly waiting for someone to make video about this. Thanks a ton 🙏

[@mikebb0653]

Thank you for your video. It helps me a lot. Can i know how to create a side cart as you mentioned?

[@certtechwebsolutions]

Was the full tutorial ever created Adam? Sorry just really in need at this point to watch it :) Thank you for everything you do!

[@zijingjin8486]

Good job buds! So clear helpful and to the point.

[@alystdesign]

THANK YYOUU I was just looking for this without spending tons of buck

[@pellekarlsson152]

Great video Adam ! please can you do a more deep tutorial about it and about Kadence premium and free version theme & woocommerce

[@DigitalDiggingNet]

Thanks for this - so helpful - the only thing I don't understand is how this isn't default.

[@stephenm3874]

Thanks for this one, I've actually dumped Elementor Pro and am finally embracing Gutenberg with good results. Did you ever post the link to the full Woocommerce tutorial you mentioned. I've looked all over your channel and cannot seem to find it. Your guidance is alway amazingly helpful especially with my first eComm site.

[@thehappyavenger8070]

Hi, how do we go about including other payment options in here, such as Afterpay and Humm?

[@oZenakos]

Very cool definitely trying this thanks for sharing

[@RoxanneBohman]

Love the video and easy to understand. Just what I have been looking for to relabel on the checkout page. However, I need to add a text field so the customer can leave a card message to the recipient, plus "I need to keep add a note to the order". Is this even possibility?

[@tyson1100]

what payment plugins do you have on this video? I like how yours looks. it looks real good.

[@cicizone]

Hey! Awesome video! I wonder how "PayPal" is showing up on yours. on mine, even though PayPal is set up, it still says no payment methods. Hope you can give me some guidance on how to get the PayPal payment available.

[@kwamenkrumah2224]

Thank for this tutorial Come in perfect time for me because am designing ecommerce. Can't wait for the upcoming video.

[@soulandbeyond]

I really like your videos and you talk like Cam from Modern Family and I really like Cam character so I really enjoy when I watch your videos! Greetings from Turkey :)

[@RajeshSahu-kt3pg]

Awsome I had to stop divi then use it to make it it's pretty 😊 .Thx But does divi builder have the cart or I need elementir for it

[@frederickterblanch1631]

Thank you Adam you rock as always with your videos, how do you change the color of the place order button color - this is only black -

[@stivenson200]

First of all, thank you for your continues effort for taking the time to always bring something useful, educational and fun to watch. Mind if I ask you a question?, according to the Plugin it supposed to support the Norwegian language but when I install it on my WP/WC Website which is Norwegian, the plugin titles like "Contact Information" , "Shipping Address" etc remains in English, or could I have missed an option or a setting to change the field title texts or something like that? Thank you once more.

[@ErikRave]

Hi Adam, Thanks for all your helpfull content. Is there a way to change the language of the checkout page?

[@Cheng32290]

Hey! thank you very much for the video!! this is really really helpful! Thanks for sharing it!

[@rsfmadison]

Amazing! Thank you. Exactly what we need🙏

[@musedev8124]

what's that sweet multi-short button masher you got to your left ( my screen right ) ? :)You are a beast Adam, thanks for ALL the tutorials and love! You are amazing! thanks to you, Darrel Wilson, Ferdy Korp and Wp Tuts I am a web designer and Wordpress pro. Countless Hours and years of youtube e learning, paying off. Thanks man, I can't ever thank you and the AMAAZING Wordpress community enough.

[@dr.banknotes4796]

Thanks for the tutorial, and I'm a fan of this layout but it doesn't appear to support PayPal Gateway. I noticed in your video PayPal was available. What are you doing differently to gain access to PayPal option?

[@owenbigo]

Great video! The blocks resulted in a fantastic looking CART and CHECKOUT page. But sadly this plugin does not work with most payment gateways. After getting everything looking great, we realized payments just don't work on our Square API or even our previous Paypal Pro API. Hopefully they will come out with software soon, as the ease and look are really fantastic. Thanks again for the video!

[@BartoloAnsaldi]

Thank you Adam, it's really nice. Any tips with the language? I have a website in Italian and with this method, by default the checkout page is almost all in English with some Italian. I counldn't find where to change it...

[@elizabethwaters9832]

Thanks so much, that is so simple and it looks so much better! Do you know of a way to get the courier plug-in to work with this?

[@CarletonM]

You are literally the best! Thank you

[@davidnumber8165]

good explanation , is there a good plugin that you can recommend that works with this , that will translate the checkout to other languges?

[@vladlipovsky2915]

Thank you!!!! Great information! Can I do it in Classic Editor?

[@pellekarlsson152]

You are awesome Adam! looking forward to watching the woocommerce tutorial. I hope I can afford with Kadence membership it is a great theme and woo packages I like the demos:)

[@ΓΚαλλίγαρος]

You are great, can you please help with the vat number.. and how to edit fields in check out page.. (we need this information to edit from control panel.. vat number, receipt or invoice for business, different receipt address) plz help!!

[@shubhsheth]

Thanks a lot! This is so simple and much needed.

[@rehomedwithlove]

19 months late to the party but glad I found it as looking at restarting my woocommerce store. My only question... is there any way (using blocks or not) to integrate woocommerce into a wordpress theme? It does have a woocommerce section but is not the same design and doesnt suit the rest of the theme what so ever. I want to turn normal pages into categories and product pages. Dont want to change theme as its the only one that looks perfect for my site.

[@cathrinejordan2384]

Thanks dir the Video ! I used it in my shop … Now I have a problem. I‘m a small business owner and I have to state under the price that I don‘t pay value added tax … But I can‘t include that, right

[@lachocolateriasantaana6265]

Hey Adam!! I installed the Woocommerce Blocks & it looks awesome! BUT i noticed the "Direct Bank Transfer" is not working. Do you know whether they will make this available soon?? Thank you for your advice!

[@basho9306]

Thanks it's amazing but the only problem, how can I export the list of visitors who entered their email but didn't pay? It's possible in Shopify but is it possible in Woocommerce? Kindly answer as it's so important. Thanks.

[@tributesalute]

Hey Adam. Great information as usual but I think Cartflows should provide this option as well for Elementor and other page builders. What do you think? Gutenberg is not yet at the point for me to replace Elementor with it.

[@DoodlingWebDesigns]

We need more of this video, thank you!

[@HariRamOfficial]

Thank you so much sir . I love it. You are the one of my best teacher. Love you.

[@creativework69std]

Ooh... it is what i am looking for, thanks WPCrafter you are great!

[@WPCrafter]

Thats Awesome!!

[@isntlifebetter]

Wowwww this looks sooo good!!! Thank you for this!

[@WPCrafter]

Hope you enjoy

[@fantasticthoughts5334]

your videos are awesome bro please help me bro Do you know a plugin that recognises the visitors location and autofill when they go to the checkout? like amazon plz suggest me

[@joshuafidel8395]

After following the video the PayPal option button in checkout disappeared, I'm only seeing the option for the typical credit card input now. PLEASE HELP!!!!!!!!

[@woollifewoolinsulation755]

Thank you!! grat video does this work with Elementor?

[@spaciaarchviz8486]

Thanks Adam, finally woo commerce is getting closer to Shopify UX. Do you recommend any Checkout Address Suggestions plugins? I believe nowadays this is a must feature to reduce friction on checkout page.

[@ClickyKitsune]

🙋‍♂️Does it have multistep checkout feature? Or does it support that plugin? Great content btw❣️

[@clothisorgulhomane5216]

Hello, how are you? Very good your tutorial! Taking advantage of this field to ask if it is possible to move fields and add images, for example: Place the phone field in the contact information, insert fields in the shipping address and place security seals under the place order. I would also like to know how to translate it all because I am from Brazil! Thanks in advance!

[@WPCrafter]

Not yet, but I am sure there will be a way soon. There is a free plugin that I mentioned in the video, checkout field editor, that is the one you would want to add after they integrate.

[@JuanMarceloPompa]

Excellent video. How could I remove the zip code field? I don't need it and I couldn't delete it. I would appreciate if you could help me. All the best!

[@omymma]

Very Awesome!. Please, try to do the e-commerce website on the "Astra theme" it is a very good theme. when we can expect an e-commerce demo?

[@Lucas-kp9ws]

Very cool. How's the Cartflows integration coming along?

[@SpaceBaron]

Really great video and thanks for the tips! I updated my cart page, but the checkout page is another story! The woocommerce blocks only seem to support the build in woocommerce payments. I have PayPal, Pay Fast, Snap Scan and Bank Transfers, but the cart in the blocks only shows PayPal option and not thing else. It does not allow the user to switch to another payment option at all. I am using the build in PayPal, so that explains that and no I do not have any mod that will change the checkout page in any way. Hopefully Woocommerce will update the checkout block in the future to something a bit more flexible.

[@KrystalElle]

Adam, great video! I have Stripe enabled as well, but the credit card images don't show up on my checkout or cart pages. Do you have any idea why this is?

[@iamalifawad]

That was amazing please tell me if we can customize registration and login page.

[@claimgadget9186]

Adam Thanks for this content I would like to know if this is suitable with elementor pro and Astra Theme and will not overwrite or damage the designs I've made

[@susannalonnrot7807]

I'm wondering the same thing

[@paut]

Hi, a very good tutorial. I have two questions. I saw on Gutenberg that i have to be logged in to checkout, I don't know what can i do to see the complete view. And, how can I translate to Spanish the plugin becuse y living in Mexico and need translate in the Spanish language?

[@scholzdigital]

Same problem here. Did you figure it out?

[@takiaschannel]

Wow that looks awesome. Will it work with flatsome theme?

[@WPCrafter]

Should work with all themes right now.

[@takiaschannel]

@@WPCrafter awesome. Gna try this asap. Thanks for keep us updated on these cool stuff.

[@smartassetsolutions59]

@@WPCrafter great tutorial, but one thing stuck me woocommerce block only supported limited payment gateway such stripe and paypal. It's cant supported my local payment gateway :(

[@sebastianhidalgo9716]

TAKIA Did it work with the Flatsome theme?

[@parvezhasan5047]

Waiting for this site tutorial 😊😊. Thank you!

[@The6FigureAffiliate]

Thanks for the vid. Unfortunately I'll assume this won't work with Thrive Architect either?

[@joannad8945]

Thank you for this video!

[@rodlowery]

If you don't see the Block Editor, go to your Writing Settings and enable the Block Editor. Mine was on Classic Editor.

[@Kiyomi123Gaming]

Thank you!!

[@jennilly]

Thaaaaank you!!! So helpful!!!

[@KroMeMWGz]

This looks much better! Sadly doesn't show the woocommerce product add-ons information from the order currently so hopefully this will get fixed soon so I can use it! :)

[@nancytran2482]

Thank you for your sharing! Somehow, in my new checkout page, my *Create account password* field don't appear. I research the reason and the solution, but don't have a good solution. Could you help me? FYI, I want my customers can create their account & password during the checkout. Thank you for your help.

[@PintoTV]

Looks Amazing!!! if i don't have STRIP (not yet working in Israel) and i have my own payments company, how will it looks like?

[@WPCrafter]

This is not a Stripe thing. Just want to be clear. You can use any gateway.

[@MrAvo404]

@@WPCrafter Can't wait till Square POS and other similar ones jump on board. So I can give this a try on a client's site.

[@PintoTV]

@@WPCrafter Great ! so the design will be the same? Because i know that most of the payments companies in Israel having the payment page in or in a dedicated page

[@Alex-tc1eg]

Looks awesom. but just wondering why this plugin has so many bad reviews and people that complaining about it (broken page, doesn't work, beta testing,...) ? plus the checkout says I can only purshase one product...

[@RobBassVancity]

Possible to add recaptcha to the Checkout page? Having an issue with bots placing multiple orders. Thanks!

[@johnwellington269]

Thx Adam! May I ask is there a way to add Apple Pay button in checkout page (not cart) if we send users to cart flow checkout page directly ?

[@arlandonregero2762]

Thank you for sharing this video!

[@BioHubIndia]

I am currently building my blog with CPT. I want to use RankMath SEO. When should I add and start using it? at the very start of blog building or after I setup everything and ready to write blog articles?

[@saidasnavikas8456]

Great video once again! But I have some troubles installing shopify cart in my page. My theme that I'm using now was made on Bold Builder and I just can't imagine how to add shopify checkout in any page. Do you know how to do this? I'm talking about that part from 6:05 on your video. Thanks!

[@ibcwhite]

Great video! Did you or anyone else have issues with the check out page? Mine says you must be logged in to check out but does not give an opportunity to sign up. I have "allow customers to log in.../create account during checkout" There has to be a way for new customers to create an account and pay without multiple extra steps.

[@Richmanray]

Much love for your tutorials Adam but 2.5 out of 5 stars seems to be a toxic rating for something that should be native to the Woocommerce plugin in the first place. I hope they get this right. Wishful thinking usually leads to the "Restore From Previous Snapshot" button. Backup and here we go. Keep up the good work Adam.

[@WPCrafter]

Yes but you have to put it in context. There has been so much hate for Gutenberg stuff, people are rating out of that, not out of the merits of the plugin.

[@Mickeyjuice]

Reading the devs comments, its looks like they're using this method (separate plugin) as more of a testing grounds before they merge it into the main WC plugin. Make sense in case it breaks WC

[@xavigarcia6207]

wonderful tutorial. However, the checkout block won't allow my customer to remove items from checkout. Is there a way to enable this pls?

[@bySterling]

Awesome! And luv the 80s soundtrack in the intro/background 🙌🏻❤️💪🏻⚡️💻🌎👏🏻

[@nicolaorlando]

Hi Adam, thank you for the nice tutorial. I have a question: what is better, to have elementor pro + a free theme OR a theme pro + elementor free?

[@AmandaLucaseu]

Great video Adam 👍🏻

[@webfotografica96]

Hi and thanks for those webinars ... I just have a question: is it possible to apply theme appearances (button colours as example) to WooCommerce Blocks?

[@meuffels22]

I have the same question, how can I change the button color? It's black now but I want to change it. Thanks a lot.