Make An Appointment Booking Website Using JetAppointment

Hello beautiful people. My name is Ferdy. And in this video, I will show you how you can create a WordPress website with a booking system. So people can book an appointment on your website, they can choose a service, they can choose a person that offers that service, they can pick a date, and they can pick a time. Let me show you what we will cover in this tutorial. This is the website we will create. But it can be about any subject about any service you offer. On your website. Here, I click on book an appointment. It's a barbershop website. And I can get a massage trimmer. I don't need that, or beard trim. But if I would select shaving, for instance, I can select someone who will do that for me at work, or Thomas or Roy. But if I go back and I go for a mustache trim, there are only two people that can do that. So based on the service you offer, you can assign people that can do that. So I go for two haircuts, and it will be done by Roy. And then I can select the date. But how about Thursday? Okay, well, my name my notes. And when I do this, and when I booked this 9am will disappear out of the slots, so we can get your agenda fully booked. When you have an appointment system automatically. I click on next, I can leave my name 30 My username or my email address, I mean, credit [e-mail] My phone number. So they can call me like Hey, where are you? Come on, I can leave a comment like, I want to F haircuts Justin Bieber when he was 12. Okay, total amount of $35. If I want to, I can link this to WooCommerce into stripe, so people can pay up front. So if you have a website with a big bachelor party like your if you have a cowboy terrain with horses, and people can ride on the horses, do laser gaming or shooting with something. And then at the end, they have a beautiful dinner. And you say this whole arrangements costs, let's say Ifeoma dollars, or a group of five people. They can let them pay up front. So this can be done. But right now I don't do that. I click on book, then I go to a page that says thank you. Okay, what happens now? I get an email, the website owner gets an email, like there's new booking. So over here, it says, Hey 30 There's a new booking from 30. That's me for when January 28. This time by who ROI will be the cutter the hair cutter to the barber and which service normal haircuts, no shaving this my phone number and the comments. I want to have the haircut of Justin Bieber when he was 12. The total miles will be $35. So now I know. Okay, that's okay. I can reply now say hey Ferdy. Awesome, looking forward to see you. But Ferdy also, the booker also gets an email. So I go to my Gmail accounts. And that says your booking is confirmed a 30. We just want to confirm that we received for booking we're looking forward to see you soon when this date. You will be served by Roy retreatment is a haircuts your comments, I want to have the heck out of Justin Bieber, the total amount that can be paid at the store is $35. See you soon 30 chairs on the other 30 such go into them. This person also has named 30. Okay. So that's what we're going to create. But how are we going to create this? Well, we are going to use a premium tool to create us it will cost $85 per year, or you get the lifetime access package. I'll show you what is oh well, Luke, let me tell you that if you would make a website like this for a client, you can charge $1,500 For easily. So thing $85 per year, charge $1,500 for it, I think it's a really good deal. I will talk more about it. But let me show you how we are going to create this website. So I log in. So when we have our website up and running, we will create to extract custom post types. What are those? Well, this is a post type posts is a post that old pages and we will create two extra in this case called services and barbers over here at services, our four services I offer for my barbershop visit can be anything if I add a new one. I can say you write a phoney stroll down, give the price 199 publish it. I go to the appointments, I have a new service. The same thing goes for barbers. I can a new barber called Winston. And I can add an image of him. This guy and then over here I can select a service. He's good in haircutting and helping people to write bony so if I click on Publish, I go to the appointment form. Right Apone like I select Winston. So we connect the service with the person. Then we will create a booking form. So I go to jet engine forms. And here we have our form. By default a form is already created but we're going to improve it make it look better. And when we do that, we can go to Elementor. Then we can search for a form element, and drag it over here, we can select our form. So here it is. And it can be displayed. By default it will be displayed like this. But then we're going to make it look better right now you see one option, and then you can go to the next page that has everything to do with it, page breaks over here. That's what we're going to do. So we're going to style it so it looks better. But then we're going to work with listings. What do I mean by that, if I go to jet engine listings, I have two listings. The first one is for the service. The second one for the barbers. If I open this with Elementor, is actually a template to display this option. I think this looks better than this. So this over here is a listing. So over here, I see the checkmark, the title, and the price. So if I would bring this to the right, and make the colour difference. So let's say make it green. It looks like this. Now, if I want to I can also add an image over here, that is linked to the service dynamic image, I'll bring it to the centre. And if I click on update, and I refresh the page, it grabs the thunder over here. I know it looks messy. at any store, I'll show you how I can configure it anyway, it looks beautiful. So that's what you do with listings. And of course, when people have booked their appointment, I will make sure I get an email as the barber owner, the customer gets a confirmation email, and the customer will be redirected to a thank you page. So how does it look, I scroll down and add forms, I go to our form. And then I scroll down and over here it says post submit action. So what should happen over here, I get a message that there's new appointment, the barber owner gets an email, the new customer gets an email, and then new customer will be redirected to a certain page. And if I click over here, you see you can automate everything. So the customer gets this email, Hey Ferdy, we want to confirm that we have booking for you, when on the date, they will see all that information they can reply. And that's the way the cookie crumbles. And if you don't like the colours, I will show you how you can change all the colours over here. And really easy, short time. So I change the colour to blue. Look at this. Now everything else is blue. So that's how easy it is to change things in the website. So that is what we're going to create. And that is how we are going to create it. So by now you should know if this is the right fit for your website. Maybe you're going to start from scratch, I will show you how to start from scratch. And maybe you already have a website where you can skip a few parts in the description of this video if timestamps. So if you have to go to a certain part of this tutorial, you can click on the timestamp and you will go directly to the parts. And if I go too fast for you, you can click over here, you can slow down the speed of the tutorial. So let me show you the four steps we are going to take to create this amazing website with his booking system. If you're starting from scratch, I can show you how to get a domain name and web hosting, and I can give you 60% of discounts. After that we will instal WordPress, then we will get the Astra theme and the jet appointment plugin. And then we will create our amazing appointment booking system. And if you have a domain name or web hosting already, and you have installed WordPress, Dan can go to step three. And I'll show you the timestamp so you can go immediately to that point in the video. So I hope you like what you're seeing so far. If you like it please like this video, feel free to subscribe for more upcoming WordPress related tutorials. And then I would like to say let's get started. So the first things we need in order to create a website or a domain name and web hosting. If you have this already, that's great, then you can skip this part. If you don't ever think and go to web hosting F gay.com. Hit Enter. And you will be redirected to name hero name hero is in my opinion, the best web hosting provider areas. Why let me give you a few reasons there are more but one, your website will load fast even if you go for the cheapest package. Why? Because name hero has invested in Lightspeed which is way faster than Apache, which is used with a lot of different web hosting companies. Here you see an overview what the difference is, when you use WordPress. The second one, the prices are really competitive, you get premium web hosting for an affordable rate, which is amazing. And the third one really important the support, you can call them 24/7 You can open the live chat 24/7 and you can leave a ticket and then we'll get back to you. So three ways to get support. And that's what I love about name hero. Now one of the reasons you get searched affordable prices here at name hero is because I get an exclusive discount for you up to 66% instead of the regular 50% that you get a name hero and they fail to see what the plans are click over here on this button or scroll down. And there are four packages, the starter clouds, the plus cloud, Turbo cloud and the business cloud. So what are the differences between those packages with the starter cloud? You can start with a one domain name. So if you're really on a budget, this is where you can start. Yes, one website, one gigabyte of RAM is just like your computer, the more RAM you have, the faster your computer will remain. Also, if you're doing a lot of things at the same time, so if you get a lot of visitors at the same time, then you can upgrade but I'm talking about hundreds of visitors per day, you have unlimited SSD storage, what does it mean, you can have 250,000 files on your website, which is more than enough, your free SSL, that means that you can make your website secure. With other web hosting companies that can cause money here it is free even with the starter cloud plan, and free website migration. So if you have a website already, you want to transfer it to name hero, you can do that for free. There we have the plus cloud, what is the big difference? Well, you have more gigabyte of RAM, so more people can go to your website at the same time. And you can have up to seven websites. And the great thing is when you get this package, you can have seven different domain names and all stored on one web hosting package, you get 60% discount, you pay $5.18 per month, and then you can have seven websites. So that is less than $1 per website per month. So my opinion, if you're starting, get this package. And if you're really like, okay, money doesn't matter, I just want to go with the best of the best of the best, then I suggest you go for thermo clouds, you can have unlimited websites. So you can even become a web design agency, start to make websites for clients, and host them on your website and charge them $20 per month for web hosting, depending on what you want to offer. And the great thing about this package is that your websites become even faster using an ve storage which is faster than SSD. So your website will go so fast. And the great thing is those websites are already fast. This one becomes even faster, you have a speed boosts plugin, and you will have a free domain, which is quite nice. And then if you're like you know I have too much money, I just want to get the best of the best of the best thinking go for the business clouds. And then I'm talking like if you have 50 websites hosting on name hero, then I would go for the business cloud, the great thing is you can always upgrade later. So you can start with the plus clouds for instance, and then later go to the turbo cloud, send them an email, they will fix it for you. i What i want to do now I want to start with a new website. So I want to start with plus cloud. So the whole year, I can decide if I want to create a second website or a third one. And I don't pay anything extra except for the domain name. So in order to purchase it, I scroll down and I go to order now. Now when we do register a new domain name a domain name, can we reduce it only once. So if I say I want to have facebook.com, and I click on Search, Facebook is unavailable. So you need to have a unique domain name. And I would like to go with 30 WP 30 wordpress thinking.com, you can have a lot of different extensions. If you want to go international, I would go for that comm. And you can go for your own country. So for instance, my countries, the Netherlands, I can have this one, or the UK. But as you see, there are a lot of extensions over here. So there are so many, but I would go internationally for.com and or locally for your own country extension. And talking about names. If you want to start a new business, use that business name, if it's already taken, you can become creative with your name, I highly suggest you always have your own first and last name as dotcom you never know what you want to do in your life. And if you have it, you have it. So I go for 30 wp.com I click on Search. And it is available. And it's for free if I go for two or three years at once. So I click on Continue. I'll explain that to you. Over here we can choose our billing cycle. The great thing is the amazing discount of 60% will be applicable on the first invoice. So if you go for one year, you get one year of discount, two years of discount, or three years of discounts. And the longer you go, the more extra discount you get, as you see save 30% or 6%. So the longer you go, the cheaper it becomes, I want to go with one year. And then there are a few extra things we can take over here, which are like to add dedicated IP address, or I don't need all these things. Auto Encrypt is free. We don't need this one. So I click on Continue. And then really important, what we need is ID Protection, it only costs less than $3 per year. And this will make sure that when you sign up spammers that will see all the new websites in the world will not spam you with a lot of things like a let me create a logo or do SEO or create a website for you or they will call you. You don't want that. So if you use ID Protection, they cannot see all your details. So click on Continue. And the great thing is this is crazy. The total amount we have to pay is less than $100. But other web hosting companies really good ones also, you pay around $150, sometimes more and here below $100. I really like it. We save a lot of money. And what we have we have the web hosting plus cloud so we can have seven websites Then we have our domain registration. And since I go for one year, I need to pay around $16 for it. But this is great. This is for 12 months of web hosting and a domain name, you can start your business for just $7 per month. So what I can do now I can create a new account. So I will leave my details over here. That's all my name. This is my name, last name, email address, my phone number, and then my company name, I'm, I have a company with my wife in Skald 13 Anna Media, I'm from this address. So I need to fill in your details over here. How did you find us? Well to YouTube, because I'm showing you and then you have a sport. And if you want to call them or have a chat session with them, they ask for a pin. So you can leave it here and then they know you're really you never need to Great Falls hurt, of course, make it really secure or you can generate one and they need to confirm your password. Then I scroll down and you can pay with credit cards, PayPal, Coinbase or credit card stripe. Well, I want to go with credit cards. So I can leave my details over here. I scroll down throughout to receive emails for special savings while there's a great thing while FERS Black Friday and Cyber Monday. And then they gave huge discounts for extending the service so you can get some money on your name hero accounts. And then they Miro adds extra money for you. So in that way you have discount for the next invoice. And if you have further agree to the terms of service, you can check this. Keep in mind, that's what you've got here through web hosting fk.com. And don't pay more. But you get extra discount and I get a commission. So I see that as a win win situation. Name hero will check all your details and see if there's no fraud. Well, if it's true that's filling in the information, then it should be fine. So I can go to the checkout. And it says Order Confirmation order is placed. If you have any questions about your order, please open support tickets from your client area code your order number, I want to go to the client area. So I want to congratulate you you have your own domain name a web hosting, that is amazing. And the great thing with name hero your website is live immediately. The only thing is if you go to 30 wp.com looks a little bit weird. So we need to instal WordPress. But the great thing is it's not with all web hosting companies that your website is live immediately. If you want to instal WordPress, you click over here on my clouds. And then you click over here on web hosting plus cloud, you can log into the cPanel and now we can instal WordPress we need to scroll down or we search over here for WordPress, and that is WordPress manager by Softaculous. Click on it and then I click on instal. So we see the newest version of WordPress. Here we can choose our domain name if you have more domain names you can select one and then here I want to select HTTPS or was it will be secure from moment one, we need to remove WP otherwise your website will be installed on your domain name is calm forward slash WP. No, you want it to be in the root directory. So people go to 30 WP that COMM And then they go to my website. Here, you can give your website a name and a site description. And you really need to do this now otherwise, now you can do this only once. Now just kidding, you can do this in the website. I will leave it for now. And we will do it later in the website. Here we can choose a username 30 corporate instance and a beautiful password. Oh hide. You can let it be created or create your own. Let's see if I can go stronger than 65. In real life. I'm not that strong, shy rather be strong on the internet with my password. So I can say to people that are strong. Man, I'm so strong. And then your admin email and ease of access to this email address. And then you can select your site language, you can instal two plugins, the classic editor and the limit login attempts and I don't need those neath needs those. I click over here, and I close it because it looks too complicated. This is all fine. You can trust them is all fine. And we don't need to instal a thing we will do it from within WordPress. And if you want to you can send the email installation details to an email address. But I leave it as this I click on instal. And there it is. Congratulations The software was installed successfully. So if I would go to this link, you see that our website is alive already and it is secure. That is amazing. It looks really bad. And that is what we're going to change of course in this tutorial, but it means you are live at this moment. 10 minutes ago we bought web hosting and the domain name and now we are live. It's amazing. So this is the front end of the website everybody that will see your domain or go there. Hit enter. They will see your website. But we want to change the website, we want to configure things. And in order to do that, we need to go to the backend of the website, the website has a front end, that's what you will see what the visitors will see. And there's a back end. And if you click over here, and they will see the back end. And right now you see it's not secure. And it can be that you also see it over here. That's okay, sometimes this secure, sometimes not, but in the end, everything will be secure. So in order to do that, you need to go to the back end. And before we do that, I want to talk about the back end and did more. This is a place for users for you to configure your website to create new pages, upload images, PDFs, if you want to instal plugins, if you want to sell products on the internet, or have a Facebook Live box, or whatever, all that can be done through the back end. And then there's the front end, that is what people see. So really important, the front end and the back end. And if I click over here, I go to the front end. And now, here, you don't see that, but now you see a bar over here. That means that you're logged in. And when you're logged in, you can scroll down and you'll see still see this bar, and you can add a new post and a new page at some media add a new user, you can update things you can customise theme, we'll talk about that. And you can go back to the back end. So this, we don't need any more. So right now we have the back end. And if we click over here, we go to the front end. So let's talk about the back end, I click over here. And these are dashboards an overview with a lot of information. And then here at the left, we can have updates. And if I click over here, I scroll down, I see there are two themes sending an update. So I can select them, update those. So every time there is an update for plugin or a theme or whatever, you can update it over here. And you'll see in the top bar, then there's post, we can add new blog posts. We can add PDFs, videos, media, or whatever, worth documents. And we can check them or we can add nuance Well, within our pages like the homepage, the about page, we can create those. If you have blog posts and people comment on it, you can see that over here, you can approve them or put them into spam. Then there's the appearance, you can change the look and feel of your website using themes, we're going to talk about that, then there are plugins extra functionalities for your websites, you can make your website a webshop. Let's take a look. If I click on Add New, you can add the classic editor which is the old editor of WordPress, you can have anti spam, make your website more secure, you can have a forum. You can have a social media website, all those things can be added to your websites, then there are users, you can add more users that can change the whole website. Or you can add a user that only can add blog posts. So you can hire someone that will write blog posts for your website, then you can export your website, import your website, and then there are the settings we'll take a look at that in a second. As soon as right now, let's go to general in order to make our website secure at an S Oh, here it is everything is due over here and over here. Then you save it and then you need to log in again. But now is secure. If I go to the front end, it is also secure. So that's great. What I want to do now I want to start with a clean WordPress installation. So if I take a look over here, it's kind of overwhelming. So what I want to do, I want to remove everything. We don't need that I want to start from scratch. So over here, I see I have one blog post. So if I click over here, I can bring it to the trash. Then I go to the trash over here. And I can empty the trash. The same thing we can do at pages I click over here and I see all the pages. I click over here so I select them all bulk actions. Move to the trash apply. Then I go to the trash and I emptied the trash. Okay, then we go to plugins, to Plugins. They're both deactivated. So if they're activated, you can select them both, say both actions, deactivate and first you need to deactivate and first before we can remove them, but they're both the activated so I click on Delete. I don't need those two. Yes. Awesome. Then I want to go to the settings. General, we can scroll down, we can change the slight side language over here. The timezone meets plus one, we can change the date format, the time format. So if you want to have capital am you can do that. So I use this one. The week starts for me on Monday so I save the changes. That's awesome. Then I go through the permalinks we're still cleaning up our website and making it look better. And we change this day and name To post name why right now, if I have a blog post, we went to Australia, it'll say your domain for slash, the year, the month, the day, and then we went to Australia, now rather have the post name. So it will say, my domain name forward slash, we went to Australia. So that's better. Google also likes it. And this is the worst, that when you go to blog post, it will say this code, this is not good for the search results. One of the most important things to be found on the internet is your domain name, and your URL. So post name, so if I search for how to make a forum, I straw to Hostgator, it says Create Forum website. So there's three keywords in the URL. So you see, it's important to have a good pose name over here. Save the changes. So whatever the title is, in your blog posts, or in your page that will be shown over here, instead of this stupid code or the date, which is not necessary. Okay, let's go through the dashboard, I want to clean it up a little bit, I can collapse everything. Or even better, I can click over here on the screen options, or remove everything. This looks so much better in my opinion. And then I see over here, this area 30 Corp, I want to add my user, I can do that over here or I go to users profile. And then I can change the look a few of my back end. So if you see something you like, you can use that. I like to default one, and I scroll down, I want to enter my first name, I want to enter my last name, I can have a nickname, I can change it. And here's the display name publicity right now it says Ferdy court. So if I have a blog post, it will say this is written by Ferdy Corp. Oh, I rather have Ferdy Korpershoek, my full name. And now it says howdy Ferdy Korpershoek. That is better. And I want to see an image over here. So you need to have a gravatar account. So right now I have Ferdy [e-mail]. And then have a profile picture over here. So right mouse click, open a new tab. Over here, I can sign in for free, like an upload an image and that image will be linked with email address you use over here when you sign in. And if you use the same email address, put in your WordPress website, then that image will appear. So I think over here, it's linked to info at 30. Corporate, as you see. So if I grab this copy, and I paste it here in my contact info email, that means that my Gravatar account will be linked to this WordPress website. So if I update it, and it's the confirm it, now you see this image, which is linked to this email account. So you can sign up really easily for Gravatar. And then your profile picture will be seen over here. Then there's a text you can have about yourself. So if you write blog posts, and there's an area with about the author, this text will appear. I make websites for a living. And I love to help people to achieve more in life, something like that. You can set a new password, and you can update your profile. So if I go over here to the backend, it looks clean, no unnecessary stuff. If I take a look at the front end, it still looks ugly, we're going to make it better. And the way we can do that is with themes. What is a theme, a theme decides how your website will look as well define the look and feel of your website, and everything has their own settings. So if I would go to the back end, I go to Appearance Themes. I can choose a different theme for instance 2019. Now it's activated. So if I go to the website, it is with the same information, the title and the subtitle, recent blog posts, those widgets, but the look or feel is different and that's what a thing Deus and besides that it has extra functionalities. Now there is a great thing, which has amazing capabilities. Now to get it we can go to 30 corp.com Ford slash Astra it's the Astra theme. It's a free theme. And the great thing with this theme, it comes with a lot of extra functionalities. There is a pro version, but in this video, I want to focus on the free version. So you can click on downloads, and then go to the pricing page. Then you need to scroll down all the way, all the way all the way all the way and then can decide which plan is right for you download the free Astra theme. Then you can leave your details if you don't want to do that. You can close this and you can go to the dashboard go to Appearance Themes, click on add new answer For s3, it's also here within WordPress. There it is the purple one Astra instal now and activate it. It has a lot of installation already, I think a few million, I'm not sure, but it's the most popular thing. And then we're going to make use of starter templates. Why? Probably you already have a website in this store, I want to focus on creating an appointment booking system. And it can be that you already have a website. And if you want to learn how to create a website from scratch, then I suggest you go to YouTube. By the way, I will talk about changing things in the website. But if you want to get an in depth tutorial on how to make a website from scratch, without a booking system, and in this tutorial, we'll focus on the booking system, then you can search for a word, press 3221, for instance, unless it's 2022 with Elementor Pro, but I'm talking about this video here, I will show you step by step. Don't click here. Now they're also good guy. He has a lot of subscribers. I hope one day I will have more subscribers than him. I started earlier and there was a time I had 1000 subscribers and he has 4000. But he he has amazing tutorials, but just saying that Tyler also great guy. Actually, all those people are great guys, except for this one. I'm just kidding. So that's what you can do. What we will do, we will instal a premade website. So select the page builder, I use Elementor. And now we can instal and complete website. And that's the great thing about Astra. That's what I mean with the extra functionalities everything has their own. And this is what I love, love about Astra. It's a big team with people that have great support, and they want to help you to make websites fast. So we select the free one. And then we can select something. And for instance, let me give you a few examples of what you can do with a booking appointment website. You can become a life coach or a team of life coaches, and they can use the booking plugin to have life coach sessions. So people can. So you can have different services like business talk, and motivation and personal growth, I don't know you can give, you can add different services that people can book with you. And when they book it, they can choose whom they want to talk to. So you can have a team of five life coaches. And then I can select which life goes coach the life coach, they want to talk with piano lessons, you can they can book piano lessons. And then you can say you know, it's not only piano lessons, what serves you want to have piano lessons or guitar lessons or drumming lessons. And with every service they choose, they can choose their own tutor. And they can have a website with showing all the tutors with making videos about what every tutor can do. And then people can choose. So that's what you can do with the booking plugin we are going to use what else if you have a yoga website. This one for instance, you can have different yoga lessons. I don't know if there are different yoga lessons, probably I see six already over here. And every lesson can have their own instructor or people can choose. So to give you an example, as you have seen in the intro, this is how it looks, you can choose a service that you can choose people attach to that service. And we're going to set it up all from scratch in this tutorial. And what I want to do, I want to have a barber shop. So I scroll down a bit further. And there it is a barber shop. So I can click over here so I can see what it is. It has a homepage and about page barbers, the gallery and the contact page. Well, I like it. So I want to import the complete website and it says your select website is being imported. You can delete previously imported sites but this is the first one so I click on Import and import everything. So I now need to wait so I can take a sip of water and I was being imported. Realise guys at Astra I met the founder of Astra the Creator really nice guy and they are doing their best to give you the best so you can make websites fast. And of course they have a free version because you hope you like it. And then you can upgrade to the pro version if you want that if you if the Durrells about all the Pro versions of pro version features. So Astra pro 30 Or you can go to Ferdy Corp comm or a historical focus on the free version but if you want to you can go to Astra and then I have a completed or I will make a new one this week because they upgraded things again and then about all those different beautiful things of Astra so I saw something like people seem to absolutely love it. So me well, it's important now to view the site. And again, I import this site because I want to focus on creating a booking system within this website. And I guess you already have your website. So I close this, I close this, and this is our website. So in the beginning of the tutorial, I send people to this point of the video in the video if they already have a website. And if they already have a web hosting cannot have a website with a web hosting. So I mean, the other way around, if you already have web hosting a website, this is the point where you begin. So you have your website, it can be about barbers, it can be average yoga, lessons about life coaching, about any service, it can be about bachelor parties. And this is the final result what we are going to create, but it's not limited. To be barbershop you can offer any service and attach any person to that service. You can even let them pay immediately using Stripe. So when they booked service, and that person, they have to pay immediately and it will go to your bank account. That's what you can do. And that's what I will show you how you can do that. So are you guys ready, what we're going to use in order to do this is a Croco block subscription. In order to get you can go to fairly corp.com For slash C V stands for Croco block. And there we go. If I go to products, I can search for a jet appointment, that's the plugin we're going to use. Look at this. So here you see you can have three service haircuts, manicure or makeup, what kind of service if you want to, and then the stylist choose someone who would want to do your styling and stuff. And when do we want to do it. And on with which time slot do we want to do with naked leave your details and you can pay immediately or you can pay in the store when you get service. Or if you do that you can choose a payment option. And you can add it to your calendar. That's what we're going to talk about in this tutorial. Oh, you can do this for a buy this for $19. But it's not entirely true because you need to buy this ad set. So let's go to the set. You also need jet engine and a few other plugins. So let's talk about pricing. And before we do that, I want to go to my whatsapp. I had a friend who called me a few weeks ago saying hey, I want to create something like this unemployment thing for bachelor party service. How can I do that? And I said, you know, I'll make a tutorial about it soon. And then yesterday I sent them a message, or is he? And I sent him a video like, Hey, this is what I'm going to make. Is this something for you? So let me go to the Dutch to English translation. You think why am I telling you this? I'll show you. Hi Ferdy. First of all, it's great that you think about me for now. And we're certainly still working on that I had found someone who wanted to do all this stuff making employment the website or a plugin for 1200 euros. So chose that. To talk to him about it. Super. Thanks. So if I search for 1200 euros $2 is around 14 $50. Wow. So the great thing is when you know how to create something like this, and I will show you step by step in the store, how you can do it, you can make money with it. So what are the pricing plans for if you want to go for a dynamic website and you want to use it for only one website. So if one client, you can buy this option for $85, you can follow along in this tutorial, you get jet engine which you need jet appointment, which you need me see if there's also pop ups. Yes, that's also included. So that's what you can do. So for $85 You can start, but what I suggest you do, I just told you, you can make 14 on this $50 with making this for a client and I will show you step by step how you can do this. So after watching this tutorial, you can do that I have a lifetime in all inclusive subscription. What does it mean, I can use it for unlimited websites. And I only paid $750 at once and I did not pay this amount that I paid $300 Because they're upgrading this package the suite of plugins every time and they make making it more expensive because it's getting more valuable, but I still have it by only be $300. So if you want to take a serious I suggest you go for this one. You can also go for this one or if you want to start with one website at $5. But there's Jen said the lifetime version or this will become more expensive. So if you would go with the all inclusive lifetime version, you can click over here you can pay over here, next step and then pay with PayPal or with credit card or whatever. Or again, you can use the $85 version. It's all up to you. And we have done that. You can go to your accounts. And they see over here I paid 299, a little bit longer than a year ago. So it's not 100% more expensive, but it's still worth it. It's such an amazing tool. Not only that, what I will do to give something back to you, I will create tutorials about all these plugins. So if you take a look at tutorials at 30 Core Plus Comm, so go to 30 Corp comm sorry, I went live with fast, hit enter. And go over here to tutorials Croco block. Here I show you what you can do with Croco block. But there are jet elements, more elements for Elementor jet tricks. I will teach you about all these amazing things. So you can make hotel booking websites, you can car make car rental websites, you can make it look so professional, you can use it all in combination with the free version of Elementor. And that's also what I will do, I will not use Elementor Pro or any other plugin only this one. I want to search for jet engine jet engine over here I click on downloads. Then I screw up you need to close your eyes, I want to use my licence key. Copy it. I close the page to plugins add new upload a plugin and I direct jet engine over here. I click on instal now I want to activate plugin and it will also activate Croco block over here. So right now I see Croco block, then I want to go to licence and I close this and then I want to base my licence. So I click on add new base it activate the licence. Awesome. Awesome. So now I see an overview of all the jet plugins that come with Croco block and I want to instal a few more so I have jet engine which I need for the appointment plugin. And what I also want to see appointment jet appointment plugin I want to have to jet theme core plugin. And I want to have jet pop up. So over here instal. I think that's it. Again, I will have tutorials about all these plugins, then I need to activate the plugins. And when they're activated, you see them in their colour. Right now they are grey activating, and the latest one, activate. So I've been playing around with this for a long time to learn step by step how it works. And I'm really excited that I can show you step by step how to work. So it will save you a lot of time. I dig really deep. And now I can show you how it is done. So you can save a lot of time. And by the way, if you bought it, congratulations, it's a really good choice. If I could buy only one premium thing for my WordPress websites, it would be Croco block. But I'm happy that I don't have to keep it at one thing. I also have Astra Pro, the theme elemental Pro are amazing tools to make amazing websites. So right now, if I take a look over here, I have my barber shop. And now I want to implement a booking system. Well, I see some information over here, there are a few barbers here. And I want to use their names and their images. And I want to use their services. So there's a moustache expert, beard trimmer, a hair specialist. And what I can do, I can use this pricing if I want to in the booking system. And now we're going to create our booking system. So what we will do, we will create two things using jet engine. Right now you see posts over here, and you see pages. And what we're going to do, we're going to create two custom post types. What are that, it can be anything, it can be houses, it can be listings, it can be people, it can be services. So in this case, I want to build a team show a team over here, here. So how can I do that I go to jet engine, I go to post types. And I can add a new one and I will show you step by step how you can do this and if you have a question, please leave it in the comments and I will do my best to help you and if you have Croco block, there's also help for you. So you can go to the Help centre submit a ticket tickets. You can even feature a request so if you like hey, this is really nice, but I'm missing something But then you can send a feature to them. So that's amazing. They're really nice to help you to to make beautiful websites. And I want to create my first post type Add New. And this one is called team, or no no, no, no no barbers. Yeah, even better than I say tip, I don't say but I do it on my keyboard and then it will create a slug over here. Then I want to go to the Advanced Settings, scroll all the way down until I see this over here the menu icon, because this is what will appear over here at the left from barbers, because barbers will appear over here. So let's click here. And I can search for barbers or a knife. So let me see what fits, I can find that I can. So it's just for myself and not for people, visitors on my website, just just for myself for reference. So if I see something, I think that fits, I can use it. Well, since we're talking about barbers, we're talking about more people. So maybe this one and then over here at supports a Title Editor. And I want to have a third one, which is a thumbnail. So every barber can have a thumbnail. Okay, I want to add the post type and what will happen here at the left, I will see barbers. So here I see no view or I can add a new barber, well, I want to create a new post type. So I scroll down again to jet engine post types. Now to add a new one, and the second one is services. So services step, do the same thing. Go to Advanced Settings, scroll down till I see this menu I can and the services also for my own reference, maybe something like this. So there's it's a map awaited and then over here also just case a featured image at the post type. So over here at the left, I have services and I barbarous and I want to add a few services. If I want to take a look at the service that I offer. I click over here I hold Command or Control on a PC. I scroll down and says haircuts, shaves beard trim and moustache trim. So why not do those and over here at the the barbers there are a few barbers over here. So I can use those also as barbers. So before I do that, I want to change the title of my website because over here it's professional barber shop since 1985. So I want to go to the settings in general. And I see over here at the site title professional barber shop since 1985. Or I can say barber shop and then New York or whatever you are because a barber is a local business. I don't think people fly over the world to go to a barber shop so I would definitely say barber shop in New York. So if people search for a barber shop in New York, you can come up in the search results New York, your barbershop and it's without a space so I guess I should do the same maybe because New York is really big you can say and Hatton or somewhere else make the area a bit smaller so you can find the right customer Okay, in order to add a few servers and borrowers I can do it the false way by going over here to the website go to the customizer then I want to go to Menus this small trick which enables me to create this old faster I click on Add Items I scroll to barbers or to serves as first over here I see hair cuts at the only thing is will also be added to the menu. So we will need to remove it What else do we offer haircuts on haircuts, shaving. I like to keep it a singular form so no plural. Beard trim also sound singular trim and a Mr. Amash tray Okay awesome then I go to the barbarous well let's take a few cool names The first one is Gregory the second one last oh no class that's a Dutch name Edwards Oh his name is there Edward. So let's see Edward third one Roy. So I was almost close Thomas Gregory ah third one is Roy they also have their own specialty so um beard moustache and hair okay I think that's it. So I need to get rid of this although services you see it's service and then barbers only three well, you can have as many as you want as long as you have those people that can cut hair for people. So I go back and now when we take a look at the back end because the services looks like that we go to the barbers I go to Gregory see the name but I need to select over here. Like I say Edward, and then see it but blind typing. And then over here I copy it and I change the slug back to Edward with small capitals or by the way it will do it automatically update so we have Edward Thomas. M. How can I forget her name? I'm so sorry. Roy. My best friend's name is Roy. Still robots? Not my best friend anymore. So, Roy, okay, let's not talk about anymore. A lot of memories come up. Oh, good times playing soccer stuff. Okay. Yes. Okay, we have the service and we have the BBs. What do we want to do? Now we want to connect those with chat engine. So we have services, and we have barbers and what we want to do we want to create a button on our website. Let's close this and close this that says book an appointment. And then okay, what do you want and then there are the four services. Now after we choose a service, we see the barbers we want to choose. So in order to set it up, when you scroll down over here, it needs to go to appointments, and over here to set up. So there are two things. First, we have the service. And the service, of course is that services. I want to add the provider so who provides the service in this case, it's the barber, but again be the yoga instructor it can be the life coach, it can be the bachelor party leader, I don't know it can be anything the sky is not even the limit. It's even beyond that. The provider post type barbers next, okay. By default, there will be an ID a status, a service provider, user date, slot slot and an order ID and a user ID. If you want to you can add more information and store that into your website and into your email. I want to add two more. First one is the phone. The second one are there any comments or instructions? Comments? And then I click on next. Okay, the working hours well, we can see that on the website if I'm correct. When are they opens Okay, Monday to Friday from nine to 5pm from 9am to 5pm. Okay, so we're going to do that on Monday they're open from nine to five working nine to five I always think after 3040 minutes here so foreign to sit oral so I feel a little bit more freedom to do whatever I want if I will do this in the first minute of the video we will probably go to my competitor that's my worst nightmare. But now since you're here I guess you will stay so I can see that problem please do not remove your like for my video and if you have not liked this please like it. So nine to five. There's Thursday and you can also say we work from nine to 12 Save it and then we add one more from 12 till 1230 We have a lunch so from 1230 on 205 So you have a break in between 12 and 1230. That's what you can do. It's you can do it. Friday. I think it's the same. from nine till five. Save it, and then I'll set a date of our different times 11 to three, Saturday from 11am Till sorry. Save it. Okay. And Sunday, they're close. So Sunday, we had nothing, well, then there are a few days they are not working. So which they Christmas? Which is I think December 24 and the 25th? Save it's, and another day when my wife is as her birthday. My wife I don't know, birth. National. MMA, it's name of my wife. It's the third of March. Okay, working days, well, those are the working days. And then really important, the default time slot length. So how long do people take for the haircuts? Well, 30 minutes should be doable. Especially Gregory was not there. I mean, Thomas Thomas is really good. So really important. Again, a lot of important things. Do we want to integrate this with WooCommerce? Well, with a barber shop, you may almost always pay after you get the haircuts locally in the store. So you don't have to integrate with what you can do, you can let people pay up front, and they need to check this we'll talk about later. And over here, we create a single service booking form, and a simple page booking form, what's the difference? Over here we have four services. And we can have four pages about every service sub page or a page about it. And then on that page, we can have a single service booking form, that means that on the haircut page, we can post a haircut booking form, so you cannot choose a different service and haircutting only haircutting. With this form, you can select one of the four services. So even if you're on the haircut page, you can still have the option to go for a moustache. So I want to go for the sample page booking form. So I turn this one off, and then I click on finish. So a form will now be created. We do not use WooCommerce yet, but it's released through it. I will show you in this tutorial how you can do that. Now we can go to the plugin settings. In a new tab, I don't know why. And it's actually the same place as appointments and settings. So over here, we can go to all posts, the services, our services providers are barbarous, there's no WooCommerce integration, we do not manage to keep the certificate in this capacity capacity there is slot time format. How do you want to display it with pm and am? Well, since they do it over here with ampm, let's do the same working hours here, we can change it a little bit, make it longer make it shorter, that can be 15 minutes of break, but I don't need that. Or after the time, maybe you have a service or people need to clean up things. So when after people book for 30 minutes, you need 15 minutes in order to clean things up. So if your first appointment can be at 10 o'clock, and the second appointment will be at 1045. And if you say zero, it will be at 1030. So that's why the buffer before and after is there. You're gonna adjust everything. We can work with custom labels. If you have a different language in your website, you can make it a different language over here, January, February, March, April, April, all that stuff. Well, I don't need that. Then there's advanced availability check. Yeah, if if 10,000 People are on your website at the same time and they want to book at the same time. It will keep track of who was there first and who can choose the time slots first. You can hide the setup wizard if you're making this website for a client. There's setup over here and if you go there you can reset it and you don't want the client to mess up. So you can go to the settings and to advanced or to tools, no advanced and turn this off. And the great thing with Croco block settings they almost save automatically. So now it's if I refresh the page at the appointment here it is gone. Okay, awesome. And then we can have tools. Well, those were the extra things I added over here. So so far so good. What we can do now we can go to our first let me go to the barbers I go to Edward. Let me check Edward over here. At what is this guy, so I want to add an image over here. So Featured Image. Let me search for Edward over here. I can update it. I can go back I click on the WordPress I can. And I go to Boulder to Edwards. Whoa. As change this one into Thomas, copy, tap paste. I click on Thomas and I search for Thomas. Over here. This is Thomas. Really good guy. And then the third one is Roy with an amazing looking eye it looks like he has really big pupil pupils at work. Yeah, awesome. Very nice guy. So Roy set the featured image. Slack ROI awesome update. Okay, what we can do we can also do the same with services. haircuts, I saw a few nice icons. If we can add those. The head so the haircut is this one. Yeah, let's do that man. Awesome. Okay, still having fun, I hope so. Let's go to shaving this one update. If you want to fast forward, closes, you can open things all in command and they will open a new tab. They can let me see the beard trim. It's a third, third, third one. And then there's the fourth one. The moustache, moustache, moustache, trim, update, update. So now everything and every service as an image attached to it. And now we can go to the forms jet engine forms. And we have only have a static page booking form or what does it mean? This is the one of the two forms we can choose. And this form will show you all the options there are when you open this form, so you can choose one of the four services haircuts. So what I want to do now, I want to start simple. So I go to the website holding command or control on the PC, I edit the page with Elementor. Before we do that, sorry, let me go back to Croco block. Jet plugins, no updates and installations. I want to add one more jet elements. Click on instal. instal Yeah, it's for later, I want to activate the plugin. So again, I go to the website, I click on edit with Elementor. What I can do, I can drag the form we have somewhere in our website, anywhere as long as it is within Elementor. So if you take a look at the results, click on the eye. Over here we can have it so let's just see how it looks. I can search for forum. Over here it is I drag it with the green button and drag it over here. You see nothing yet because we need to select a form. And I call this page or a search for page because it's called static page booking form. And there it is the service the provider, the date, and email and we can book now. Okay, if I click on update, that means over here it will refresh automatically. This is our form. And let me state that this is the beginning of our form. We're going to start with we're going to make a beautiful, we're going to trigger it with a button so we get a pop up slide in from the right. We'll add faces over here. We'll or over here, we will make it look so much better. But we need to start somewhere. And step by step, I want to show you how it works. So this is what we already have done. So let's start over here. I click over here on the column settings. And before I continue, I want to change a few things. Over here, I click on the three lines, I go to the user preferences, JC user interface thing too dark, and I want to edit or add anything handles, so we have a little bit more options. I click on update, I click over here, I go to the Stell. Go to the background, and I want to make it black and transparent. Then I want to go to advanced, I go to pairing and I hit the arrows up. So that's a little bit more space over here. Update. When we update it, we see the result immediately over here. So let's do this. I want to select the beard trim. And there's no one I can select. Why is that? Well, we need to link the providers, the barbers to the service, oh, step by step around to do everything. So if I go to the services, I can do two ways I can go to the services. Let's update this. I can go through the services, and I can attach hair cutters. So if there's an haircuts service, who can do this? Well, over here I can select the barbers as worth can do this. And Roy can do this. But maybe Thomas cannot do this. So I leave Thomas over here. My soul is crying. So I will stop the recording and continue in a few seconds. Okay, my son is sleeping now. So we can continue. So what I said two of the three people can do haircuts, and Thomas is into the moustache thing. So I go back to the shaving. Of course Thomas Thomas can do that. Actually, everybody can do it. So Thomas and Roy afterwards. Okay, the third one. Like how we can speed this up by opening them both in new tab this one is only Roy Roy is the expert in doing a was it the birth so only Roy can do that. And the other one can be done only by Edward and tell us so that's how it is on that one. If you go to the barbers you click on one AdWords, you see what he can do. So you see the other way around, he can do three of the forcers haircut shaving in the moustache. So no, no beard trimming. So in that way, you can give everybody their own specialty. And now when we go to the website, refresh, I can select a bit of trim. Then based on the service, I can select only ROI. But if I select shaving I guess like all three of them. If I select haircuts, only AdWords and ROI so in that way, you can assign people to a service. And I can choose a date Yeah, today only from this time on. So just for today. It's this starts in two minutes, I can use my email and I can book now, if I do that. I see over here that the form is successfully submitted. Of course, we can make this look better. Of course, right now if I go to the backend, as any further owner of the website, if I go to appointments I see I have an appointment that is pending. But to use email that I can click on edit. I can change pending to complete it and we get an email like it's it's confirmed that you can be there in one minutes because that's in one minute. It's January the 20th one minute before 1pm So since I've already taken 1pm If I will do the same thing now with Edward, this time slot will be removed. So in that way you can fill up your whole day with haircuts because the more slots are taken the less show. So I really like this way of, of making an appointment website. So you can do the same with counselling or how do you say it. And life coach sessions, maybe you want to speak to people over Skype. And people can book you and say, you know, I have everyday three slots. And if two slots are taken, only one is available. And then that way, you can fill up your agenda with a service you provide. Nice. So we don't quite a bit already. But now I want to focus more on what else we can show over here. So I go back to the back end. And I go to jet engine forms. And there it is, click on it. And what we added before is two extra functions or two extra information items. The first one is the phone number. And the second one is a comments, maybe someone has an instruction. So I want to add a field over here by clicking here. I can drag it up. So the submit button is below. And then here I can change it. So text is text. And it's okay. And I can say phone number over here the label says found it is required. And I don't need a placeholder. And I apply the changes. Awesome. Then the second one. Also text area fields on the score comments, your essay comments. Here, I do want to have a placeholder I say it's not required. If you have a comment, you can place it here. Apply the changes. Again, drag this one down. Update. Now if I refresh this page, what you'll see here below us your email, phone, and comments. If you have a comment, you can place it here. So we can do a few things, we can style this to make it look better, we can change the text. And we can also put it into a pop up. So when you click over here, then at the left or at the right, whatever you want, will appear this area and we can break it down. And one thing else we can do we can create listings for for how do you say you can create listings for every selection. So over here, right now we can select those four options, we can create something in Elementor, which makes it more visual. So if I go to local SRAM booking, this is where I practice, we can make it look like this, I click over here. This is the wrong one. As you see, sometimes things go wrong. That's the whole part of doing this. A lot of things go wrong. But finally I managed to make it work. So right now, it looks like this book an appointment. So bed looks different than this. So I select this one that I can select the person that I can select the day, this all styled in the colours of our website. Click on next user phone and the amount you have to pay. So that's what we can make. And that's what we're going to build something like this. So we're not there. We're we're halfway there. We're doing great. So thank you for that. So step by step we're going towards that but this is already great. So first things first, there's so much I want to tell talk about let's go back to the form over here and then I want to go to the service. I open them all and you'll tap holding Command or Control on a PC and then on the Mac I say control tap I go to the next area I scroll down and you see a price per slot. So let me go to the website as in the prizes or we can create our own prizes. Ours Okay, okay, let's let's create our own prices. Here. $35 update. Let's go to the next one. Barrel treatments $50. So shaving, shaving can be cheaper 15. Then we have the beard trim. 40 Yeah, no 30 And then the latest one is the moustache moustache. That's different cookie. Also 35 Of course, it actually doesn't matter exactly. So now if I refresh this, nothing changes, beer trim, select ROI, we can select Thursday, pick a time slot and I want to show the price over here. How can I do that? Well I go back to the back end, then I go to jet engine forms the only form we have okay. And then I want to add a field and drag it over here. Click over here and I want to have a calculator calculate it then the name is underscore total. And now we need to calculate the formula and you see some things over here. Need to grab this one copy it, paste it and then say Asterix What if you're not sure it's a great the right one you can go to 30 corp.com tutorials Croco block scroll down over here. Grab the scope since we're here leave this open because we're going to download a pop up soon. Okay here below this moves to calculate the value prefix so I can say a total of dollars and then and then the price will appear. I click on Apply Changes. Update Okay, let's see how it looks. A total is not available yet. Maybe after we choose the bear train, select Roy price is nothing Okay, so we need to select the day and then the time and then as well period total $30. And I click on Book Now, of course we need to fill the information. Okay, we have done it already. What we also can do, okay, we will load late. Okay, so this works. So what I want to do now I want to break this down into three parts. First, I want to select the service, then the provider then did an hour to break it into four parts. How can I do that I go to the back and close all this stuff. Except for this one. And I go to forms. I want to add a few breaks into the form. How can we do that? Over here at the left it says add a page break. So after the first option select the service we have a page break, then select the barber I'll have another page break. Then after selecting the date. I want to have another page breaks on the last page you see the phone number details and the total amount so if I click on update I say command or control click it's just this select it next select provider Next select the date and the time next and then it looks better Don't you think it's less overwhelming four steps before email the rest your phone and a comment if you want to the total price and then book now okay, we can change a few things. So at the appointment provider I don't like to say provider I would like to say select a barber and the A without a capital apply to changes you need to apply the changes first and update it and if you change a few things and you click on update those changes will not be applied because you need to click on apply first. So now if I refresh it, we select the service and then we select the borrower select the bar Yes. So, okay, that's one thing to do it. Now I want to create a pop up. So we go over here to 30 corporate come into tutorials Croco block and then over here at Jet appointment, I click on downloads pop up then I unzip it and there it is pop up still reference, but Jason. Okay, before we import it I'll show how you can create it yourself. So we go to jet pop up, create a new pop up we'll call this one booking form up publish and then we can edit it with Elementor and you get a default one first. I want to show you as much as possible so I can import this pop up. But I also want to show you how you can create this yourself. Okay, so let's go to the settings here left below. And here are settings animation. I wanted to fade or to slide in from the right, like that. Open event. No nothing. Okay, this is all fine. We can go through the Stell will pop container. I can change the width to let's say 560. Okay, customise and that will be in percentage 100% I want to align it horizontally at the right a vertically at the centre, the current position is at the top. I can have a background if I want to. But actually I'm unhappy. I can have a border radius. You see, like this or padding or margin? Oh, we'll take a look at margin later. I don't think I need it. I don't need any border radius. Close button right now you probably don't see it. But it's there. And in there as Estelle also in the here you can change the size. So now you see the X over there. Okay and then below. Sorry. I can transformation. Yes, bring it to the left. Bring it some more to the left. How about minus 400 or 500 or 600. Okay, now we see if we can make it smaller again. Okay, what I prefer to do is to work with the colours of the website. So I click at colour font colour over here, and I use a primary colour. Sorry, this node is not good. Click here over here I can styles the font colour should be white, but the background colour should be the primary one. Okay, that's the case, I bring it to the back let's say minus 590 or 7060 65. Like that. And then over here, bring it a bit lower. That is okay. Just zero. Okay, so this is the area that will pop up. When we trigger it with a button in our website. I click on update. And now we need to create the content. So I want to start over here with a section with one column. I go back I go for a heading. And I say book an appointment. You don't see it. What we can do, we can click over here. Go to the cell. Go to the background type choose a primary colour. Then I click over here again. I go to distell go to typography. I like to use real way you can choose your own font or the default font. Make the Size make the size a bit smaller. Okay bring it to the centre. See content centre And then over here at fonts I want to uncheck this uncheck this okay book an appointment sounds great I can change the height of the section minimum height to add so you can create everything pixel perfect again I can go to the settings over here go to cell container make this zero so it will be totally like this better updates so now over here I click on a new section and now I want to add a forum so I click over here I search for form and there we are again this area by drag it over here and I need to select the only forum we have so I click on page and there it is so we can select it click on next and then etc so now we can style this look at this there are so many settings ROAs fields all those things and if you open it all those options so we can walk through the mall the what we can also do go back to the dashboard go to pop ups I want to click on Import pop up, choose a foul I go to my downloads pop up reference open it import now then we immediately open it and then I can click over here in here all the styling is done already and I made use a lot so what I can do I can say right mouse click copy then I close this I go to all popups and I go to our book form plugin or pop up edit with Elementor I know it's a little bit maybe dry lecture stuff maybe a little bit boring but we need to know how it works and then over here right mouse click paste Estelle so you see it will look different only thing we need to do now adjust the colours to the colours of our website so in order to do that is to start off our website I see the colour red over here so I can pick this colour copy it I use the colour pick eyedropper a Chrome extension I've thought about it and then over here I go to the Stell actually everywhere you see that darker colour first sorry click over here go through the site settings global colours and then the first one is colour and then let me see if there's a different colour that they use no not really. We can create one so I can base it again and then I can make it lighter I can slide down a bit or a totally different colour I want to maintain it a little bit in the same cell like that. So I close this and then I click here I go through the cell and everywhere I see a colour green change to the primary one and everywhere there is a hover I can go for the accent colour probably by now that should already be selected because I thought in my AC all the text is changing over here I don't know I thought it was over the link to the global colour maybe it doesn't work like that. So as you see there's a lot you can change group rakes no collars required Mark well to take a look at this later the looks maybe a little bit weird, those colours of the calendar. So later I will change all those colours you can also use secondary colours but it will take Look at that later for now, I will leave it as this and if I would go to the Submit then this colour will change. So right now, primary offer excellent. Here next page if I change this the background colour, it will be red, if I go to the hover, it will be accent this colour and then that is what happens. What we also could do, since it's a dark website, we can go over here to the style settings and make the backgrounds dark but it's up to you I think it is better for the for the staff the website that I don't like this area, okay, what I can do them. Okay, we're gonna we're going to do this Yes, click over here. I can keep the colours I go to the fields. I just tried to reason like, Okay, this is a field, okay, I go to the area fields, colour of the text, okay, the padding, if I go to the left, it's really close, I can increase it over here. I think there will be templated as already done this about 14 But I think that the text can also be bigger. Like that. There's a bottom border. I don't like that. So over here I say zero so it's gone. Okay, but betting a little bit more space over here. It's not a bad ID okay let me see I increases what happens maybe that arrow goes to the left now keep that five I can have a radius, I can have a box shadow. I don't need that. Okay, then I go to the next button because I don't want to have the border so I go to the next page button and there probably is a border and then say zero. Yes. So that's how it works sometimes you just need to figure out how it works play around with it I think the padding is really big but 1515 but then also to do the same with that previous page although let's see so what I can do now I can try it out beard trim, click on Next select the barber Roy click on Next if I select this service it becomes blue. So there's a small error now refresh the page. Or if you prefer you can go back to the other pop up the important one and it would Elementor click over here and then select the form that's everything to page look so it looks like this I selected against a different colour. So that's also what you can do. And you can save a lot of time and they need to change all the colours. So yeah, I will go back and let's take a look at what is next. I go to the website I click on edit with Elementor and I want to add the trigger button so I don't need this anymore or the background colour and get rid of it. But instead first I want to decrease the height over here. 150 50 then this button. I get rid of it. If I go over here to all the buttons and I search for a button or all the elements, I need to have the green one. Okay. And I can have I can if I want to, I can say book and a point meant and I should use the same typography, default one. Okay let's tell label typography should be default, that's okay, I make it uppercase. I want to go to the plane to the colours. Background type is colour colour, when I hover over it I change it to the other one. If I think I don't like that, the second colour I chose, then I can go over here to the side settings global colours, I can change this colour. So I grew up this one I maintain the style but I make it a bit darker. And then this will change everything will change because a lot of colours are linked to this global colours. And that way you can change the look a few of yourself quite easily. The second word is go. So if I click over here, I go to the content hover. I can make this text the same. Or I can say book but I think it's unnecessary just make it the same. Now I go to the sell off the hover I also need to make it let me see label Oliver, also uppercase like that. So what happens when we click over here to take a look at general what happens nothing. But we can go to the advanced settings of the button, go to jet pop up. And then we can select the popup it's called book. So I select this one, click on the widget. And that's it. So now I refresh the page as Ferdy WP let's come in if I click over here, there it appears the beard trim from Roy this date with this time next user email, phone comments and the total price you can pay and we can get rid of this staff course just as I showed you and if you want to edit this from this page hover over here you see the book form pop up and maybe it was better to add the page breaks later because then we could see the styling of everything at once now I need to click and sometimes that does not work like right now. So that's a lesson I've learned if I want to I can get rid of those breaks and add them later so I can go to the form go to jet engine forms rep the form and every page break remove it is really easy to add them later update refresh this page and I was easier to change things over here. So if I go and select this area and I go through the cell I can close this and I can go to the appointment calendar calendar that sounded really Dutch okay the header text colour. How do you want to show the days I can also make them red? Those are the arrows the names over here okay. I think the colours over here can be a little bit lighter. Just see I think they can be white so. So so the available days are highlighted and when you hover over it of course it should become the primary colour And when it's active, it should also become active. So when I select this date should be stay read, but here it goes wrong again. Update I need to do press X escape a few times and then it worked. Click here over again. Yeah, like that. So be careful. Click over here. Go to Estelle. And now select it. I still forgot one break. Let me see page break over here. Okay, update after updating, refresh, our guys still having fun. I hope so, so much information. But I just want to show you how to build this so you have a lot of freedom to do whatever you want to do. And then this is quite far away from each other. But that's okay, what why don't want to take a look at what I want to do. I want to go to the submit button. And there is hidden again, solid, make it zero otherwise, it has some weird hidden border. Okay, then I want to go to the text. Make it sorry, this box shadow I don't want that. I want to go to the text. Typography make it uppercase. Make it bigger, you're going to move that amazing bar okay, there's two big yes, as I said a lot of space over there. It has to do with the range fields maybe or the normal fields you can increase the top the bottom okay, let's do it the height of the area of the field let's say 50. Then there's the margin. That's the area above and below. So you can make bring us closer but what happens is that the area below also becomes closed. So also here again, I'm not a CSS guru. I just need to play around maybe also over here the gap I think there's better zero then here. Also zero. So this gap we're getting there. If I have capitals over here, I should also have them over here. I think it is amazing. It's amazing how you can speak right to my heart. When I was a single I did my best to impress people girls started this was a free addition to this tutorial. Okay, well let's bring back to the page breaks one, two, a 1234 first after the selection then after the provider, the barber then after the date after this enough I think first selection and the borrower and the date. So let's see. Remove the fourth one updates. Let's go to the website. Is our website. Isn't that amazing? You've created such an amazing website. First one, the beard trim. Then the barber then the date and the time Yes. Okay. Again, I see something I I can shoot fix. And that's the time The time Yeah. The time slot. Oh, but I brought this back again. Okay, let's see if we can get there. No Oh man. Okay, we'll do this by hearts we need to go to the is it this one? Or should I go? Yeah over here the slots, okay, perfect. The colour should be white again. And when they're active they become the primary one and the border also becomes the primary one. That's it. So let's check it out book unemployment look at this all white. Then when I select one Yeah, the only thing I should do is make the border also white while you can figure that out for yourself. Next user phone comments book now. Perfect. How does it look on smartphone? Great because people can do that from a smartphone these days. Okay, let's do few things. Let's integrate this with WooCommerce so people can pay up front if you want to. First I want to bring this button up. So you can see on the homepage, the hero edit with Elementor then I drag this up like that. Make this a little bit smaller okay, what I want to do now go back to the desktop. The dashboard. Click over here. Then I want to go to Plugins. Add new as WooCommerce WooCommerce installed now and activated. I skip this area. No thanks. Okay, then I go to jet engine. Sorry to appointments settings. And then the first thing here WooCommerce integrations. Yes, that's it. Of course. You can set it all up now. But let's see what happens. I go through the website. Oh, I like it's nice. Oh, there's some nice streamers. Okay, good prizes. I like it. Okay, I want to book. Oh, wow, that looks great. We're going to make it look better. I also have a haircut by Edward. And let's do Friday at 9am Next, my username is Ferdy [e-mail] My phone is this one. And I like to become bolt. Knock. That's true. I rebuke that total miles okay. $35. Okay, let's book now. But what happens look at this wow, I go to the checkout immediately. So I can leave my details over here and I have to pay with bounce but I can change it over here at WooCommerce settings I can leave all my details over here. And it will be great if there will be a tutorial about this. But guess what there is so what you can do if you want to make this form easier, shorter, let people pay with PayPal credit card whatever maybe a Dutch payment provider or something else. You can go to youtube.com and you can search for 30 WooCommerce actually WooCommerce tutorial should also be fine WooCommerce tutorial there it is. So here I talk about all the stuff Oh wow. Wow. This guy he stole my my MailChimp video one home Exactly. Like with the same highlighted words and stuff. So even by stealing you can go Bro your stuff a lot of people are stealing. Funny Stuff months, okay? Okay, no worries. Um, so you can click over here. And then here I talked about stripe. So if you want to know about that, scroll down and see where I will talk about payment provider, any stripe, and there you go learn how to do that. So if you have, for instance, you have a big cowboy area in your town, you that's your place with horses and cowboys, and you can have a party over there. They can say, Yeah, I've an arrangement, people can sit on the horse, do laser gaming, and have a great dinner, or for the price of $600, then it will be nice if they could pay upfront so and right now we're talking about barber shop things and being in total mouth of $35. But you can really sell things for hundreds of dollars. So this, this plugin is amazing. As I said before, when you buy this for seven or $50, you also can create different kinds of websites, and I will have tutorials about them. You can do so much things with this. And what I like is that there's a lifetime deal, it's gonna help you to have this for the rest of your life for unlimited websites. So if you have bought the cheapest package, you can also upgrade and then still make use of the the great benefits or everything. So, so far, so good. That's what I want to do. Now, I want to work with templates and listings. So we can make it look like this. So right now it looks like this. It will come here we can select. But I want to click over here, make it look like this. And then click on next and I want to see an image of the instructor. So that's what we were are going to do. And in order to do that, we go to the backend remove this, close it, then I go to jet engine I go for listings I add a new one. So what is a listing a listing is a display of one item so a service can be displayed in the listing. So if you have a listing of a service, I see one service I can name the price I can make a checkmark I can create the title of the service with a listing I can show everything below each other so it will get all the services and show them in a listing so I can style it a little bit better. So it is a post. The forum post is services and the name is barber are no sorry, sir sorry. Service like haricots and are created with Elementor the set now we need to create display of the listing. So we need to fetch information from the custom post type and displayed how we want it. So I click on the plus over here, I want to have three columns. And in the first one, I want to have a check mark check click on the plus I can also search for a square a field square or not this is okay with me. Or this one. Insert I want this checked. I searched for check this one. Okay, there you see it, then I go to sell I can change the box size let's say 24 Okay, then I go to the second area there I want to display the service. So I search for a dynamic field since it knows it's fetching information from service, it will probably already do that. So the moustache trim and then I want to have another dynamic fields the beginning when I heard this for the first time I was like what is going on but the more I play around with it, the more clear becomes so I need to get a source maida data. Then I select the price per slot so it will display that information. So before that I'll have a custom field output so if I say dollar sign before it will show $35. Okay, what I want to do, I click on the section area and I want to go to the height, change the minimise. What happens if I say 50? Okay, let's increase it to 70. What I also can do, I can add a new area I can add an image over here, and dynamic image that will probably get the image the post thumbnail like that. Okay, now everything else looks weird. So what I can do over here and change the vertical or the vertical alignment to middle also over here, middle Oh, if I cannot select this, somehow, I can go to the navigator, go to the third column, and then select it that way middle, the fourth one middle this will be squished into the width of the of the pop up so it will not be separated like this. So we will see how it will look. This can be bigger, in my opinion not too big. This can also be bigger. Eating. So let's see what happens if I publish it. I can have look well. Okay, service, I don't see the image. I don't know why. But that's okay. I go back to the dashboards. Now I need to sign this listening to the form. Still understand how it works. I tried to show you tell you as clear as I can to what's going on. So we have this listing. And if I go to the website, I want to book an appointment, I still see this. So I want to implement this listing over here. How can we do that we need to go to the forms of jet engine, select our only form. And then over here, select the service. Select service, I make the capital. And then what I can do, I can change the type from Select to radio. And then feel options, posts and then the post type services. I want to see when I scroll down there's more information. So custom item template. Yes, that's what we have. And then we can select it. Service switch page on change. Yes. So when we select something, we go to the next step. So it will even be smoother. So when I applied over here, again, don't forget to update it in that order first apply and update them refresh. Book an appointment in the works, I think it looks funny. It's maybe not necessary to do this. But hey, why not? So what I can do now I can change listening I'm service I hold command. A few things. This look great. This doesn't look great. So what I will do, I'll change the percentage in the width. So over here, I say 10% Then over here, I say 40% or even 50 Then over here I say 15. So let's see 6070 i It's a true so it's 100 in total 40 Yeah. Okay, over here. I bring this to the centre and I click here bring also to the centre update. refresh this page okay, well, it's okay. But I think it's not necessary but it's it's nice that you think that it was a possibility? I can make this then like this, whatever I want, it doesn't matter if I say 60 That means we have 30 left. But when I align this to the and or over here, click, click over here, go to still bringing to the end or to the centre, that is all fine. So I think that looks better. But I just wanted to show you what is possible. Perfect, I want to go for the beard trim. And then we can select the second one. So now I want to create the same thing over here. How can we do that? Well, we go back to jet engine listing listings. And maybe I can duplicate it or I can open it in a new tab and I can add a new one boasts this time barbers said Listen name barbers at least it with Elementor. Guys, I don't know about you, ladies, unlike this man, the same principles are applied when creating a hotel booking website or an Airbnb website booking.com. So we know this you can also create other websites. And if not, I can make tutorials about it, you can learn it. So I'll just save some time. Copy this area. Basic. Then this time I want to add duplicate this area on to use the image again. dynamic image dynamic image drag it over here. Maybe make it a bit smaller. If that is possible. The only way I can make it smaller probably is by making this area smaller. So I don't need this area. I need the name I need to change something. Okay. This becomes then go on. Work with me. Then. Yeah. This one becomes 50 then this 140 But that's way too big. So maybe also them and then this one at um I can go over here. I can play around with the radius. Make it around there it is. Yeah, it's the border radius. Maybe in percentage and then 20 5am I am at the right place. I don't think so. No, I should go to the image. Border Radius 25 or 50? No. Okay, publish and then I think I need to change the thing. So I need to go back to the dashboard. Does this is another name? So I go to the dashboard of the borrowers and then here I change. It is barbers. Okay. Okay. Well, let's see what happens I go back to the form. By now you should know what the idea is we go to the form we change the provider. Oh, it looks complicated. How to make use of a template as barbers. Okay, apply. Update. Let's check it out. Okay, moustache, and it is working. It only takes a second before they load. So I select that word. Now I need to click on next. I need to fix that. How can I do that? Really simple. I go to the appointment provider. And then over here almost the receipt switch page on change. Yes. Okay. Apply Changes. Update. Okay, so let's see this check if it's there. Yes. Okay. Well, our form is almost finished. There trim ROI. On this date this time next Okay, use your email phone and we can pay immediately immediately and you don't see this because I'm logged in so if you're if the visitor is not logged in you don't see this there are a few more things I want to change is wide area. So I can open the book form will pop first out to grab the background colour of the section. So I go to this section Stell backgrounds copy this code, then I go over here to the settings Stell up container background type colour and I base it so that area will also be white. So when I refresh this click over here it's all the same colour. And then the second thing if I select something and I select a barber I want to go back I see no back button. Now to get there. I go to the dashboard and I go to jet engine forms then I go to all the page breaks I click over here I check this and I say back apply the second one check it and say back apply in the third one check it and see click apply and then I need to update it then I can refresh this page again and now if I think I want to have a beard trim you know what whether shaving I want to go back but this back thing looks ugly. So I close this and I want to open this see in a new tab again. Let's tell this because this looks really really bad so I select the bear train. Okay, the Back button click over here I go to the cell and then I go to the previous page button is that one it's seems so yes okay, we're at the right place I think this okay can be a little bit more padding let's say 15 left and right I don't want it to get too much attention about zero. So what I can do I can make it almost as dark as the other backgrounds and then a little bit lighter. Okay and then the back text can be dark okay, it can be a little bit lighter. But I don't want it to be too distracting. Okay and maybe I want to be at ya know, as the left is okay. You know what, Make it 20 Make it okay. And if you want to you can play around with it so it will align better. So let's go one more time to the backhand maybe there's something to do over there with the forms. We need to do one more thing. I cancel this and closes over here posts submit actions, I need to click over here. And we have the full field we need to connect that and the comments fields and total. So that's a great update analysis. all set up. So we are almost there. What I want to do, I want to make sure that when people book an appointment, I get an email or the owner of the barbershop. So how can we do that? Well, first, I want to go to the jet engine jet appointment settings. Now let's turn off WooCommerce. Again, because people can pay at the local barber instead of paying upfront. Okay, then I go to jet engine forms. I go to our form. Now to scroll down to the, to the post submit actions, what should happen when somebody submits an action? Well, here in our system, we will see the details here at deployments. But I want to add a new notification, I want to get an email. And it seems that Alexa heard that. So it's saying send the email and set up another option. So I click over here, here, I can change the option. I want to send an email, mail to the admin email or an email I choose. So maybe I'm the admin, but someone else owns the barber shop. On this page, I can say custom email. And that email in this case is info at Ferdy Korpershoek COMM When people reply, or when I want to reply on the market, I want to reply to the email that is submitted in the form reply to email from user email and the subject is thank you or your booking or this will enter this will go into the mailbox after receiver there is a new booking or or and then I can even grab a code so let me see. Profile fighter let's see if that works. So there's a new booking for Edward Roy orthos from well super barbershop barber shop you your from email address Well the best thing is to have your own invalid email address otherwise it can go to the spam or you say user email but I say if authority corpse are the type is in HTML what should that email be Hey Ferdy that's me there is a new booking What do I need to know when appointment date when by booth meet who's going to do the cutting the haircut order moustache which service phone lines maybe first name is a no name I should definitely add a name of course make it so much more personal romance woman's total amount and those two and I apply the changes and then I click on update so let's see. I booked an appointment I want to have a haircut that's the only thing I can get I want to do it will be done by Roy Joseph for all time sakes. One of my best friends when I was young and let's do it early in the morning my username pretty corporate [e-mail] found I can right away also send an order confirmation email to that client I should definitely do that. Oh, my Oh number I want to look like Christiana. Look now Okay I should redirect them to a thank you page I notice I only see success but I get an email that's a good thing Ferdy Korpershoek garrison the booking for okay provided doesn't work but I can say from the barbershop a 30 There's no booking when January 29 9am by who? Which service that's not not That's not fun that's really not fun. Oh number client on to look like Michelle in love the amount Okay, okay, this is what I don't need I need this I don't need this stuff. So guys, I'm still learning but if I go to my Gmail account there's no confirmation so what I will do I'll go back to forms this one click over here and then service title got it? Based it got it? They said so that's better apply changes and then I click on you know what, I will copy the stuff then I add a new email sent email to email from the submitted form fields from user email reply to custom email reply to info at Ferdy Korpershoek. So if that person wants to reply it goes to me subject of his email your booking is confirmed configurated confirmed but a capital C from Ferdy Korpershoek from infrared Ferdy Korpershoek And I want to have a lot of stuff I definitely should have a name in the form Hey there we are you looking for it? Okay. We just want to come firm that we received your booking we are looking forwards to see you at so when you will be served by this guy though. No no no no. You'll be served by this guy. Your treat ment is this one your comments that can be paid at the store Cheers 30 Apply the changes so an email to myself through my email to the one who is a new customer. I go to New Page hold commands or Ctrl on a PC and start typing thank thank you for thank you for your order. You will receive a confirmation soon when a okay publish go back to all the pages now title quick edits. Say thank you so much. Copy, Paste, update. Okay, then I go back to the jet engine forms and then I add a new action this time by email, bots. A redirection to a page which is a current current page page ID or static page and then it's thank you so much okay apply so what do we have after booking appointment I get employment information over here through this I get an email as the website owner like hey I get a new client for a barber I see all the information for who is it all to change one more thing over there there's a new booking for from the barber shop or new booking apply the changes the person who did the booking gets an email notification and will be directed redirected to that page where it will say that you get an email updates so now I open this incognito like I've never been here before I'm like wow I need to go here. I want to book an appointment. Okay. I want to go for a haircuts done by Roy I can be in a set Saturday okay no available slots sorry about Friday 930 Does 9am is already taken. Okay, my username or mother's scorpid gmail.com phone number I have no comments I say book now. So what will happen I will be redirected to this page which I cannot see. Really weird. And I get an email so far so good new booking as new booking January 29 930 by by who I should change those two by haircuts. But service ROI, okay. And the phone number, the client and account Okay, I need to take a look at this. Okay, then I go to my demo accounts your booking is confirms Hi there just want to confirm that we received from booking we're looking forward to see you soon when okay. Okay, I'm going to do one more thing. Just because I want to make this complete. I go to jet engine, appointments, settings. Then I go to Tools column name is name save it okay. Then I want to go to the form jet engine forms static page booking form. We go to user email above that area. I go here, click here. Make a text text is a text field name yes and the label is Your name is required. Apply changes then I go to the appointment. I select the name fields field name apply. Then I go to myself sent email signal goes to me. Field Name is added now from this guy, again, I need to switch those apply changes and now I need to go to the No I think it's added to the form now. Did I miss something? Well, yes. Send an email to clients from blah blah blah. Then I can say hey field name. So make it personal. Hey Ferdy total amounts can be paid. Then see you soon. An F name again. Make it personal. Automatic personal update. Okay, one more Time wait incognito okay haircuts I Roy 29th and 30 Steak and as you see next My name wow that's personal let's go myself Chris tiano Bieber is Ferdy [e-mail] book now okay the thank you page that looks crappy new booking a 30 from Christiana will be we're gonna mess by who Roy with service haircuts. Okay, sounds good. Let's go to my Gmail and then IG Gmail account. Hey Christianna Bieber Gomez, see you soon Christianna Bieber Gomez. So this is amazing this this, if you can make this for a client, you can make a lot of money to buy this package the whole package. You throw it into the services that you offer, I can make appointment websites for you for gardening, or for parties or whatever, you can do it and you are the man, you get more clients you make money. And that way everybody's happy. Congratulations, if you're here, that means that you watch the whole tutorial or just the latest part. Or maybe you applied already everything and you have a beautiful website with a booking system or whatever the case is. Thank you for being here. And good luck. With the business, you have as I said before already multiple times. You can sell this as a surface and if you have the Croco block subscription, you can make websites for clients it's totally legal. So it's a great way to make extra money and at the same time help other people. I hope you like this video if that is the case please like it feel free to subscribe for more upcoming WordPress-related tutorials. Have a great day and see you in the next video. Bye-bye

Channel: Ferdy Korpershoek

Views: 19,740

Keywords: Ferdy Korpershoek, Wordpress, jet appointment crocoblock, jet appointment tutorial, jet appointment plugin, jet engine tutorial, jet engine crocoblock, crocoblock jet engine, jet engine wordpress, crocoblock elementor, dynamic wordpress, crocoblock tutorial, dynamic wordpress website, jet engine elementor, wordpress booking calendar plugin, wordpress booking system, booking system wordpress, appointment system, wordpress appointment scheduling plugin, Best Appointment Plugin

Id: JFwmE9T5Fmo

Length: 147min 40sec (8860 seconds)

Published: Mon Apr 05 2021