Add WooCommerce Checkout Forms To Any Page | Handsome Checkout

what is going on guys sterling with handsome wp in another video in this video we're going to be taking a look at how to set up and use the embeddable handsome checkouts so let's go to the back of the website and let's get right into this so here we are in the back end of our website guys and there's going to be a couple steps to getting everything set up number one we want to come into our handsome checkout so we'll open that in a new tab and then you can see all your embed forms are going to be placed in this tab over here in bed forms but we're just going to create a new one just to just to run through the creation process so we could say test embed next we're going to select our checkout mode in this drop down and we're not going to select checkout page because that's going to create a page for uh for our checkout we want an embed checkout form via short code so here i am on the back end of my checkout once you select that you want an embed checkout form it's going to load in all the settings so you can see i've placed a product in there i have chosen whether i want one step or two-step uh checkout process you can pick whether you want labels and placeholders or just placeholders you can enable order bump variations quantity options if you have any questions about any of these other settings i've made videos of those so go check those other ones out they'll explain how to do that we can still customize our colors for our form which is great so if we are integrating this with say oxygen builder or elementor or divi or something like that we can still make our fields and our form and everything kind of match our existing template and then we can still select and adjust all of our fields order details if we are using the multi-step we can customize those labels and then custom css and jss if we want to or js if we want to load that on our page so once we have this all done let's publish and then is if you notice we have a short code right here that was generated for this checkout so i'm going to copy this shortcode and then let's head over to our pages and we'll add it to one of our pages so here i am in the back end you can see i have embed checkout form demo so let's just open this up in a new tab this page i've already created but we're going to see where we place this so um so i'm gonna actually delete this short code right there so i'm gonna come below my block so you can see i just have a split content uh block i have a image of my product a title and a just a test description in there now let's come below and i'm going to put forward slash short code and i am just using gutenberg for this demo but you could any builder that will accept a short code you can pretty much use uh use this handsome checkout on which is awesome so let's preview in a new tab and this is what's going to happen so when i scroll down you can see here is my checkout in there i can put my information in there i get all of my customizations that i've made so if we go back to our handsome checkout when we look at our template you can see our background's been set to black text color link color button color so matching all of that stuff where this is really powerful and useful is if you're using a third-party builder gutenberg or uh for elementor or something else you can integrate uh your handsome checkout your bump offers your uh all of your customizations into that existing page template which is really cool it allows you to not just use one of our seven templates that we have done currently but to use use your own templates or your own landing page so that's really really awesome so number one is this you can just integrate the form directly into your page this is what uh is one of the options we can do but if we come back to our handsome checkout you're gonna notice it says display embed form as a pop-up as our second option this is super super cool guys i'm gonna show you how to use this so all we have to do if we wanna make our embed form a pop-up so if you have a sales page or a landing page you want to have multiple buttons where they can click it and pop up the checkout all you have to do is click display embed as for or admin form as popup save it and then you will notice that it did change our our short code here so we're going to copy this new shortcode if we do not uh if we do not update this in our content what it will do is it will just add a link that says your button here so you definitely want to copy this and re-add it to your to your page so let's go back to our page that we're editing we're going to take this uh this shortcode because now it's just going to be a button and we're going to drag it up under our content or next to our product up here and then we're just going to replace that short code with the short code that was generated and then all i'm going to do is add some button tags in so that this will inherit the default button style from my website so i'm just going to put carrot button closing carrot opening carrot forward slash button closing care and this is just simple html button tags or you could do if you wanted to add a class to something or do you can basically control what's inside of it the uh the short code is just going to be applying the correct pop-up link and all of that so we'll just say purchase now so we'll just add purchase now as our text we have our button tags in there and our new shortcode so let's update this page we'll come back to our preview and we will refresh and now you see we get this nice purchase button and then if we click on this button we're going to get a nice little pop-up that shows our checkout so really really flexible and awesome guys you can have it popping up on your sales page if you want to just have a button you don't want to load the entire form or if you want to load the entire form and that works into your design you can just put that in bed form or that short code wherever you want and that will load into your checkout and just like i mentioned we can still enable our uh our bump order if we want sort of details let's come up and let's enable the bump order just for kicks and giggles we're going to say cap we'll bump order our cap and we'll say yes one time offer and we'll say this is awesome okay so there we go let's update we'll come back to our page and we'll refresh this page and then we'll click purchase now and now you can see our bump order has been has been integrated right into our pop-up checkout guys just super powerful super cool and pretty much all the settings that you'll need to worry about are right here you can use this on as many pages as you'd like in your website and like i mentioned if you want to have multiple purchase buttons on say like a sales page you could set that up using a third-party builder so guys embed checkout forms are just another really cool way to utilize handsome checkout and all the features that are baked right into it um and it's really easy to set up as we've seen in this video if you have any questions about anything you've seen this video leave us some comments and youtube we will get back to you there or you can come and reach out to us at our website handsomewp.com we have a whole suite of plugins that we've designed to work with woocommerce to help our customers make more money through their woocommerce checkouts thank you guys so much for watching if you like this content make sure that you subscribe and give it a thumbs up really helps us out and i will see you in the next video

Channel: HandsomeWP

Views: 162

Keywords: Wordpress, Woocommerce, Customize Woocommerce, Woocommerce Checkout, Handsome Checkout, Website Sales, Wordpress Checkout, Upsale, Woocommerce upsale, Wordpress Plugin, One Click Upell, Woocommerce One Click Upsell, woocommerce plugin

Id: p6sggdgiODg

Length: 7min 8sec (428 seconds)

Published: Mon Sep 20 2021