How to Build Simple Checkout Pages and Sales Funnels in WordPress (Studiocart + Kadence Tutorial)

hey everybody clifton here with clifton wp welcome to another tutorial hey in this tutorial i'll be teaching you how to implement a simple checkout system into a website maybe for a coach or a client or someone who's selling a product without using woocommerce essentially we're going to be looking at a plug-in called studio cart now studio card has been around for some time however i feel like it's been floating under the radar and it's quite a unique checkout plug-in there's a free version of it and there's a pro version that offers way more features but we're going to be using both versions so we're going to do some stuff with the free one and then we're going to do some stuff with the pro version and i think you guys are going to like this plugin right now this plugin is available the pro version is available as a lifetime deal on appsumo but don't rush over there yet i'll leave the link in the description below watch this tutorial first and see if it's something that may appeal to you and if it does then you should go ahead and get it i know i'm getting it because i can see a lot of my clients using this for just a simple checkout process so if you're ready for this tutorial let's go ahead and get into it [Music] okay so let me go ahead and demonstrate what i am talking about here so typically when someone has a product or a course or a coaching call or a consultation they will typically have a website or a web page where they can make that offer where they can present the benefits of that product so what i've done here is i've gone ahead and installed cadence and the cadence starter templates these are the free versions of everything and i've installed that in here on this wordpress install i've made a few changes just to modify the text a little bit to demonstrate exactly what i'm talking about so this is more of a sales page right so you can get this from the cadence free starter templates so i've just installed this as a sales page and this is offering a course on becoming a web designer in 30 days and let's say this person has marketed the course they've driven some traffic and now people are ready to purchase the course all that we need to do is click on get started or click on the purchase button and then it takes them to this checkout now this checkout page if you notice here right here is actually powered by studio cart and this is powered by the free version of studio card so you can see here the name of the course a place to put in contact information the credit card information spot and this is actually powered by stripe the amount total and then the sign up okay so very clean very simple so if somebody wanted to just simply sell a product or a course or simply sell access to a course and have it be done in a professional way this is an actually 100 percent free way to be able to do that and i'm going to demonstrate everything from the beginning so we're going to go to the beginning start with a completely blank slate and rebuild everything that you see here for free and then we're gonna test it out we're gonna see how it works we're gonna create thank you pages uh for this and we're gonna look at how things work on the back end okay so now we have a fresh install of wordpress i'm going to go to the dashboard and from here i'm going to install a few things the first thing that i want to do is i want to install the cadence theme so i'm going to go here to appearance themes we are going to click on add new and we are going to search for cadence okay um here's cadence right here i'm going to click on install and activate all right so we now have our theme installed then i'm going to do some house cleaning here so i'm going to get rid of anything that i'm not using so all these themes that are here right now i'm going to delete them all okay so i only have the cadence theme installed great now the next thing i'm going to do is i'm also going to install the cadence starter templates which are free so i'm going to click on that right here you can also find this in the plug-in repository all right and we're going to choose a builder i'm going to choose gutenberg okay and then the next thing that i'm going to do is i'm going to install one of these free themes i'm going to install one of the free websites on here so let's look for the web designer design course which is this one right here i'm going to click on that one i like everything as it is right now i'm going to say i want the full site and it says here it requires a premium third-party plug-in which is basically this actually requires the learn dash plug-in which is a learning management system plugin and uh but it's not free but we don't need it for what we're gonna do here okay so we're gonna go ahead and skip and import with the partial content that it has because we only really need the home page and we're gonna create all the other pages ourselves okay so now let's view our site all right and our site is installed this looks great now the next thing we're going to do now is we're going to install studio card so we're going to go to our dashboard go to plugins installed plugins okay and click on add new i'm going to search for studio card so i'm gonna go ahead and install it now click on activate we're gonna skip this and we're ready to get started so you see right here where it says no payment methods found please enable at least one payment method in studio card settings so this is very important for us to be able to do so let's go to the settings and right here there are three settings general payment methods and integrations you have to have one of the settings set up so for now we're going to set up our stripe setting and i'm gonna go ahead and add my stripe details in here right now so i've added in my stripe details so now let's just quickly go through the settings okay so this is the free version of the plugin these are the settings over here on the left we have products orders subscriptions the categories tags settings templates reports and contact us right here under templates there are available templates from studio cart that you can go ahead and look at and they have templates for elementor they have templates for divi and gutenberg right so but we're going to use our own we're going to use gutenberg but we're not going to use any of these templates here um you can and they look very nice but we're going to use our own because i like to build my stuff from scratch okay so i'm going to go back here right here is where you set up your general settings so your currency your country and the currency position and decimals and things like that and is it a spot for you to put in your terms and conditions url then here in the payment methods they offer cash and delivery stripe and paypal right so these are all offered and then right here under integrations we have active campaign mailchimp member vault kajabi send fox and you can enable facebook ad events okay and that's about it on all the settings so very simple and very straightforward the next thing that we're going to do now is we're going to go ahead and take a look at creating a product and setting up our first checkout okay so here's what i really like about studio card in your typical or traditional e-commerce like woocommerce for instance you usually have a product uh and it's usually a post type by itself and then you have your cart and you have the checkout but what studio cart's done is it's taking the product and the checkout and made them into one thing so you're creating as you create a product what ends up happening is that product has its own dedicated checkout what that allows you to do is basically you can have as many products as you want with as many checkouts as you want and each checkout can be completely different and unique to each product so i'm going to show how this makes sense here in a moment but it's actually a very very brilliant way of selling things very very quickly without too much complication so this is particularly going to be good for if you are selling an info product you can also sell physical products but it might take a little bit of customization to do that but it's really meant for being able to collect payments very quickly and creating a customized checkout or a good conversion focus checkout so let's take a look at creating a product so when i go over to the studio card menu here i'm gonna click on products and we're going to click on add new product now when you get here now remember we're using the free version so in the free version one of the things that i noticed is that when i create a product it gives me the classic editor now wordpress currently uses gutenberg but the classic editor option is still available but this particular plugin the free one at least puts you into the classic editor mode so but let's just go here and let's create a product and we're going to call this product our website design course okay i'm going to leave the editor alone and i'm going to scroll down to the product settings so this is where all the magic happens let's just go over these settings real quick so over here what you'll notice is that there are there are seven settings there's general page access payment plans order confirmation notifications integration and tracking under the general tab this is where you get to put the public name of the product so we're calling our product the website design course and i'm going to go ahead and populate that in here as well then the page header color has to do with the header of this page right and then you can hide the page title which we're going to go ahead and do and then there's a button text for the checkout right so i'm gonna change this to get the course or actually more appropriately sign up for the course okay and then this is the color of the button uh for when people order right so you can change this to any color that you want for instance i might decide to change this to closer color to the colors of what we're using for our current theme all right great so that's deals with the general now next is the page access and by page access what they mean here is when is the cart available and you can actually set up the cart to be available on a specific date you can set set it up to close on a specific date and then whenever any of these conditions are true it will display a message right or you can create a custom message if you want okay or you can perform a redirect to a different page you can also limit sales so if you want to only say you know there's only a hundred of these available then this is where you would put that information okay let's go ahead and clear this out then next are payment plans and this is where a lot of the magic happens and i can't believe that this is available in the free version but this is a really really smart idea so first you can choose to have things on sale and you can schedule the sale right so you can say this is not available until a certain time and you can have a sale available right the other thing is you get to create as many different payment options as possible and there's multiple ways to be able to use this so the first way to be able to use it is just as a simple payment right so let me go ahead and turn these off so we can see just the natural flow of things so if i click on add new here are all the options that we get to fill out in our payment right so the the typical ways we just set up a simple payment so just one payment i'm going to call this again uh website design course is going to be my plan id i'm going to get rid of the spaces so it's more of an id and i'm going to say this is a one-time payment but what are the other options that are available well you have options for recurring payments and you have an option for a free product so you can actually set up one-time payments or recurring payments and have subscriptions going right here in the free version of the plugin so if i select recording payments it gives me the option for the price the payment intervals how many payments i get to make and the pay the payment intervals so but we only want this to be a one-time payment then you get to change the option label so for instance let's say i'm gonna make this uh just the website design course is what i'm gonna label this as okay so you can label it anything that you want and this course is let's say this course is going to be 399 and this is now our payment option okay and i'm going to go ahead and save this and let's preview the product so now i want to warn you when we go to preview the product it does look kind of interesting right so this is a template that comes with studio card but we're not going to be using this at all because studio card actually produces or provides a short code and that short code we can embed in a page of our choosing and that's what i did when i showed you the landing page there in the beginning or the checkout page there in the bidding so you'll notice if i go to products here you'll see that there's a short code here that we can use for that okay now the pro version has a lot more options uh for this kind of thing but this free version actually has a lot of options as well so i'll show this in a little bit but let's go back to our product okay so i'll show you a couple more things with this product so when we come over here then the other settings that we have other than payment plans is you also have order confirmation where you can choose to display a message display a page or perform a redirect after someone has purchased something so you can actually create thank you pages and embed uh some short codes in there that will show some details of the purchase and then have this redirect to that thank you page and then we also have noted notifications so notifications is where you can create the emails right so you can create as many notifications as you need right so i can just come here and keep creating notifications you can create emails for your team emails for order fulfillment emails to the buyer emails to the seller you can create all kinds of emails with this and they're just very simple emails and you just basically you can enter an email for a specific uh maybe you have a specific team member you want to send this email to or the purchaser or the admin so i'm gonna go ahead and remove these because we're not gonna be sending any emails for now okay then you have integration so on the integration side if you remember earlier on let me go go back here so if you remember under settings and if you go to integrations you see all these integrations here if we had api keys for these different uh for instance for these different crms like active campaign and convertkit and mailchimp member vault and so on if we had those active then when you actually go to your product and you click on integrations then you will be able to integrate those options in here but right now because we're using the free version and we don't have those api keys connected you're not able to see this list will actually change depending on what's available also there are certain plugins that this is compatible with like member press and other membership uh plugins that it also works with and there it has integrations with those as well and then the pro version has even more integrations and we'll go over that here in a little bit so but one of the things that it comes standard with is the ability to be able to create a user so imagine that you're running a membership site here and you want to be able to have someone purchase the product and have it simultaneously create a user uh for you as when the person purchases the product you can actually do that here by setting this up and this is in the free version so here are the triggers they purchase the product and you can select which plan they picked and then you can assign them a role and you can actually have studio card send them the new user password and email and that way when the product purchase happens they get a login and a password and they can log in and access whatever content is available okay and then the last thing here is tracking for all your google analytics and any other kind of tracking that you want to do and that covers all the product settings so what we're going to do now is let's go ahead and set this up as a real product so what i want to do is i want to have a website design course i want to have a payment plan so the first one i'm going to do here we're going to call this our one-time payment and maybe i call this website design course and we will label this one time payment all right then let's add a second one just for fun so i'm going to add a second payment plan and this will be uh let's call this website design course two and in this case this is gonna be a recurring payment so i'm gonna say i would like uh two payments and we'll say two payments of two hundred dollars so two payments of 200 the price is 200 and we can set that up to be weekly monthly annually i'm gonna set this up to be monthly and number of payments will be two all right and then that will do it for us for setting this up i'm gonna go ahead and update here i'm going to view this and i'm only using this just to see just to make sure that our options are in place so if we look at here at this checkout we can see here we have our payment plan you have two payments of 200 or we have the one-time payment okay then we have a place to put in our contact information uh because stripe is enabled but on test mode and then our total and so on so and here's our signup for the course link all right we're not going to use this this is just we just created this uh this is just looking at the post type of the product what we are gonna do next is we're going to go ahead and grab the short code and then put that into a page of our choosing so let's go ahead and do that now so i'm gonna go back to the product here i'm going to go to products and this is a short code that i'm going to grab and then what i'm going to do is i'm going to go to pages i'm going to click on add new and we're going to call this page website design course and let's go ahead and just for fun we're going to go ahead and test our cart right test our product and see how that looks so i'm going to create a row here so let's create a row layout and we're gonna do a two column layout just for fun i'm gonna put just some text here so we're gonna go to i'm gonna use the advanced heading which is my favorite from cadence blocks advanced heading and we're going to say become a website designer in 30 days okay this is just a placeholder for now we're going to actually style this and build this out to be really nice then what i'm gonna do is i'm gonna come here and there's a couple ways that we can add our product search for custom html okay or i can use the shortcut since i already copied the short code i'm gonna just go ahead and grab the short code and i'm gonna paste the shortcode in here all right so this is a shortcode for our product and remember this is very rudimentally rudimentary we're going to style this pretty nice okay so i'm going to click publish and now let's view the page all right so we can see here here is our product right so we've got the payment plans that we selected right we can select each one we have the fields for the products we have our payment info and we have the ability for people to sign up for the course and our total is listed right here so what happens if i select the two payments of 200. when i select that if you notice our payment down here it says due today is 200 and then it tells them 200 each month okay so already i'm in business right i can go ahead and actually send this out and have people pay me for my uh for my course or my education or whatever it is that i'm doing and i'll show you how to tie this all together and make this look nice but the first thing we want to do is we want to actually have a very well very presentable uh checkout page so let's go ahead and do that it's going to be a fun part of building out a nice checkout page using cadence and cadence blocks and we're going to do it all for free okay so now i'm going to go ahead and edit this website design course page checkout and what i want to do is i want to present this as the product page a little bit of a description of product page and the checkout as well so i already have my two columns here and you can always open this up to see sort of the layout that you're working with right so the first thing that i want to do is i want to make this a little bit more prominent so what we're going to do here is i'm going to increase this text so we're going to use work sounds as our google font i'm going to increase this to 800 and i want the size to be 65 so nice and big and then we'll do a line height of 70. bring that all right so when we look at this uh okay this looks really good uh the next thing i want to do is i want to close the gap between the uh the rows a little bit so it's a little bit closer and let's make this text slightly smaller so let me go here and we're going to go let's look at 55 all right that looks good i'm thinking 60 all right 60 looks better 60 looks better great and well since i'm doing it at 60 then maybe i do want my rows to be at 50 so i'm going to grab my row here and we're going to increase this a bit to 50 all right now that looks really good okay then the next thing that i want to do is i want to create some highlighting in here so become a website designer so let's highlight website designer from here go to the small arrow right here select highlight and then i'm going to move over to the right side over here and i'm going to search for my highlight settings and i'm going to change this color to more of the website colors right there okay so let's use that the light one right there and now that looks really good then the next thing is you know you need some descriptive text at the bottom so let's go ahead and add a new paragraph i'm going to use the advanced heading version of paragraphs which is basically adding in the advanced heading and changing the heading option to a paragraph and then we're going to need some text to go here so i'm going to go to my favorite text generator which is lipsim.com and we're just going to grab some random text so let's just grab about that much this is plenty go back to the site paste it in and now we have some text next we're going to go ahead and style the actual checkout so i'm going to close this up for a little bit so we can see what we're doing and what i'm going to do here is i'm going to select this section okay i'm going to move over to the customization options here and what i want to do is i want to create a box shadow okay and i want my box shadow to be a little bit more extensive so we're going to set this to 30 and then i'm going to change the color a little bit here so i really want a very faint blue-ish color something really subtle and that looks really good tinted a little bit more a little more blue there we go a little more blue okay there we go all right so that looks good uh so far and then the next thing that i want to do here is i just want to make sure that there is some text above this right so i'm going to go ahead and click the plus sign click on advanced heading i'm going to write check out and then i'm going to shift this right above whoops looks like we have some additional blocks here let's remove those i'm going to shift this right above our shortcode okay so it shows up above the checkout and so far now that we've designed this let's go ahead and take a look at what this looks like so i'm going to update click on view page and you can see that our checkout page is actually coming together quite nicely so now we're going to add some spacing and we're going to configure the actual page itself so that it's a nice clean checkout so i'm going to go back click on edit one of the things i want to do is i want to configure this page i'm going to disable the title i'm going to set it to full width i'm going to do unboxed i'm also going to disable any vertical padding so now i have the full width of the page the next thing i'm going to do is i'm going to select the row again and now that i have the row selected i'm going to go to structure settings and instructure sent settings i'm going to hit make the content max with inherit from themes it's about 1290 pixels then i'm going to select this section again and i'm going to look for the padding options and i'm going to create a padding here of 30 pixels all around okay it's going to create some nice padding for the page okay and now that looks really good i think this text the line height here is a little too much so let's go ahead and fix that so i probably want this to be 65 and now that looks a lot better a lot cleaner we'll go ahead and update this and i'm now going to view the page and you can see our checkout is looking even better than it did uh before now there are a couple things that we want to do as well i want to create some a little bit more spacing here so allow everything to be able to breathe a little bit better and we're going to just add a nice little design touch to it that's going to make the checkout pop out a little bit more so i'm going to go here edit page i'm going to look to the right over here and i'm going to select the cadence options so this little page thing here i'm going to scroll all the way down i'm going to disable the header and i'm going to disable the footer okay that way i'm only dealing with the content of the page typically in a checkout you really do want it to be distraction free so that the customer can sort of focus on making their payment then i'm going to come here to this section right here and what i want to do select this section go to the blog settings and here i'm going to add some padding and we're going to add some padding of 30 pixels as well okay 30 pixels all around and now you can see it kind of made my text a little smushed so why don't we go ahead and reduce this slightly so i'll go to 20 pixels and that looks a lot better okay and then next what i want to do is i want to add some design element to the row itself so i'm going to open up my layout tree select the row and right here where i have the row selected what i'm going to do is i'm going to go over to the right and look at the customization options i want the background overlay settings and i'm going to select the gradient option see here and then we're going to make the first color uh light gray so let's see how this looks and the second color a darker gray okay that looks really good already but what i want to do is i want to create sort of a slant here so what i'm going to do is i'm going to change the angle a little bit so yeah that looks really good there and then i'm going to reduce some of the location here so that it creates a much more defined line so let's go ahead and increase location there we go i actually want this to be increased in the opposite direction so we're going to go this way and then i'm going to shift the gradient angle like so and let's close this out so we can see the full thing of what we're doing here so let's shift the gradient angle just like that and i think what i where i need this to be is going to be about 315 degrees all right that looks really good and then the next thing that i want to do is i want to create some spacing like i said so selecting keeping the row selected here i'm going to go to padding and margin i want to increase the top here to 250 and the bottom to 250. now it does look a little bit too big so let's make it 150 and 150 all right and that looks a lot better okay now the other thing that i want to do here is now that i've increased that i need to shift this over a little bit so i'm going to come back here to my location and we're going to bring this down and bring this down awesome now i do think this is a little bit too dark so what i want to do is i'm going to come here select the lighter color come here and make this a white color and then we're going to just gradually increase this color a little bit so that it becomes a little more prominent let's go ahead and select this again and just bring it lighter lighter a little lighter let's do that again sorry it's not and maybe this time we just reduce opacity there we go okay so that's nice and that way we can still see our text then the next thing that i want to do is i want to make sure that this uh section right here that this section has its own background color so i'm going to select this section go to background color and i want this to be white okay and then uh just take a look everything looks really good click update and when we view the page excuse me now we can see that we have a much more cleaner looking checkout if i zoom out a bit on this here you'll see that our checkout is really nice check out over here it pops out you can see it and we can even zoom this in and see our options available for us and just like that we have uh beautifully designed the checkout page for become a website designer in 30 day product so this is really cool we can add images truss signals and so on to this and we are ready to rock and roll so the next thing that's left to find out is does it actually work if i actually put some information in here will i be able to flow through and check out using this check out using this checkout page right and we can absolutely test it with our uh our credit card number here so why don't we go ahead and do that but before we do that there is one thing that i want to do i do want to create a thank you page that way once we check out we can go ahead and see a thank you page but you know what before we do that let me just go ahead and check out with the way that is that it is right now let's just see how this works so i'm going to come over here and we're just going to put in some information let's say we phone number is not required so we're going to leave that alone and then we're just going to go ahead and put in our dummy credit card information for stripe and 399 do today we're going to use the one-time payment option and i'm going to click on sign up for the course and once you're once you're done with that you get this thank you page thank you a receiver order you can see what you ordered and that is now done next i want to show you how to turn this thank you page into a much nicer thank you page so that it doesn't have this standard template here and remember guys we're still on the free version of uh studio card so let's go ahead and create a better thank you page we'll run it back again and that way you'll get to see what that looks like once you've done it so to create a thank you page just go back to the dashboard and what i'm going to do here is i'm going to go to pages all pages and what i want to do is i want the thank you page to look a lot like the actual product page or course page and when i say that i don't mean the product page on the studio card i mean the page that we created and embedded the short code in so i'm going to come here click on edit and what i want is i want this block right here i just want this whole thing so what i'm going to do is i'm going to go to these three dots right here and this is a really cool way to transfer a design to a new page just go to the three dots here on the right corner go to code editor and you'll see it in code formats go ahead and copy this code and let's revert back to the code editor and what i'm going to do is i'm going to exit out of this click on add new and i want to call this thank you and i'm going to go ahead and paste the code right here and now i have the full layout that i had before now i just need to make some changes to make it an appropriate thank you page so what i'm going to do first i'm going to set up the page by clicking on the page icon i'm going to disable the page title i'm going to set it to full width i'm also going to set the content style to be unboxed and the vertical padding will be disabled i'm also going to disable the header and the footer because i just want the thank you page to be there by itself now in the thank you page you can add anything you want you can add access to any assets that you may have sold any additional information or even instructions for accessing the product that they've bought but in this case i'm just going to simply say thank you and i want to show the receipt for what they have purchased so we're going to come here and i'm going to say thank you and we'll say you are awesome and then i may leave a message here that may say check your oops check your email for additional instructions okay and we'll take the bold out of this all right and then the other thing that i want to do here is i don't want this checkout here anymore so we're going to be using a different short code so studio card actually does come with short code and if you go to their websites website in the docs there is a list of short codes that you can use one of them is called studio card receipt i'll go ahead and copy that short code and i'm going to go back here and replace this one with that shortcode so just studio cart receipt okay and you can put here your order details okay and now we have a nice thank you page you can format this any way that you want you could even add video if you have more instructions and links to other things but for now just to show the the thank you capabilities of this page we're just going to leave it like this i'm going to go ahead and publish the page okay now one thing you'll notice if you look at this page right now you notice that it doesn't have any information so how do we get to use a page very simple go back to the dashboard go to studio card click on products and select your product and then what we're going to do here is down here where it says order confirmation we're going to say we want this to actually display a page and the page that we want is going to be this thank you page i'm going to go ahead and save that and then i'm going to go back to our course page our course sales page here view the page and we're back so let's go ahead and do this again i'm going to use a different name i'm just going to say john and use the same email if we want and our dummy credit card number and sign up and there you have it so now our thank you page is now matching our brand and we have the order details right here and because you can build this out in gutenberg you can pretty much put anything that you want in this page okay and right here we'll conclude the overview of looking at the free version of studio cart so now i want to talk to you about the pro version of studio card and show you some of the differences between the free version and the pro version and i think you're going to be very impressed now before i do that i do want to mention this studio cart right now is actually available on appsumo and it's available as a lifetime deal but the actual studio cart website also offers lifetime deals but there are some limitations and the absolute deal right now appears to be a much better deal than the actual website is offering so when you're done with this tutorial if you're interested in getting this plug-in getting the pro version after what i'm about to show you i have a link in the description below this is my affiliate link it doesn't cost you any more money to use that link but if you do use that link i do get a bit of a commission i do have to disclose that and that commission just goes to support the channel so i just wanted to make that clear as i get ready to dive into the pro version of studio cards all right let's jump right into it to learn more about the pro version of studio card let's go ahead and take a look at the studio card websites from the actual developer herself so developer of this is her name is nicole and she's got a team that she works with and they built out this uh this plug-in really to help with clients that needed a very simple way to create funnels and create high converting checkout pages without all the clunkiness of some of the tools that are out there or spending a ton of money and so she created this uh this plug-in and it turns out that it's actually a very very good plug-in so i just showed you the free version of it but let's take a look at the uh pro version so the first thing you want to know you'll notice if you go to the features here on our website you'll see that there is a free versus pro comparison and i pretty much showed you everything that you can see here uh and on the free version but if you hop over to the pro version of this you'll notice that there's a two-step checkout cart abandonment coupons custom fields user account creation and subscriptions and then here are the integrations that are included in the every version of of studio card and then the pro version as well but what's not really clear here what you're not really seeing is that when you get the pro version you actually kind of move away from it being just a simple checkout system to now being having the potential of being a very clever sales funnel where you can actually hop through and have upsells have order bumps and other great things like that and we're going to show you that i'm going to show you that here in a few minutes but i wanted to show you this her website first next if we go to the pricing of this and look at how this is priced so there's annual pricing and there's lifetime pricing so a personal life a personal license for one website is 149 a year expert is 199 a year an agency is 349 a year for up to 30 site license expert is a five site license and if you go to the lifetime options it's even even more expensive but you notice you're still limited to 30 site license even though you're paying almost a thousand dollars for the plug-in so the reason why i'm telling you this now is because if you go to appsumo and you can actually get there if you want to use my link you go to cliftonwp.com [Music] studio cart sumo so if you type in cliftonwp.com studio card sumo you'll see that that studio card is actually being offered on appsumo and it is starting at 89 which is a big contrast from the 149 or whatever these other prices are right now so starting at 89 and it's a lifetime deal it's got over 61 five taco reviews or five star reviews and if we scroll down you can see some of the details now this is on the pro version of it and the pro version has a whole heck of a lot more uh tools i recommend you come here and read up on it and then also uh check out some of the demos that that are available here as well we're going to go through some of them but i wanted you to know that this is available here now and what i wanted to bring your attention to is if you look at the plan and features you get lifetime access to the studio card expert plan so it's lifetime access you can redeem your codes within 60 days of purchase and you get all future extra plan updates and then you get unlimited products unlimited funnels and you know all this great stuff order bumps one click upsells and downsells custom thank you pages cart abandonment and so on but if you go over here i want to show you what is included so notice that in the single you get five domains which is more than 489 which is more than what is offered on the uh pricing chart here for the double so if you stack your codes you get 30 domains and for multiple you get unlimited domains and this is what attracted me here because i like anything that offers unlimited domains and a lifetime access but it's entirely up to you you might just need this for yourself so either way you're still going to get lifetime access to the plugin so you can read all about nicole here and describing it and you can see it's got a ton of reviews all of them everyone's raving about this plugin it really is a great plug-in and when i show you the benefits of the pro version of it uh you'll agree with me as well so check it out on appsumo pick it up uh i would recommend you pick it up because there's a lot of great things that's coming out they also have a great road map uh coming through here so if i look through here there's a link to the roadmap and i believe that is down here so you can kind of see the docks and here's the trello uh roadmap for them and they have a lot of things planned but that being said let's take a look at the pro plugin and let's take a look at some of the things that we can do with that so i just wanted to bring that to your attention this is a really good deal all things considering what they offer it traditionally for on their website all right let's look at the pro version of the studio card plugin so go ahead and explore the pro version let's go ahead and go back to the dashboard i've already picked up my copy of the studio cart pro plugin uh and i did get it from appsumo and i picked up the i can tell you the one that i got i got the stacked code so the multiple for 267 dollars which is uh which is a discount from the 9.99 that is offered on the on their website of course you don't have to do this this is more than enough or this more than enough but i like to have unlimited domains so i did that uh but now now that i have it i'm gonna i've already downloaded it from the website and i'm gonna go ahead and install it into our project here so what i'm going to do i'm going to go to plugins take a look at install plugins and i'm going to deactivate the free version that is here right now so i'm going to click on deactivate and i'm going to say it's temporary activation and submit and deactivate all right then i'm going to delete that one as well great now i'm going to click on add new i'm going to find the pro version of the plugin here in my computer and there it is open install and activate so now that i've installed the pro version okay you'll now notice that over here we have some additional links under the admin right so now we have subscriptions we have upsell uh capability and if i go to settings this time under settings we have way more information right before we only had up to the number of decimals now we have terms and conditions url privacy policy url we have an api key to to interact with things like zapier and then we can even change our coupon parameter name so if you don't want it to say coupon maybe you want to say offer or something like that then you can do that and then we can disable that product template remember that green template that we would see whenever we would create our products we can go ahead and disable that so i'm going to disable that right now my payment method should still remain the same and i don't have any integrations to do right now so i'm just going to leave all this alone but if you also notice now in addition to the all the integrations we had before we even have more integrations including with teachable and charged drip and google recaptcha all right so now uh let's take a look at what our products look like so if i go back to my products here remember our product that we created it's still here i'm gonna go ahead and click on edit and if we look here to the left so we before we just had seven options now we have a few more options than seven right and also notice how the classic editor is now gone and now the page is now gutenberg friendly right so it but doesn't matter anyway we're always going to be using gutenberg but i just wanted to point that out now if we go to our page access that's all all this remains the same so all these benefits are still there our payment methods and all that all this remains the same but there are a few things that are added on so now we have form fields and what this allows us to do is we can now add additional fields so i may want to add for instance i can now add a drop down a password field a quantity field hidden field i can choose a text field and make that text field become a user name field for new accounts if i want i can add quantities now to my products if i want but whatever fields you create here gets added on to the product and then i also have a two-step form option meaning i can toggle this on and i'll be able to have a two-step form option and if we want to see what that looks like i'm gonna go ahead and toggle that on now i'm going to remove this custom field because we don't need that anymore i'm going to toggle this on as a two-step form and i'm going to click on update and then let's go back and take a look at our product page now so i'm going to go to the page and view and now you can see now i have this two-step option where i collect the contact information on the front part and i can get the payment option in the second part so it just streamlines the form a lot better and this is also something that's pretty cool to be able to use for any kind of free plus shipping offer if you're doing anything like that or some incremental payment offer where you want to have a two-step form that operates that okay let's go back to our products and take a look at what we have here with the pro option okay so i'm going to click here go to edit and uh i'm going to go down to the form fields here and i'm going to turn off the two-step option here so the other thing that we get to control is we also get to control the field visibility so remember how we had that phone number we weren't using i can now turn that off if i have a newsletter that i want people to opt into i can have them opt do an opt-in checkbox and whatever i'm integrated in it will just give them the letting me know that i have the permission to add them to my newsletter the other thing that we have here we can also display address fields so if you're selling a physical product or something that you'll have to ship you can go ahead and toggle this on and now you have an address field that will show up on the front end of the form and now we also have a coupon field so you can add coupons you can create coupons uh to be able to have people get discounts on your product and there you can see here right here is the area where we would go ahead and do that and create coupons so if you select coupons you can add as many coupons as you want and set it up according to percentage or fixed amount and label it with any label that you like you can also set up how valid it when how long the validity of that coupon is and so on a lot of great stuff here the thing that i really wanted to point out is the ability to have an order bump and a couple of upsells so there's a order bump capability you can have an upsell first upsell and then you can have a second upsell so you may want to do a first upsell and then you can also do a down cell right and these all link together this is all uh this is just really cool stuff because this basically takes this from a simple payment and checkout plug-in to now being a plug-in that where you can create a very very simple very effective sales funnel without all the hassle of some of the tools that are out there that make it a little bit more difficult and like and and the beauty of studio card is that with studio cards the product page right the product you're creating comes with the checkout built-in so it's just a wonderful combination we've already seen order confirmation we've seen notification what i wanted to show you is integration so when we look at integrations right now and i'm going to go ahead and delete this one that i created and you click on add new so now we now have being able to create a user and you have a web hook and with the web hook you can basically now integrate and communicate with a host of different tools so there are a lot of tools out there that have web hooks but now you can now take information from here and pass it on to any tool that you want whether it's active campaign or convertkit or mailer lite pretty much anything so this now becomes an integration plugin as well so why don't we go ahead and test out a few of these items and what i'll do is i'll end the video but i will create new videos a couple new videos on studio card where we go through each and every single one of these different capabilities in the pro version as well so the first thing i want to demonstrate for you guys is the order bump so when we go here to the order bump section we're going to add a order bump to our product so i'm going to go ahead and let me remove this integration i'm going to go to order bump and we're going to enable the order bump and then from here you can select a product so if i had an additional product i could create uh i could create a product and i could select that product from here but it's not really necessary so what here what i'm going to do here is i'm going to say this is a one-time charge or it could be a recurring payment if i want it but let's just make it a one-time charge so your order bomb could actually be a membership right and you would have a recurring payment if you were doing that but let's make it a one-time charge and let's say the amount is going to be 47 okay and it allows us to have a product image so let's see if we have a suitable image in here that we can use let's go to our media library and let's use an image of uh let's use the image of let's use this phone okay so we'll use that or even better let's use this computer okay and then position that to the left and then the checkbox label will say yes i want this and then the headline we could say anything we want but here we're going to say get this additional benefit normally 999 [Music] now for 37 it's a massive discount okay and then you would then put in your product description here so you can just say um let's get our some lipson texts to fill that in i'm just going to grab a little bit you know say too much all right and do we want it to replace the main product purchase no we want this to be in addition to and then you can also have a custom thank you page for people that purchase the order bump so i can have a a page for if you don't use the order bump and i have a page for if you do take on the order bump but we're gonna leave that alone for now i'm gonna go ahead and update this and then let's take a look at how this actually impacts our checkouts so i'm gonna go back out here we're gonna go to our page where we have our course and when we view the page now what you'll notice is our checkout has now expanded so we have the order bump right over here right and the order bump is now 37 or actually supposed to be 47 sorry mistake there but that's okay and somebody says yes i want this and it it adds the additional 47 dollars to their 47 to their total and they didn't go ahead and sign up for the course and you now increase your order total uh by doing that okay so that's a very very powerful piece now what else could we do well we could also create an upsell okay so let's quickly create an upsell just so that you can see how this works and then we're going to run through the entire thing and then we'll wrap up this tutorial all right so first i'm going to go back here to the dashboard and one of the things that you'll notice here is that now we have let's see here now we have under studio cart we actually have upsell offers now upsell offers is a post type that allows you to create upsells but essentially it's just no different than creating a page right so there isn't anything special here other than the fact that is the upsell post type and studio cart will be able to identify it as an upsell so i'm going to set it up like i set up any other page i'm going to come here and what i'm going to do is i'm going to disable the title i'm going to set it to full width content will be on boxed and the content vertical padding will be disabled okay i'm also going to get rid of the header and also the footer and we're going to call this uh we'll call this computer upsell or actually let's make it more relevant and let's call this our upsell okay seo course upsell how about that all right and then i'm going to go ahead and just create my two column layouts and uh let's set this row over here the structure settings i want the width to match the theme there we go awesome and then the next thing that i want to do here is i want to probably add an image here so let's go ahead and grab an image media library and let's say the upsell is going to be the seo course so i'm going to grab this image here and then i'm gonna create a heading advanced heading and we're gonna say improve your marketing with search engine optimization let's spell your correctly we're searching optimization we want this to be a little bit of a bigger title okay i'll make that bold and the size 45 line height 50. all right great and then we're going to grab some texts that kind of describes what the upsell is so it's just a rudimentary upsell just to demonstrate how this works awesome now let's add a button okay and our button will say yes give me the course and let's go ahead and style our buttons make it just a little bit nicer so white text background color green [Music] and the hover is fine just the way that it is all right next let's put the uh decline right so this is what what will happen if they accept the course this will we also need to something have something if they decline the course so i'm gonna go ahead to add a new heading here and we want this to be a paragraph text and we want the text to say no thank you okay we're going to go ahead and center this and i'm going to add some spacing above it so let's give it a margin of 20 pixels excuse me all right so and then we need a major title right so we need you know usually something uh something major so let's create another row here and uh we're going to call this a row layout just one column the structure content max width will match we'll hang for the theme i'm going to grab this right here and i'm going to duplicate it and then i'm going to drag this one down here and then we'll move it up we'll move the entire row up okay there we go and here we'll just say wait let's say we'll say here wait one time exclusive offer just for you all right and uh let's change the color of this so that it's attractive so we'll make it red dictate some urgency and i'll set this to be centered and this is our just our rudimentary uh one-time offer all right great so now that we have that this is now going to be our upsell so we're going to be offering this course uh as the upsell we can do just one more thing here let's go ahead and grab this entire row and let's give this grow a background i'm coming here background settings background color let's make it like that and then let's add some spacing to it in margin let's make this 6666. there we go all right and then let's publish this upsell so this is our uh this is our upsell okay now i want you to see what happens once we set this up so i'm going to go ahead and exit out of this i'm going to go back to our products under studio card i'm going to go to the web design course click on edit and we're going to go to the first upsell okay now that we're here at the first upsell we're going to say display type but first we just do a one-time charge this is going to be our seo course and let's say the charge is going to be 97 and then the display type is going to be an upsell offer page and you can see right here where it says select upsell offer and here our upsell is now available i'm gonna go ahead and grab that okay set that up and then this these are the keys that we need right here right so we've got the this is what happens when somebody says yes this is what happens when somebody says no somebody says no is gonna take us to the thank you page so we need this yes one okay and we're going to go let's go ahead and update this now then let's go back to our page oops okay sorry let's go back to the dashboard let's go back to our upsell offer click on edit okay and right here where we have this button we're going to select the button and right here where it's asking for a url we're going to go ahead and paste in the yes offer and x have it accepted and then where it says the no version of this we're going to select that create a hyperlink paste it in again but change the yes at the end to no okay have it accept it update all right and now we are done so in order for your order bump and your upsells to work correctly one of the things that you want to make sure you do is that you want to make sure you're associating them to an actual product so we're going to create an actual product that we're going to order bump to and that we could upsell to if we wanted to so let's call this product our graphic design course and we'll make this our order bump i'm going to come here under payment plans i'm just going to set a simple payment so let's call this graphic design course okay and we'll set this to be a one time payment let's just say uh let's make it 200 okay now it doesn't matter the price we put here someone's buying it directly this is the price they pay but the on the order bump we're going to give a discount a discounted price okay and so now we're going to go back to our main product which is the web design course okay so the web design course is our main product and now we're going to set this up to accept an order bump and an upsell okay so i'm going to come here click on edit go to the order bump make sure it is enabled we're going to select a product for the order bump and that product is going to be our graphic design course we're going to leave it at 47 i'm going to correct this to say 47 okay and everything looks good here next i'm going to go to the first upsell and then the first upsell i'm just going to make sure that it is selecting the seo course is going to be the upsell it's 97 and everything here looks great as well so now that we've done that let's go ahead and run the process from the beginning so i'm going to come here pages all pages web design course we're going to put a name and an email and our credit card number we're going to say yes to the order bump which has now added the graphic design course as the order bump here and then i'm going to sign up for the course and this should take me to the upsell so here's the upsell i'm going to say yes to the upsell and now everything is processed i'm now on the thank you page and you can see i have the website design course the graphic design course and the seo course and here's my order total okay guys and that's it for this tutorial i hope you guys enjoyed learning about studio cart and you also enjoyed looking at some of the things that you can do creating your own checkout and your own sales funnel if you're interested in getting studio card you can get it for free in the wordpress plugin repository for the limited version if you're looking for the pro version you can get it on their website although if you do want a serious discount so instead of paying 399 dollars you can go to appsumo and pay 89 and get a lifetime deal for this plug-in and if you're looking to use it on multiple domains then just simply stack the codes basically purchase multiple codes for 267 dollars you can get a lifetime deal use on unlimited domains and save money basically not pay the 999 for a 30 site license you essentially will be paying 267 dollars for the domains hey if you liked this tutorial please go ahead and smash that like button so we can get some favor from the youtube algorithm and if you have not subscribed to the channel please subscribe so you can get notified when i release other videos that we'll be creating on this channel and if you have subscribed thank you very much i really appreciate that and i will be seeing all of you in the next video thank you [Music]

Channel: CliftonWP

Views: 771

Keywords: cliftonwp, studiocart wordpress, studiocart, sales funnels wordpress, sales funnels for beginners, custom checkout pages, customize checkout page elementor, gutenberg blocks tutorial, kadence blocks tutorial, kadence blocks pro, kadence theme tutorial, gutenberg wordpress, upsell wordpress plugin, order bump clickfunnels, order bump wordpress, kadence free theme, kadence free templates, gutenberg wordpress page builder, appsumo lifetime deal, wordpress tutorial for beginners

Id: f3va55Gz4uw

Length: 68min 21sec (4101 seconds)

Published: Wed Sep 29 2021