How to Make Appointment Booking Website with WordPress - For Doctors, Lawyers etc. Jet Appointment

hello friends i am nish again today in this real teach you how to create a custom appointment booking website with wordpress now this video is the most unique and amazing video on my youtube channel because i've created more than 200 videos but this is the first time that i'm creating a website using custom and dynamic post types and metadata it's like creating your own custom theme now first of all you can watch this video to create any kind of appointment booking website whether it's for a dentist barber accountant doctor anything steps are going to be same for all and this is the website that we'll be creating in this video this is the home page first of all if you see this is your header at the top we will enter all the details like you can enter your timing you can enter your address then after that you have your header at the left hand side you have your logo in the middle you have your menu whatever menu you want at the right hand side you can you know enter your phone number email address something like that now this is not a pre-made or a pre-built header this is a custom design we will see how to create our own header and footer then after that we have our first section this is your you know you have your title some subtitle after that we have created different departments and services like neurology plastic surgery all those different options and obviously as i said earlier you can watch the same video same steps for different types of website if you're doing this for an accountant you can create different types of services over here then after that we have this section we offer extensive medical procedures you can enter something like that and after that when somebody clicks on this button they will be redirected to all services or all departments page then we will showcase different doctors what happens i'll show you what happens if you click on a single doctor page or a single service page first let's see this home page then at the bottom you can enter your address and all and obviously at the bottom we have our footer and again as i said earlier this is a custom footer we'll see how to design our own footer now this website looks like a very normal very regular website but don't worry it is very unique i'll explain you about all the unique features later on in this video just stay with me now let's see all the different things so we'll see how to create an archive page or you know a list page where we make a list all the different services then also we'll create a doctor's archive page we can wherein we can show all the different doctors and then after that we'll design when we'll build single department and single doctors page now if you open the department's archive page if you click on this link this is the department's archive page and again this is custom design you can design your own style however you want so what i've designed it i've just kept it very simple first i've displayed this logo then after that the title and some text okay so you can have a very unique design if you want this is a simple design that i've kept it like this then after that if you open a single service for example if you open plastic surgery this is how the design of a single page looks like a single service page looks like first of all you have your title then after that you have the consultation title some description few images related to that and after that view text and at the bottom we have this appointment form so if somebody wants to see this service plastic surgery they can see which all doctors are available for this service so if they can select any one of these doctors maybe they select this first doctor allen hall and after that they can select this date and time for this doctor they will see all the different slots available and how many people can be accommodated in these slots maybe i want to select this one 12 30 to 13 and then we'll click on next now this is your confirmation step person will enter their name email address and phone number let me do it very quickly all right so as you can see once this person enters that detail then they can click on make an appointment now here there can be two scenarios if you want to keep it just if you want to stop it over here you can stop it or if you want to accept online payments then you can redirect them to this checkout page wherein they can make online payment through credit card debit card through net banking upi any kind of payment gateway you can integrate obviously i'll show you how to integrate different payment gateways so there are two options if you want to just stop at you know previous step you can stop there or if you want to accept online payments you can even redirect them to this page and after that once they fill in this form they can make the payment now for doctor's page as well if you open the doctor's page the archive page this is how all the doctors listing will be designed obviously if you're on a different design you can have that thing as well if you open a single doctor page this is how the design looks like the image of the doctor the title the name of the doctor expertise length of work email phone number all these things can be you know showcased over here then what all services this doctor you know provides they can you can select the service you can select the time and after that the process is all same now let me show you the back end so whenever someone makes any appointment what screen will you see how the back end looks like all right so this is how your back end will look like you can have different styles so this is the list style so you can see what service was selected for what for what provider for what doctor and you can see the in email address all the different things all the different names and details related to that customer or that patient you can see the date and time if you click on this i icon you can see more details about this appointment now if you want to see this in a calendar form you can click on this calendar and after that you can see okay on this date we have three appointments on 17th we have one you can see it like this or if you want you can select a single date and after that you can see the timeline so once you see the timeline you can see at what time what appointment is available okay you can see all those details over here now let me explain you about custom and dynamic post types and some metadata so if you if you've already worked on wordpress you know this is the dashboard now by default we have post you know post type and pages type we have created few more as you can see i've created this custom post type of doctor and departments and under that i have created some custom data so if you want to add a new doctor you'll have to enter this metadata so here as you can see price per provider slot speciality expertise length of work email all these data all this metadata can be created by you and once you create this thing you can now design this page so this is the design that i've gone with if you want you can have a completely different design then we'll also see how to create a custom form like this form that is created over here so in this case what i've done is i've given two options first you have to choose a service and after that you have to choose a date and time then you will be redirected or then you can go to next step you can do one more thing you can create multiple steps so in the first step they'll have to select the service then they can click on next in the next step you can go to date and time and then they can fill in the form or you can do one thing you can have all the things in one single page so you have total control on the design aspect of this video and also on the design aspect of this website and also on the technical part of this website right now there are many more advanced features available in this website but i think i'll stop it over here i just wanted to give you you know a quick demo of the website that will be creating now i hope you guys like the demo website if you like the demo website if you want to create this website if you want to create this amazing website and learn a lot of new things make sure to watch the complete tutorial and before you proceed further also make sure to subscribe and click on the bell icon so that you don't miss any future notifications if you find this video helpful give a thumbs up to this video and share it with your friends on different social media platforms and throughout the video if you have any doubt any comments any sessions for me you can always leave them in the comments section below now let's start creating this website right now to create any kind of website whether it's an e-commerce website an appointment booking website a simple blog or a business website any kind of website we need two basic things a domain name and a hosting account a domain name is simply the name or the url of your website for example blogger.com youtube.com google.com.com all these things are different domain names so we'll also have to register new domain name on the internet so that whenever someone wants to visit your website they can simply type in this domain name in the browser url bar and they can land on your website now the second and the most important thing is your website's hosting now hosting is basically a computer or a server wherein your entire website is saved so if you see this website all the different posts all the different media files all the different pages this entire website is saved in a server and that server is running 24 7 so that whenever someone wants to visit your website from any particular country at any given time they can always see your website live so your website is always up and running now hosting is the most important thing about your website because everything related to your website is directly or indirectly dependent on your hosting so your website speed your website's performance the user experience on your website your website security and even your website's ranking in google search results is totally dependent on your hosting so if you've selected a good and reliable hosting your website speed and performance will be amazing it will have better user experience it will get good ranking in google search results and will also be 100 secure and obviously in contrast to that if you select some bad hosting cheap and crappy hosting your website speed and performance will not be that great and also you won't get better ranking in google search results now there are literally thousands of different hosting providers available in the market but unfortunately only handful of them are really good enough to consider but you don't have to worry about that you can simply open a new tab and type in blogdood.com nh now nh stands for name hero and this link is also given in the video description below so you don't have to type in that link simply click on that link and you should be redirected to this page now if you scroll down you can see there are four different plans available under web hosting starter plus turbo and business now this is not the only good hosting there are few more hostings and then also decent hostings if you go to blogtoot.com my website here if you see very at the very top best wordpress hosting if you click on that thing i've created a small list for you i would recommend you to just stay with top three name hero fast comet or a2 hosting and steps which i'm going to show you is same for all three hostings so name hero fast comet and air twisting now because name hero is the best why not go with the best and also this is very affordable now for most of you guys i would recommend you to start with the plus cloud plan because here you can create seven different websites you get more resources and you also get unlimited ssd space and few more options like free website migration and light speed server and obviously if you go with even higher plan like turbo or business cloud you will get even more power so your website will perform even more better but what i would recommend you to do is start with plus cloud and once you think your website has grown to a certain level and once you need more power then you can upgrade to turbo or business cloud or any other plan but for for starters i would recommend you to just start with this plan this is very affordable and once you need more power you can anytime upgrade so select this option and click on this order now button now you have to register a new domain name so whatever domain name you want to register just type in that domain name over here at the left hand side and after that you can also select the domain name extensions now there are hundreds of different domain name extensions whatever or whichever you want you can select that for example.com.in.net.biz.nl many different domain extensions are available so simply type in your domain name select the extension and click on search now it will search whether this domain name is available or not once it is available you will get continue button click on that continue button now if you've already registered your domain name on some other website and if you want to use that domain name with name hero you can use the second option use your own domain now here type in that domain name suppose i have knows registered this domain name on godaddy name chip or google domains i can type in this domain then after that i can type in the extension domain name extension and i can click on next then in the next step i'll show you how you can link this domain name which is registered outside name hero maybe on godaddy how you can register how you can link that godaddy domain name with name hero so you have both the option i'll show this option how to register a new domain name so if you want to register a new domain name select this click on search now as you can see this is available i can click on continue now in this step you have to select the billing cycle so if you want to go with three years two years one year obviously the higher billing cycle you select the better discount you will get so you can select any one of these options and after that click on continue now don't tick mark anything over here it will cost you some extra money just click on continue and finally on the checkout page you can scroll down and you can fill in this form enter your first name last name your email address phone number all your basic details so your address country name everything can be entered over here under support pin just type in any four digit number now one more thing just remember your email address and password so whatever email address and password you enter over here remember this thing because this will become your login credentials so in future whenever you want to log into your name hero cpanel you'll have to enter this email address and password so make sure you remember it now go ahead at the bottom now you can make payment through credit card debit card your atm card so you can select this option you can make payment through paypal you can also make payment through coinbase or you can select this try payment gateway so you can select this credit debit card payment you can also use any regular atm card as well just make sure you have any one of these cards discover mastercard visa or american express now the reason i'm saying this thing is because most of the people in india have a rupee card now rupe is a domestic card which is not accepted anywhere outside india so if you have a rupee card better get it upgraded to visa or mastercard once you have that thing you can enter your card details and after that just tick mark this thing and click on checkout you can make the payment now once you make the payment you have to now come to this website namehero.com login now here you have to enter the email address and password which you have set in your previous step and now click on login to name hero you will see this page here you have to click on my cloud click on this my cloud button and now you have to select the package whatever you have created now the very first thing that i want to show you is how you can connect your domain name which is registered outside name hero with this hosting so suppose if i have registered my domain name on godaddy i can go to godaddy.com obviously log into my account now once you log into your account you will see this page you will see all your different domain names that you have registered now suppose if i want to use this domain name uh maybe this one try teamgates.com i can select this thing i can click on this dns button now steps are same for all the different domain name providers so whether it's good id whether it's name shift whether it's google domain whether it's name write any domain name provider you can go and you can follow these same steps just select your domain name besides your domain name you will see a dns button or dns link click on that and you need to change your dns which is your domain name server so if you scroll down you can see your name servers click on change and delete these two name servers from here click on if you see this button click on advanced delete these two name servers and copy your name server number one paste it under line one copy your name server number two obviously paste it under line two and click on save now once you click on save it can take up to 24 hours to connect your domain name with this with this hosting so by that time you can do a few more things by that time you can click on login to cpanel and now you will be automatically logged into your cpanel this is your cpanel now the very first thing that i would recommend you to do on your cpanel is some php tweaks so if you search for php under this domain under this search bar you will see this option php version select php version click on that now you need to do some changes over here to make your website and to make your server even more faster now here the very first option is current php version you need to select the latest version so if you see as you can see seven point four is the latest we have some more seven point one two three i've selected the latest one seven point four if you see seven point five six seven if you're watching this video maybe uh one one year after i've uploaded this video then and if you see seven point five six seven you can select the latest version then you need to go to options and here you need to do few changes under max execution time you need to type in at least 600 if you see any number below 600 just change this thing to 600 if you see any number about that don't change it max input time should be at least 600 max input variables should be at least 4 000. if you have some other number just type in 4000 like this it will automatically save this thing then after that your memory limit your post max size and also your upload max file size should at least be 128 mb okay as you can see many options are given over here make it at least 128 mb for all three options all right so just see whatever see whatever you see on your screen these three options and after that this three options okay once you set this thing now you can again come back to your name hero cpanel now we can install wordpress on our domain name and to do that you can again click on the search bar and search for softaculous app installer select this option subtacular app installer there are many different apps given over here so as you can see wordpress joomla you know whmc as many different apps are given over here i want to use this one wordpress so click on wordpress now click on this blue install now button and from here you have to choose your domain name so for this example i'm going to use this domain name book three dot block dude and under choose protocol make sure you have selected https now there are two options http and https make sure you select this http s1 s for secure select that option and after that under in directory make sure nothing is typed in make sure this is empty okay then when you scroll down you have site settings at the left hand side under side settings you can give your website some names so maybe i'll name it jetbooking all right and you can also describe your website maybe doctor booking website i'll just type in this thing so you can set your website name and your website description now at the right hand side you will see admin account here you will have your username and password given for you i would recommend you to delete this thing type in your own username and also your own custom password then after that also change this email delete it and type in your own email address all right now go ahead at the bottom and click on this install button now wordpress has started installing on your domain name this is a very small very short process hardly takes around 10 to 12 seconds as you can see it is already completed now you'll get two different links if you open the first one this is this will just be your website this is how your website is looking right now if you open the second link this is your dashboard link now this page this dashboard page is the most important page of your website because this is the page from where you will be controlling your entire website so if you want to change your website style your website's you know appearance your website design or if you want to manage your appointments manage your payments create a new doctor appointment whatever you want to do you will basically be controlling your entire website from this page and whenever you want to come to this page you need to type in your website name after that type in forward slash wp hyphen admin you land on this page now whenever we install wordpress on a new domain name there are few basic things that we have to understand and there are few basic settings that we have to do so let's first see them now first of all this is your dashboard on your dashboard you'll see a few widgets are given to you i would recommend you to just uninstall a basically just remove these widgets from here because these are not really useful so to remove them you can click on screen option at top and you can just untick all these widgets from here all right now as you can see we have a nice and clean screen over here now the left hand side you have few options first option is your post option so you will be using this option to create different blog post now one blog post is already created as you can see this is a dummy one you can delete it and you can create it uh create a new one then after that we have the media option now in the media option whatever media files you have uploaded on your website for example if you see this website all the different images logos all the different videos that i have uploaded over here all this media file can be seen from here or can be seen over here on under media option you can manage them you can upload new media files and all then third option is your pages option which obviously will be used to create different pages then we have the comments option under this you will see all the different comments that is you know whenever someone posts a new comment on any of your post or any one of your appointment pages you will see all those comments over here and you can manage them you can mark them approve unapproved you can delete them you can reply them whatever you want to do you can do it from here then you have the appearance option now under appearance as you can see we have three different themes 2021 2019 and 2020. now let me explain you what is a theme a theme is basically the design or the appearance of your website so if you see your website right now the design of this website is because of this theme 2021 theme if you just go ahead and activate some other theme maybe this 2019 theme now again if you come back to this page and refresh it now as you can see your website design and appearance is completely changed so this is basically what a theme does a theme changes your website style and appearance now we can go ahead and delete this theme in fact we can go ahead and delete all the other themes which are not activated now this is not the theme that you want to use 2019 this is not the theme we will be using some other theme but we'll see how later on how to install that theme and how to use it now after this we have the plugins option now under plugins you'll see few plugins will be automatically installed for you i would recommend you to just delete them now we have just learned that theme is basically the design or the appearance of the website and plug-in is the software part of this website so whatever features and functionalities are present on your website it will be present because of some plugin so for example right now we don't have any you know appointment booking related feature like we have with a show people can come they can fill in the form they can book an appointment we don't have those features right now so to get those features on your website you will need to install few plugins so we'll see how that thing works how this process works later on in this video when we well when we'll install a new plugin and we'll see how to customize and how to integrate that entire plugin so basically a plugin is kind of a software or an add-on that will add some extra features and functionalities to your wordpress website now with the left hand side you'll see settings click on that if you have not already changed your website name and description you can do it from here then after that make sure to tick mark this thing membership anyone can register very important so that people can come they can register for a for an appointment then under time zone you can select a time zone according to your country and after that you can click on save changes then after that under settings click on permalinks by default day and name will be selected just select this post name one and click on save changes again now finally come back to your dashboard and with this we have completed all the basic settings related to our wordpress website right now let's do one thing let's install all the required theme and plugins so that we can start designing and creating this website so for that again you need to open a new tab and type in blogdoot.com croco and again this link is also given in the video description below so you can just click on that link and land on this page now here as you can see this is the website croco block and they have a lot of plugins for different purposes jet triggs jet engine jet booking jet appointment jet blue builder many different plugins are available and some themes are also available if you just hover this products option you will see this option now you need to click on pricing you need to purchase this thing this is a premium version now you need to at least purchase this option all inclusive so that you can use all the plugins you know as you can see it has 47 design templates so pre-designed websites for you dynamic templates uh you can you know raise a ticket to get support and all the plugins are available as you can see everything is tick mark over here so with this you'll get all these plugins okay so you can use this option i'm just selecting this option select all inclusive whichever you want whether you want this package this package whichever package you want so just select that package and click on this buy now button i have already purchased it so i'll go to account and here you can see this is how it will look like once you have purchased any one of those packages so you'll see all these options now you don't need to install these plugins one by one what we can do is we can install first of all let's install the theme which is this theme cabba 2.1 point whatever the version is you can select this click on download and after that we can install this croco block wizard install this one so download these two and after that all the plugins will be downloaded for you automatically so come back to your dashboard first let's start with the theme so click on appearance add new to add a new theme upload theme because you have the file we need to upload this file simply select this file and install it now once it is installed we need to activate this theme so click on this activate link obviously it will be activated now we can even delete this 2019 theme just do it like this and now we need to install this plugin so click on plugins and install this croco block wizard so click on this add new upload plugin select this plugin and click on install now now activate this plugin you will get a small setup so as you can see now you can you can import a skin basically you can import this entire website if you just want so if you want you can click on i'll just click on this let's go button you need to enter your license key you will get it over here if you click on view details here as you can see you have your license key obviously i'll have to hide that thing now come back with your paste in the key click on get started now you can again as i said earlier select this full croco block installation and you can install this entire website okay what what i'll do is i'll select this option jet plugins installation because i want to show you everything from scratch so we'll select the second option jet plugin installation and click on install now you have to select whatever plugins you want so we want theme code jet theme code jet elements we don't want tabs i think we also don't want this check tricks i don't know we'll see that later on maybe and all right maybe all right so we want these plugins jet theme code jet elements jet blocks get tricks jet engine and jet appointments obviously if you want you can just go ahead or add all the different plugins but once you add more plugins your website will slow down so we are just installing only those plugins that we really need or that are required to create this appointment website so just select these plugins that you see on your screen you know jet theme code jet elements jet blocks check tricks i think jet tricks is not required but still jet engine and jet appointments select this and click on continue now once those plugins are installed you'll see the screen congratulations you're all set now you need to activate these plugins so click on plugins from the left hand side here you'll see okay they are all activated now i just need to install this elementor plugin so click on this install elementor plugin it will install this plugin activate it this is the page builder elementor page builder now if you see this screen start update just click on the start update button so that your data is updated and now we can see this thing now again if you come back to your website and refresh it your website will look a little bit different because we have changed the theme but still it is looking very bad you know nothing present over here so we'll see everything step by step now the very first thing that we need to do is we need to create different post types so as you can see this blog post is a post type pages is a post type so if you open for example this blog post post type and if you add a new blog post for example so in this post type as you can see we have few options we have title we have description we have breadcrumb we have few things and at the at the right hand side we have this featured image and excerpt so we can also create a custom block type so for a single uh department and for single doctor so basically for single provider and for single service we need to create two different blog posts so we need to come back over here leave this page and to do that thing to create a custom blog post you need to hover over this jet engine and you need to click on post types under jet engine now let's create a new one click on add new let's give it a title of services all right then after that under slug just press tab it will automatically enter services or whatever it has okay so slug will be automatically entered for you now for label under singular you need to type in service so i'm typing in service if you want to type in department so you can type in department or if you want to type in something else you can do that now once you type in service or the singular form or part of whatever text you can again just go ahead and press tab it will keep on entering all these text like this now you need to go to advanced options scroll down you need to i don't think this rewrite slug is required but still you can just copy this slug services then after that make sure under capability type you have post selected now you can select an icon for this for example if you see we have this icon for this we have this media icon we have this pages icon all the different icons we have this folder icon for templates so you can select some icon for this so you can click on this thing and you can select any icon maybe let's select this okay you can select any icon so let me select maybe this icon now by default it will have title and editor so if you again let me show you a single blog post or maybe let's let me show you this pages post type so it will have this title and it has let's see what was next it has editor so this is the editor at the bottom only these two things are after that it does not have featured image it does not have excerpt and so on so we can add those things we can select this option and maybe we want excerpt and we also want thumbnail which is your featured image so that we we get all these options okay now if you don't understand anything don't worry once we you know just keep on doing this thing keep on creating more and more things everything will become more clear to you like why are we doing this thing once we go forward and create different doctors and different services you'll understand why we did whatever we did okay so i'm selecting title editor excerpt and thumbnail so you can see title this is your editor then we have excerpt which is uh okay it is not available on this website and then we have the featured image which is your thumbnail now once you select this thing now you can also add some meta fields so we want to add some custom fields now this is services so if you open a single service you can see we need a lot of meta services metadata so for example we need this text we need you know this dynamic text maybe this is called consultation text then we need this text okay then after that we need this media then after that we need this text so we we need to create few metadata over here so we can come back to this page again now let me first create an icon now you might think where this icon is required so if you go to departments archive page you can see we are we are using this icons so we need to add an icon first so i'll come over here under label i'll type in icon and again just press enter under name id it will automatically fill in under object type it will be a field under field type it will be an image or media select media then after that end of fill with you can type in 50 now let me explain you what this 50 percent is in fact let me open this demo website that i've created if i open a single doctor if i try to add a new doctor now we have already added this title content and featured image now these are the things that we are adding you know email certificates whatever okay okay in fact we are creating services so let me add a new service or add a new department just to show you this thing so we are adding a capacity we are adding department icon consultation over here so we just added this icon i just gave it a title of icon okay so it will say icon instead of depend department icon now if you see this thing this is 50 because here we have 50 half in this in this thing we have two columns so this is department icon and consultation okay so it is 50 50 percent then once we create description 1 and description 2 this is also 50 50 percent but we have also few more things if you see the doctor option if i click on add new doctor here we have as you can see 33 percent so because we have three things in one row three columns speciality expertise and length of work this is 33 percentage so you can just design it like this you can keep everything at hundred percent if you want but i'm just keeping it at fifty percent now let's add a new meta field so click on add metal field and here i'll type in maybe consultation [Music] now what this consultation will be useful for if you see a single service this text will be the consultation text so this is the field for that just press tab keep it filled and under fill type this will be text because people will just type in the simple text okay and i want to make it 50 as well so i'll select 50 and i'll minimize this thing now let's add description one and two so this is your description one so some some description and that description will show up over here and this is your description too now this is one single description i have divided this into two columns i'll show you how that is done so let's add description one for this data and description two for this data at the bottom so let me cut this page come back to this click on add new meta field give it title of description one or if you want some other title obviously you can do that thing as well press tab now under field type instead of text we need to select this one w-i-s-i-w-i-g select that option now this will give you this style so if you see uh for consultation this is a simple text but for this description one and two you know we have this screen wherein when a person can change the paragraph all these things so this format that you see over here this is what this wis that thing is okay so again this is also 50 because as you can see 50 50 so i'll select this then after that we have description 2 so add new meta field change the title to description 2 press tab and again instead of text select this option this will also be 50 all right now we need to create one more we need to create this gallery so that we can display these gallery images so i'll come over here click on add new meta field give it a title of gallery whatever your spelling is keep it at field and under field type you have to select gallery all right now you can keep it hundred percent if you see gallery this is only one thing in one line so it is hundred percent if you want you can keep it at fifty percent as well i think only these five meta fields are required so once you select this thing once you finish up with this you can just go ahead and click on add post type now once you click on add post type now here as you can see at the left hand side you have services if you don't see services you can just refresh this page and now you you have your services if you try to add a new service click on add new service here as you can see icon consultation description one description to everything is given over here now this will not work this is just to collect data after this once we create a you know one more post type for providers or doctors after that we'll see how to design this data so once we collect this data how we can output this on our website like here as you can see we have output this data in this form in this pattern and in this style so right now we're just creating forms to collect different data now again let's come back to that page all right now let's create a new post type so come back to post types under jet engine click on add new and this time it will be doctors or providers or consultations whatever you want so i'll just type in doctors press this thing now labels under label first singular so it will be doctor okay now just keep on pressing tab everything will be entered for you now under advance let's see under rewrite slug type in doctors small everything everything will be lower case now for this whatever icon you want you can select this maybe for this we want let's see let's select this shield icon maybe all right and for this also we need title editor excerpt and featured image now let's add meta filters related to this so if you open a single doctor page click on single doctor here as you can see we need so many things this image will be gathered through through featured image so we can see we can collect that featured image and we can display it over here now for this we need to create the title or basically the name uh we can use actually the title for this name then we need to create speciality expertise length of work all these things then we need to create this certificate specialization and career guidance so we need to create few data few meta fields so here so come back to this page first let's start with this speciality so i'll just copy the title paste it over here under label press tab okay this is just a simple text okay simple text so i'll keep it at this and this is 33 percentage now we can just minimize this thing create a new one add new meta field this is expertise all right type in this thing press tab this is just simple text this will also be 33 minimize it then we have length of work add new meta field you know enter the label and after that press tab it will enter the name or id and this is also 33 because we want to display these three in one single line then click on add new meta field we have email and phone so first select email enter email press tab and this will be 50 for example this is also simple text add new meta field and then this is this phone so i'll copy the title phone and this is also 50 then we have this thing certificates so click on add new meta fields title okay press tab now instead of field type text we have to select gallery which is over here select this option and this can be hundred percent so we can keep it at hundred percent and finally we have this specialization so we can copy these things now we don't need to create this courier guidelines we can do one thing we can content we can copy the content and we can display under career guidelines so we can use the content as well i'll show you how that is done and similarly we can use this title for this for example let me again just explain you this thing if you open a single post if you try to add a new post two things are already present the title and this content okay if you see we have added this thing at top title and content this editor is that content so we can use the title for this name of the doctor and we can use the content for this content so whatever will be entered under this content we can use this to display it over here or we will output that data over here so finally the last thing that we need to do is this specialization copy the text click on add new meta field enter the text press tab now under object fill type we have to select repeater okay select repeater because here if you see we have a same thing and it is repeating so it is the same style we have this you know we have this image or whatever this thing is this icon so we have this icon then some data then icon some data so this is a repeater this thing is repeated okay so that is the reason why you're using this repeater click on add new repeater field under label you can type in something else maybe this is specialization is the title so maybe under repeat right it could be qualifications of this doctor so i'll type in qualification or qualifications make sure everything is lowercase over here and this is a simple text and this is hundred percent all right now we can minimize this thing and we can add a new post type now again you will see this thing if you try to add a new doctor you have title you have this editor then at the right hand side you have the featured image and excerpt and then whatever we have added speciality expertise length of work and this is 33 percent so three in row then we have email and phone two in row fifty percent certificate was hundred percent and specialization was hundred percent so single in row so this is how it works right now let's do one thing let's set up that appointment plugin that we installed so if you come back to your dashboard here if you see at the left hand side we have this appointments thing so hover over that and click on setup now here you need to select the services post type so if you remember we have created this services post post types if you search for that here it is services and you need to select the provider's post type so your doctors are your providers so basically the doctor's post type is your provider's post type select that thing and click on next now this is the basics uh database that is set for you most of the things are already present i need to add two more things so i'll click on add new database uh i'll add phone and after that we'll also add comments comments is not really useful but let's add it right so select these two and now click on next now you have to select the slot time format so if you see whenever someone selects any service and after that when they click on this date they see this uh slot time and this is the format as you can see by default is this 24 24 hours format then you can have 12 hours and you can have pm am in capital and small letters so whatever you want i am selecting the default one then slot duration is half an hour by default so here as you can see 9 to 9 39 30 to 10 so half an hour duration you can increase or decrease this number if you want to make it one hour just select one zero zero now it is one hour per slot okay then buffer time before slot buffer time after slot if you i want to add a buffer time before and after slot you can have that you can have multiple bookings per slot so here if you see we have just one booking per slot so one only one person can book for this slot if you want you can do one thing because i have increased the time for slot duration i can do one thing i can select minimum one and maximum three so three people can book for this same slot okay same time slot so one hour we can have three people booking for same one time slot so if you want you can have multiple booking if you want to disable that you can do that thing as well now you can also set the work hours so you know this is the minimum time from from this time this booking will start and it will uh stop at 5. so maybe instead of 8 it starts at 10 and instead of 5 it goes on till maybe 19 till 7 pm so we'll select this thing click on save and you can do the same thing for other dates and as you can see saturday and sunday are basically off you cannot have any booking so you're also if you see okay we have not made that thing over here so if you want to keep that like this nobody will be able to book on saturdays and sundays but if you want to do that thing if you want to enable booking on saturdays and sundays as well you can select this and you can type in or select the timing for saturdays and sundays okay all right maybe let me select this save so people can now book on saturday but not on sunday so you can select this thing you can have some day offs as well so whatever days you select those days will be off so if there is any you know public holiday anything like that you can select that day now that day booking will be disabled on that day you can select that now click on next then after that we also want to integrate woocommerce now woocommerce you should only integrate woocommerce if you're planning to accept online payments uh if you're planning to have cash on delivery if you're planning to have cash payment so whenever patient comes or customer comes then they have to make the payment there during appointment then you can disable this thing but if you want to enable online payment you if you want to receive online payment you can enable woocommerce integration now click on finish and with this this setup is now completed now let's do one thing let's create a single doctor in a single service so if you click on services no services present click on add new service and let's add a new service let's go to services page or departments page in this case and maybe let's add plastic surgery so i'll add this under title then after that if you come back to this option we also have this excerpt at bottom so i'll copy it and i'll open this plastic surgery now that excerpt will be shown over here so whatever you type in under excerpt it will display over here at bottom and whatever you type in under title so as you can see it will display it as title then we have the icon let's set this icons go so click on this icon option and you can also set a price per slot so per slot price is maybe 10 dollars will set dollar pound will change the currency in the next step right now you can just enter the price so maybe i want to keep it at dollars so ten dollars per slot then we have the icon option so this is the icon that we need to choose now if you see there is a link given in the video description if you click on that link you should be redirected to my website blog dot com in fact you will be redirected to one of this post so whenever i create a video i always create a post for that and in that post once you click on that link you will be redirected to a similar post in that post you will see all the important links and with that you will see at the bottom download free images now once you click on this download button a new zip file will start loading as you can see i'll cancel it so it will be a zip file you need to right click on that file and click on extract files once you extract that zip file you will see this folder media folder and under this folder i have given you all this certificate images all the doctor images and few images that will help you to create this demo website so if you don't already have your own images you can use these dummy images as well there's one more folder in that files folder i'll show you how to use this folder throughout the video we'll again come back to this folder and we'll see how to use different files in this folder right now if you see i've given you two icons face and media tools uh medical tools so to use these icons you can come over here to upload this icon click on choose media and upload this file maybe let me do one thing let me just go ahead and upload all the different images at once now click on open now these two are the icons which are given to you but if you don't see any icon of your choice you can go to this website icons8.com and here you can create your own icon so maybe let's search for scissor icon if you just search for that click on search now here as you can see we have hundreds of different icons some colorful some simple now you can use any one of these icons on your website if you want to select an icon if you want to change the color you can do that thing as well so for example if you want to use this simple icon you can click on this and if you want to recolor this thing click on recolor now because most of the icons are all the icons here are this blue color you can select this blue color from here now as you can see the icon color is changed you can select some other blue color as well you can click on this thing if you want to select some other color or some light shade of this color or if you have your own color code you can just paste in the color code you'll have this that exact color now once you select this thing you can now click on download and you can select the file now i would recommend you to select at least 100 pixels select this click on download now come back to this website whatever icon you want you can choose that icon and click on choose media so as you can see this is selected now under consultation text if you remember if i open plastic surgery this was our consultation text plastic surgery consultation or whatever your text is you can copy this thing then we have description one this data over here this is under this this will be our description one and this data at bottom okay this is your description to paste it over here then we have the gallery images so these two images or whatever image you want click on choose file let me select these two files from here not this these two click on choose images or choose media these two images will be your gallery images okay now the right hand side we have added this excerpt now we also need to select a doctor for this service but we have not yet created any doctor so we can do that later on now we can also set a feature image this featured image will be displayed at top so if you see this is your title plastic surgery and below or behind that title if you see that is your image this image is a featured image so let me upload some feature image i'll select this click on set featured image and with this we have created our first service or department now you can just go ahead and publish it if you come back you can see this thing if you just view this in a new tab it will look like this only title and this featured image is present because we have not yet designed the you know we designed this thing we have not yet created the layout that we want to for this data to display so that is the reason why only this title and featured image is displaying rest everything is blank so later on in this video we'll see how to do that thing how to design this thing how to create a layout how to create a structure and how to design all those different things now let's create a doctor so click on doctors click on add new doctor let me open a single doctor from here so this is your doctor name i'll copy the name paste it under title then after that speciality whatever it is just copy that paste it under this expertise okay this is this maybe under speciality i'll type in plastic surgery specialist because we have created that plastic surgery um you know service that is the reason why length of work rest everything i'll just keep it same maybe since 2014 or some other text then we have email i'll copy the email paste it over here we have the phone number we'll paste it over here we have the certificates which are these click on choose media i've just given you a few demo or dummy certificates you can just choose them now specialities okay these so i'll copy this first line paste click on add new paste in this thing copy the second line add new paste in this thing then we have the third line [Music] all right so as many qualifications as you want or specializations if you want just keep on adding these text all right and finally we have this thing okay so i'll copy this thing and this will be our content then we have the featured image which is and price per slot also maybe 25 dollars featured image will be the image of the doctor under exact i'll type in maybe the specialty under excerpt right now we can select this service so that we can link this doctor with that service so i'll select service and we have we have created plastic surgery so if i search for plastic as you can see this is the one now i can publish it now this doctor is linked with that service if you want to confirm that thing you can come first make sure to publish it right so once it is published you if you you can come back and you can go to service and confirm whether this link has happened or not so if you open plastic surgery at the right hand side under doctors now as you can see that doctor is selected so they are now linked now let's do one thing let's install woocommerce plugins so if you want to accept online payments we need this plugin woocommerce and after that we'll see how to integrate different payment gateways with this plugin so for that from the left hand side click on plugins add new and to add a new plugin we need to search for this so under search plugins search for woo or just search for woocommerce enter the entire name this is the one woocommerce buy automatic install this plugin now once it is installed we need to activate this plugin so click on this activate button and once you activate it you will see a quick pop-up basically a quick setup for this plugin all right so as you can see this is the setup page you can just enter your address over here enter your state name and country name right then after that enter your city name and after that your postal code now click on continue no thanks now this is also just a simple survey now this is just a simple service or whatever you want you can select that so in which industry does your store operate anything will do just select anything click on continue just don't tick mark any one of those paid ones now how many products do you want to do you plan to sell whether you're selling anywhere currently you can select that click on continue now over here you will see they will ask you to install few plugins which are not really important not required so we can untick and click on continue now they will recommend you few themes again we have the theme which is required so select this and click on continue with my active theme we don't need any one of these themes and with that we have completed your setup now if you click on pages here as you can see earlier we had only the sample page now we have the card page checkout page my account all these pages created for you because of this setup now this is this was just a quick setup we need to integrate the payment gateway as well so for that you need to hover over this woocommerce and click on settings now we have entered the address and all you can do one thing you can go ahead and change the currency by default it is us dollar if you want maybe indian rupee you can search for indian rupee as you can see indonesian rupiah whatever you want you can select that and click on save changes now if you also want to enable taxes you can tick mark this thing enable taxes and calculation and click on save changes if you want to charge taxes on these appointments now once you enable taxes you can now go to this tax tab and for example suppose maybe it is there is 10 percent tax on this so you can go to additional tax classes press enter to come to a new line and type in gst 10 so in our country it is called gst if in your country it is called white just type in bad 10 and click on save changes or if it is 15 percent vat 15 you know something like that now because i've added this gst 10 here at top a new option is created for me gst 10 rates i need to click on this option now click on insert row enter your country code so for india it is i n now leave this state poster land city come to rate i'll type in 10 to a year and under tax name i'll type in gst 10 now untick shipping because you're not shipping any product click on save changes now just leave this shipping tab because they are not shipping or delivery and delivering any physical product just this is just an appointment thing come to payments now by default you will see only three options are available if you want to enable cash on delivery as well you can do that and after that we have direct bank transfer check payments and all click on save changes for now now to integrate different payment gateways you'll need to install different plugins so for that i'll open this plugins tab in i'll open this plugins option in a new tab click on add new now i'll i'll show you three different plugins first will be paypal because obviously it is very popular very commonly used throughout the world so we'll see how to integrate paypal then we'll see how to integrate stripe now stripe is one of the most popular payment gateways and you can accept online credit debit card payments right on your website so that is really cool and stripe is very popular mostly in the developed countries so if you see u.s uh australia europe you know the entire europe and all so in these countries it is accepted so you can select stripe and third payment gateway will be razer bay which is the most popular payment gateway in india in fact the best payment gateway in india so i'll select that thing so first let's search for paypal you'll see this plugin paypal woocommerce checkout payment gateway install this thing then you need to search for stripe make sure it is by woocommerce okay this also will come strike payment gateway make sure it is by woocommerce install this thing and finally the third one is razer pay all right obviously if you want some other payment gateway you can search for that you can install the plugin for that and you can inst you know integrate that payment gateway so we'll select razer pay for woocommerce install this one now once you've installed all the three or whatever number of plugins if you have installed now you can click on install plugins from the left hand side pick mark all three plugins and now we can activate them so under public action select activate and click on apply right now again if you come back to this woocommerce payments and refresh this page now as you can see we have many more options make sure you enable stripe paypal and razer pay which is right here okay so all three are enabled now let's first click on save changes let's see one by one how we can integrate them so first let's see paypal click on paypal checkout now to integrate paypal or to accept paypal payment on your website you need the paypal live api username password and signature and for that you need to go and log into your paypal account if you don't already have obviously you need to create a new paypal account now any kind of paypal account will do so whether you have a business paypal account or a regular one it will do now once you log into your paypal account you have to do some changes in the url bar type in this thing type in paypal.com and after that type in uh slash business manage slash credentials slash api access and if you see a in access is capital so see that thing press enter you will land on this page scroll down and select this option nvp slash soap api integration click on manage api credentials and here you will get your username password and signature show your username come back over here paste it under username and similarly you need to click on show copy your password paste it under password show your signature copy it and paste it under signature i'll have to hide these things now once you do that thing just go ahead at the bottom and click on save changes now let's see our next option again come back to payments let's see how we can set up stripe so select stripe and for that you need to go to this website dashboard.stripe.com basically the dashboard of this stripe website again just log into your account or if you don't already have an account with stripe you can just create a new account within a minute so it is very easy to create a new account now under stripe you will see this developers option click on that and under developers you will see at the left hand side api keys select that option now you will get your publishable key and your secret key click on publishable key it will be copied come over here first of all disable test mode paste it under key it should say live publishable key not test publishable key so make sure you disable this thing then also copy your secret key now again come back to this page and paste it under live secret key go ahead at the bottom and click on save changes and finally let's see how we can you know set up razor pay steps are almost same click on razer pay first of all just like we went to dashboard.stripe.com now you need to go to dashboard.razorpay.com again just make sure to log into your account and now from the left hand side click on settings click on api keys you will get your key id and key secret basically you'll get if you're doing this for the first time you need to click on that you know create a new key and then after that it will download a new file for you and that file will look something like this if you open this it will be an excel file you will have your key id and also your key secret okay you need to just copy these things from here and paste in under this option all right under key id and secret so here you have key id key section just paste in that thing and click on save changes then after that you can also you know start accepting payments through razer pay now once you do this payment thing now you can click on accounts and privacy here tick mark this thing allow customers to login to an existing account during checkout allow customers to create an account during checkout allow customers to create a create an account on my icon page and untick these bottom things we don't want automatically we don't want username and password to be automatically generated for our users so we need to untick these two things now go ahead at the bottom again click on save changes finally click on advanced and make sure that under card page your card page is selected check out checkout and obviously under my account your my icon page should be selected if it is not you can just search for my account over here you will see a my account page click on that it will be selected now click on save changes all right again come back to your dashboard all right so till now what we have done is we have created these two different post types custom post types for single doctor and single department then after that we have created these meta fields to collect these data like the expertise length of work we have created these things so basically we have completed till here now only part left is this bottom part this form now we need to create two different forms one for a single doctor and one for single department so if you see single doctor form looks something like this so first they'll have to select their service for this doctor and after that they will have to select the date and time and after that they'll have to follow the process then we have this single service form and in this page they'll have to select a doctor that provides this service then they will follow the data in time and next then they can follow the process so this is so these two forms are left once we create these two forms after that we can start designing these pages like we can start you know creating the layout where we want to display which data and how to design that thing so come back to your dashboard let's start with single service form okay so if you see this is your single department or single service page and this is how your form looks like okay so your form starts from here first we have this heading choose a doctor then we have this thing they will have to select this drop down they'll have to select a doctor then another heading and then this calendar so let's see how we can design this thing so for that you will need to hover over jet engine and click on forms okay if you don't see that option it will be at the bottom but for some reason if you don't see it just refresh this page refresh your dashboard page now once you refresh it let's see it again all right so again we don't see so if you don't see this thing what we can do is we can click on jet engine we need to enable few things we need to enable this uh grid gallery this is what we'll be using for gallery we need to enable calendar forms and this one dynamic visibility for widgets and sections so we need to enable these four modules grid gallery calendar forms and dynamic visibility now click on save now once you click on save now as you can see at bottom under jet engine you have these forms now before we proceed to forms let's actually see one thing if you click on products you should see one product automatically created for you if you don't see that product automatically created it means that your website is not completely linked with woocommerce so to fix that thing we need to do one thing we need to hover over appointments click on settings and here you can see we had woocommerce integration on let's do one thing let's make it off it will automatically be saved as you can see it says settings saved and again turn it on again once it says settings saved let's try it again click on products from the left hand side which is over here and now as you can see this appointment product is created for you automatically which simply means that now this is linked now woocommerce is linked with this plugin jet appointment plugin now let's proceed to forms so under jet engines at the bottom you'll see forms click on that now once you click on forms you should see two forms created for you uh in this case i don't see that thing so what we can do is to do that thing again we can just very quickly set up this appointment plugin again so hover over appointments and click on setup let's very quickly do that thing it will say that plugin is already set up we can click on reset and we can set it up again so under services just select that services that we created then select provider we have already done that thing uh select doctors which is our provider now click on next add a new thing over here name it phone comments now again click on next you can set this thing however you want it have explained you this thing now click on next again and in this page i think last time we did not select this option create a form in so in this option you need to select this option jet engine forms okay so that it will create forms under this jet engine forms and again make sure woocommerce integration is on click on finish now here as you can see at the bottom it says created form they have created two different forms for you single service and static page you can see that thing under jet engine forms so under jet engine forms click on this option now as you can see these two forms are created for you now let's first see this single service booking form click on edit so basically it is this form for single service now at very top you'll see service id leave it as it is after that you have username a provider id all these things we need to do some changes so here first of all the very first thing that we need at top is this heading choose a doctor so i'll copy this thing click on add field and as you can see this field is added over here click on pencil button to edit this field under type it should be heading which is over here select heading under label type in choose a doctor and after that click on apply changes and bring this thing just below service id so at top or always you will see service id after that we have the heading now below heading we have this thing choose a doctor so basically we have to choose a provider so provider id so bring this provider id is already created for you bring it below heading thing so now at top heading says choose the doctor then we have a provider id you can click on this pencil button to do some changes in the provider id everything is fine just make sure to delete the label we don't uh need this label over here because we have already added choose a doctor title we don't want another title at bottom which says selector provider so we can delete this label okay rest everything is good over here click on apply changes then after that we have another header which says choose date and time so we'll click on add field pencil button instead of text will again select heading type and choose date and time and click on apply changes bring this thing just below provider id and now below this thing we need this form okay we need basically this calendar which is this option appointment date bring this appointment date below this header now edit this thing and here we don't have the label so we don't need to do anything it is uh correct so you can click on apply changes so just cancel this thing now below appointment date what we have is now as you can see we have this next page button so somebody can click on this button they can go to the next page so we need to add a page break so here you will see this button add page break click on this button and bring it below appointment date okay so we have this button now once they select this button let's see what happens in the next step suppose if i select this doctor some date and slot right now if i click on next now in the next step as you can see again we have a header okay at top which says confirmation and after that we have few fields so so i'll copy this heading come over here click on add field edit this thing again select heading and label will be confirmation and this time you also need to tick mark this thing add previous page button here as you can see in this step we also have this previous page button somebody can click on back and they can come to this page and for that you can tie under previous page button if you type in just text like back it will display this text if you want to display this icon as well this left arrow icon you can type in like this and l a r r left arrow basically semicolon back so this is the code for that left arrow and larr which is left arrow semicolon and after that this text which says back okay so it will give you this button now click on save changes now below this thing we have your name so basically the name field click on add field edit this thing text text it is fine now instead of field name uh instead of this field name type in username and we also have this placeholder as you can see inside this form it says your name so that is a placeholder will type in that thing under placeholder now click on save changes and bring this thing uh username below let's see yeah below this okay we did not bring this header over here first we have this heading confirmation heading then the username then the user email is already created as you can see just make sure you click on this pencil button and don't have this you know label we don't want this label we just want this placeholder it says your email inside that form so we'll type in that thing under placeholder okay rest everything is good click on save changes now below email we have phone filled and after that we have this calculation field so first click on add field edit this thing text and under field type you have to select telephone okay so this will give you that telephone thing and under name we have to type in user phone and again under placeholder it says your phone so under placeholder will type in your phone and click on apply changes bring this thing below user email then below that thing uh it says this it has this book now button but before book now button we have this text so basically it will calculate the price and it will display that price over here so click on add field edit this thing instead of text search for calculated which is so here under field name we can type in total you can just type in total like this i'll type in one thing this underscore before total so underscore total now under total we want to display the price okay first we have this text price okay this is your pre this is basically your prefix so i'll copy it and i'll enter under prefix okay so price in dollars and after that the actual price now to display the actual price we need to copy a code we need to copy this much percentage meta double colon okay like this and after that instead of price percentage what i'll type in i'll come back to dashboard let me show you what i want to type over here we are creating this single service so if you see we have created this single service if you click on add services if you edit this thing we have this slot price over here we have the price per slot and you can see the name of this is this underscore app underscore price so copy this thing paste it to here and after that type in percentage asterisk one so basically multiply it by one if you don't understand anything don't worry just type in this thing that you see on your screen percentage meta colon colon underscore app underscore price percentage asterix one okay so basically just type in this thing if you even if you don't understand it now click on apply changes bring this thing just above this book now button now the button is fine but we need to change the text instead of book now it says make an appointment so we'll type in that thing click on this pencil button and here it says book now instead of this i'll type in make an appointment now click on apply changes so we have created this form now what happens when somebody you know submits this form so that we have it to your post submit action first we have insert appointment so edit this thing uh just make sure under user email we have this user email selected under phone we have user phone select that thing as well and rest everything is good as you can see under service id service side is selected under provider id appointment date everything is good so we can click on apply changes now below this thing i want to do one more thing i want to add another notification and i want to send email so if you click on this pencil button you have some options you can redirect them somewhere you can add the email to mailchimp you can do a lot of things i want to send an email and i want to send an email to this person who submits this form okay so what i'll do is i'll select mail to email from submitted form field so basically what i'm trying to do is whenever someone submits this form they'll enter their name email phone number so i want to send them an email wherein they have all the appointment details like this is the name of the doctor this is the consultation that you have selected for this is the time and date all those details will be mailed to them so under mailto will select email for email from submitted form field so whatever email they enter over here this detail will be sent to this email address under from field you have to select user email then you can type in any subject if you want now from name so it will be from your name so whatever your website name is so i named my website jetbooking if you remember okay and from email address so you can create an email address with your website name like info at blogdoot.com or whatever your website name is or you can just enter your gmail address all right now you need to enter the content that you want to send them for example i can type in hi username so you can get the code for username so it will say hi username so if the username is for example nayed sheikh so it will say hi nayashik instead of this code then after that you can type in something like you have successfully booked an appointment okay type in something like that okay and here are the details what service they have selected and to display the service name you can copy this thing service title thing okay doctor's name so just doctor and then after that provider title whatever the name of the doctor is okay date and time you can select this option appointment date and time okay starts over here ends at this place so this is the start time appointment starts okay this is the code for that and after that appointment ends this much is the code and okay so you can type in something like that thank you [Music] your website name again at bottom whatever your website name is okay so you can create your own form i've just shown you very quickly this is one example now click on save changes or apply changes and you have completed this thing now you can just go ahead and update this form so this form is created so similarly if you come back you we have one more form static page booking form but we don't have this single doctor booking form so we have created this form for single service if you go to single doctor we have another form over here okay we need to create this form so let me show you how we can do this thing come back to this forms now just to save some time what we can do is we can duplicate this form single service booking form duplicate it and here as you can see it is duplicated we have this copy you can edit this thing and instead of single service i'll type in single doctor booking form remove this copy from here first of all just update this thing now very first thing we have the is the service id this is not a service this is doctor so we'll change this thing instead of service id i'll type in doctor id all right click on apply changes then we have the heading let's see single doctor page now here heading says choose a service instead of choose a doctor so we'll edit the heading and we'll change the label click on save changes then we have the appointment provider here we this user does not have to select the provider they have to select the service now edit this thing provider id click on this pencil button now instead of appointment provider we want to display a radio okay so this is the radio style so we want to display this thing so we'll select radio and instead of provider id we don't want to display providers we want to display services so we'll type in services so under name just type in services now under fill option what you want to display we have to select post type so select these posts post type you have to select services now once you do this thing now click on just save changes that is done now here you can see it says services then another heading which is this heading this is fine choose date and time and after that we have this form now we just need to do few changes in this form so the title is good the heading is good under this appointment date edit this thing now because we have duplicated this form this form was created for service id so it was getting the current post id and for provider it was just displaying the form field but because this is for provider under service id we need to select form field and under provider id we need to select current post id so just the opposite because this is for some other post type and we need to select the services field okay so this is the services field we have named it services select this field now just click on apply changes now after that everything is same they will they will see this page break then they will go to next page and heading then username email phone total everything is same okay so we can just leave it as it is now what happens after they submit the form first you have to select this insert appointment and here you have to make sure that under service id all these things are selected select services under service id under provider id select this option doctor id because this is our provider then make sure under phone this phone is selected and under username all these things are selected now click on apply changes and with this we have completed this form as well click on update now again come back to this forms now finally we have this static form page i would recommend you to delete this thing now you can simply do one thing i have created my own custom you know static page form you can just import that and i'll show you later on in this video in fact at the end of the video how we can use that static page form because we are these two are the most important one that is just an extra form but i'll show you how you can use that extra form as well now first just import that form so as i said earlier there is a link given in the video description below if you click on that link you will be redirected to my website blog com in fact you will be redirected to you know one of this similar kind of post you will see the video that you're watching at top at the bottom you'll see this download free images button once you click on this download button you will download a zip file once you unzip that file you will see this folder in fact you will see all these images and you will also see this folder so as i said earlier i'll show you how to use this folder now in this folder you will see form and pop-up under form you will see this form is created static page booking form you need to import this form so come over here click on import from choose files and select that file that i've just shown you static page booking form under file under form and pop-up click on start import and now as you can see this form is imported we just need to make sure that everything is correct over here so if you see this service id if you edit this thing okay under post type make sure you have selected services and now click on save changes and provider id i think it's good right now if there is any problem with this we'll come back to this thing later on for now we can just update it and with this we have completed all technical part related to this website so we have created custom post types we have created these meta fields and we have also created these forms now only the designing part is left so let's see how we can design it so first what we'll do is we'll design these this archive page for services basically this page wherein we can display all these services and after that we'll design a single service page okay like this and then after that we'll see you know doctors archive page and single doctor page so let's first save department page or services archive page so for that we'll use these pages from the left hand side now click on add new and make sure you give some other title don't name it services if you name it services then your permalink as you can see at the right hand side if you see it will be serviced it should not be same if you remember we have named our custom post types also services so that could create some problems so just change this thing a little bit instead of services type in all services and make sure your custom url is also different i'll type in all services over here instead of services okay now you can do one thing under template make sure it is full with content layout and we don't need breadcrumbs so you can disable breadcrumb at the bottom use breadcrumb you can disable it and you can publish this page and now we can use elementor to design this bit so click on this button edit with elementor now here very first thing is we have this header section so we'll copy the header maybe this is our title so i'll copy it come over here click on this plus button and we'll add a single maybe let me do one thing let me first explain you this elementor thing what is this elementor how does this thing work so elementor is basically a page builder so by name itself you can make out that this is used to create and design different pages now how this works at the left hand side you'll see there are many different elements we'll use these elements to design all the other pages for example this is the page that we have designed home page you know service single page archive page all these pages are designed using this elementor page builder using these widgets and these elements at the left hand side and here at the right hand side you will see this is your canvas you will design that page and you will see that thing over here now we always design pages section by section so here if you see this is one section this header section then after that we have this services section if you see your home page for example now in your home page we have one section this is your header section then we have this department list section then we have another section and then we have the medical staff section so we have created several sections over here so to create a new section you click on this plus button and then you select how many columns you want in this section so for example if you want three columns you select three and now you can add different elements in these columns now whenever you select any column or any element now as you can see the left hand side settings change now it says edit section again if you want to go back to those elements you need to click on this nine dots icon if you follow my mouse cursor click on this nine dots icon you will come back to these elements now suppose if you want to add button over here you can simply drag and drop this button element over here so this is how the button element will look like now at the left hand side it says edit button now for every element you will see three options content style and advanced under content obviously you'll have to change the content like here it says click here if you want to type in something else you can type in type here or whatever you want you can just type in anything you want then after that you have style under styling you will change the color all those things so for example if i want to change the color of this thing style border radius all this thing if i want to give some shadow like this box shadow you can do that thing as well then we have the advance under advance you can control the positioning margin padding z index all the advanced things again if you want to come back to elements click on the nine dots icon maybe for the second option for the second column you want to use some icon you can drag and drop this icon element over here and again if you see at the left hand side settings string now it says edit icon whenever you want to do some changes maybe to this button you can just click on this button now it says edit button okay in icon also as i said earlier we have three options content style and advanced so here also as you can see you can change the icon maybe i want this icon you can now go ahead change the color to something else okay and after that you can change the size all these things all the designing part can be done from here so this is basically how it works now i'll cut this thing let me show you how we can create this design so very first thing that we want to do is we want to add a single row and a single column and we want this title over here our services now to display this title we'll use this heading element drag and drop this heading type in whatever your title is my title is our services now we'll go to style first we need to change the text color we have the text color option now the text color over here is this white color but if you change this color to white as you can see it will disappear because the background is also white so we'll change the text color later on first let's change the typography basically the font style so to do that thing you'll click on this pencil button and by default it is roboto i want to add some other i want to add material sense which is one of the best font families so if i search for material sense as you can see this is the one i'll select this thing you can see the style is changed now you can also change the size if you want to decrease or increase the size you can do it like this i want to keep it at 40 pixels you can also change the weight like you can make it lighter at 100 or you can make it bolder at 900 i want to keep it at maybe 800 then you can do some more things you can change the line height for line height i'll make it 46 and you can also increase or decrease the letter space like this if i decrease the letter space you can also make it negative so here as you can see it is negative 5. if i increase the letter space this is how it will look like i want to set this thing to negative 1.6 all right so this is how it works then we have let's see what we have next we have only this thing now we let's do one thing let's add this image in the background and add some spacing because here as you can see above and below this uh text we have a lot of spacing so for that we'll select this option six dots icon if you follow my mouse cursor this blue six dots icon which says edit section click on that now at the left hand side you will see this option go to style first make sure that this uh section is stretched because we have this image in the background so whenever you have anything in the background of any row or a section you should always stretch that section now go to style and let's add that image in the background so under background style just upload that image so we have already uploaded this image click on insert media you can control few things for example you can control the size you can control the positioning center center top center you can select all these things now let's add some spacing at top and bottom so this space at top and bottom for that we'll go to advanced and we'll add padding now first i would recommend you to dealing this thing because if i just type in anything if i type in for example 100 it will add 100 pixels padding from all sides top right bottom left everything so first make it zero and dealing this thing so we can add individual padding now i just want to add padding only at top and bottom so for top i want to make it 130 and for bottom i want to make it 265 or just 260. okay now because we have this thing in the background we can change the text color to white so click on text i'll click on this heading and change this text color to white all right this is how it looks like now let's create our next section and for this again we'll click on this plus button we'll add a single row and a single column first we have this setting so again we'll use the heading element drag and drop it over here type in whatever your heading is make it center align so change the alignment to center because here we have this text in center now let me copy the color code from here we want this color all right i have this color code now i can come back to this page we can go to style and we can change this color now what i'll do is i'll save this color code so that we don't have to copy the color code again and again we can just use it so to save this color code you can click on this plus button to create a new global color and i can name it maybe a dark blue color or whatever you want i'll just name it dark blue click on create now next time when you want to use it you don't have to type in this color code you can just click on this globe icon that this icon and you can see we have this dark blue you can just select this thing now for typography we want to again change the font family to matlsense so if i just search for martial sense and again what i'll do is i'll save this thing as well so that we don't have to do this thing again and again i'll make it default first and i'll change this thing click on this plus button i'll add this thing in my global font i'll type in matl sans now click on create so the font families martial since we want to increase the size to 36 or maybe decrease the size a little bit make it bolder at 700 and then after that for line height we can make it 46 it is not important line height is not really important you can leave it as well to default if you want and maybe let us spacing at 0.6 minus 0.6 then after that we have the listing grid this grid that you see at bottom now what i'll do is i'll use another row below this thing i'll add in a section below this thing to add this listing grid because if you see this thing uh the width of this content is very small we have a lot of space at left and right i'll explain you about this thing now when you add in a row you'll get two columns but i want only one column so i can right click on this edit column at the right hand side and i can delete this second column now we have only one column in fact i'll do one thing i'll bring this thing the header that we have just created inside this inner row now below this inner row below this title in the inner row we want to display these options basically we want to display this listing grid wherein we can display all the different services that we have created now for this you need to first create this single listing style let me show you how that is done so you can come back to your dashboard you will see under jet engine you have this listings option we'll be using this listings options a lot so first we need to design this single thing and after that we can use that thing in our archive page click on add new now under our listing source it will be post under post type it will be we are creating services so we'll select services now in the listing name you can name it anything you want i'll type in single listing grid all right so this is single listing grid okay this is the grid style that's why i'll type in this thing and click on create listing term so basically we have to create this one style and after that we can copy the same style for some other services as well so let's see how that is done click on this plus button let's add a single row in single column now first we have this image at top okay this image so for that we'll search for will come back to elements and search for dynamic image okay not the regular image we have to search for dynamic image which is this one drag and drop this dynamic image over here now what is this source by default it is getting the post thumbnail if you remember we have set this as a thumbnail we don't want this thing we want icon under services so now as you can see it will display this icon we want to bring it in center because as you can see everything is center line over here so we'll select this option alignment center then below this thing we want to add the title like this so for this also we'll search for dynamic field you'll see this option not here over here come back to elements and search for dynamic field this is the one drag and drop it at bottom now here as you can see it says plastic surgery by default because that is the service name if you don't see plastic surgery and if you don't see this image automatically shown for you you can fix this thing by clicking on this gear icon at the bottom left click on the settings gear icon click on listing settings make sure under listing source it is post under post type it is services and also make sure this is clickable okay make cl make i make listing items clickable make sure it is cs now update this thing now select this option that we have just created we have just used so here as you can see this source is post term and we have selecting the title field okay if you see this thing we are selecting the title field of this thing so this is the title plastic surgery so this is working we need to design this thing so go to style uh first make it center so with the widget item center now change the color to this is that gone here it is all right not back so the color is this dark blue color that we have already saved so we don't need to type in that color code we can just click on this globe icon and select this dark blue color color is changed for typography also we don't need to select that thing we can click on the globe icon we can select material sense this that is also changed now we can just change the size and all so for this i'll make it 18 pixels weight will be 600 so a little bit bolder and rest everything looks good if you want you can decrease the line height for this i'll make it 30 pixels so by default it is em selected if if you see something like this just select px from here pixels okay then after that we have this summary at bottom so this is basically the excerpt so if i open this if i just open this thing i'll show you this excerpt if i click on edit post so this was the title that we have just added we have added the uh icon at the right hand side if you remember we had added this excerpt now we want to display this thing okay so we'll come back to this page come back over here again search for dynamic field and drag and drop it over here at bottom now under object field you have to type in you have to select this excerpt okay this is displaying now go to style and we want to make it multi-line okay in display type in multi-line because you want to display this thing in multiple lines so select that option now we need to change this color to this light blue color so if i right click on this just to get the color code you can see this is the color code copy this thing zero seven seven nine five so i'll save this color code as well because we'll need this thing in future first i'll paste in the color code then i'll click on this plus button maybe i'll type in light blue or you can just type in the color code name click on create okay so this is change again typography will be metal sense you can change the size and all i think size and all looks good we don't need to change this thing now you can click on update now finally let's select this row click on edit row and let's add some padding from all sides so if you see we have a lot of space at top left right and also at bottom so let's add that padding come over here go to advanced under padding first delete this thing and type in 60 for top 40 for right zero bottom and 40 left so basically 40 pixels left and right 60 at top and zero at bottom now there's one more setting when somebody hovers over this so when someone brings their mouse cursor on this you can see this border shadow okay this box shadow so let's add that thing as well so for that you will go to this option style you will see border and you will see this box shadow but first select hover because we want box shadow only when somebody hovers over this option so select hover then enable box shadow and after that you can change the color for the box shadow and so on so maybe i'll select this color if you minimize this thing this is how it is looking all right update this thing now once it is done you can again come back to this page that we that we are creating this archive page first of all make sure to refresh this page now here select and search for listing grid this is the one bring it over here at bottom now select the listing that we just created so here as you can see this is the listing we named it single listing grid okay as you can see if you come back you will see that thing let's come back to dashboard so we named it single listing grid as you can see if i again come back okay so yes you can see single listing grid so you need to search for this search for single listing grid this is the one select this option now here as you can see okay we did not make this thing uh center align let's very quickly fix this thing click on edit with elementor this excerpt we did not make it center line select this excerpt and let's see go to style and make it center align okay fill content alignment make it center update this thing come back to your archive page update it and after that it will automatically work if you just refresh it and now as you can see when this is center now select this listing grid and make sure we have selected three columns okay so under column name we have three column number we have three because we have three columns over here like this notice everything is good just make sure to do one thing uh we need to have this style so we need to bring this thing at top also we need to add some spacing at top at bottom and we need to bring the we need to change the background color to white so that we can have a style like this let me show you how that is done first of all let's change the background color of this page to gray color so if you click on this thing gear icon go to style here as you can see background type change this background color to f5 f5 f5 okay so this is the page background color f5 gray color very light gray color now select this inner row that we created you'll see this option edit in a row six dots icon and change the background color of this inner row to white so go to style and background type change this color to white ffff okay you can see the changes over here background color is white now let's add some spacing at top and bottom so go to advanced add some padding at top and bottom in fact we can add padding from all sides because here from left and right also we have added some space if you see so we can type in 80 at top maybe then after that we can type in 100 from right 90 bottom and 100 from left so basically hundred left and right and 80 or 90 from top and bottom okay now once you do this thing you can we have to do one more thing we have to bring this entire section at top okay like this okay so for that we can use margin we can in fact use negative margin so select margin and under top margin type in 150 it will bring it down so to fix this thing before 150 type in minus now it will bring it up so it is deleting 150 margin from top and it is bringing this thing up now we can update this thing okay so this is how it is looking and whenever you create any page using elementor you should always see how that page is looking on a mobile phone just to make sure your page and your website is 100 mobile friendly so to see this thing you will click on this responsive mode icon at bottom left click on that select mobile phone now this is how it is looking because we have used a lot of padding it's looking very bad so let's fix this thing now first of all i want this heading in center for mobile phone so i'll select this thing go to style and not style over here in content in alignment as you can see and also make sure your phone icon is selected so that these changes you know take place only for mobile phone now alignment i'll select center now select the title uh before title let's select this inner row this is your inner row as you can see in a section click on this and let's get rid of all the padding in a row maybe this is the inner row yeah this is the inner row so when once you select the inner row here as you can see it says edit in a section you'll see padding over here make it zero we don't want any padding now this is fixed now select this listing thing and under column number for mobile phone we want only one column per row okay now it is also fixed so for mobile phone it is okay not not this for mobile phone it is one and for desktop it will be three so update this page again if you come back to your desktop mode click on responsive mode it is still good here we have still three columns but if you go back to mobile phone here we have one column per row so we have fixed this thing now it is 100 mobile friendly come back to desktop and with this we have created our archive page you can come back to your dashboard click on this thing exit to dashboard now come back to your main dashboard if you want to see this page if you open this all services page in a new tab this is how as you can see your page is looking if you click on this plastic surgery still as you can see it is looking very bad so we have designed the archive page now let's design the single services page all right this page right now if you see over here the department's archive page basically the services archive page and also the single service page looks very similar let me open a single service page now here also if you see at top we have a title then in the background we have this image and then we have this design this thing comes at top and all these things okay here also in the archive page also it is very similar we have a title in the background we have this thing then we have this negative margin so this section comes at top so what we can do is we can copy the design that we have just created the services archive page and we can use this on a single service page and after that we can create other things that are required so let me open this plastic surgery and let's see the design let's create a similar design so again come back to pages select this option all services click on edit with elementor let's just copy the design save this design now to save this design you can click on this icon save option at the bottom left click on save as template and you can name it anything i'll name it services archive after that click on save now once it is saved we can now come back to this pages option exit to dashboard now to create a single service page or a single doctor page we are not going to use this regular pages option okay we are going to use the theme builder and that theme builder is under croco block so under crocker block you will see theme builder click on that now you have to select this option single because we are creating a page for a single service or a single doctor page so select single click on add new make sure under type it is single you can name it anything i will name it maybe single service design so it is single service page design click on create template now let's import the design uh archive page design so you can click on this button add template go to my templates here you will see the archive page design that we have just saved now click on insert and this will be inserted over here now i thought we just had a regular title regular text which says our services now instead of that we want a dynamic thing so if somebody is seeing the plastic surgery the title will say plastic surgery if somebody is seeing some other um department it will say the title of that department also instead of this regular image in the background it should display the featured image so if you open this post in a new tab you can see the right hand side we have this featured image and this image will be shown over here in the background at top okay so we have to make this image also dynamic so to do this thing let's first add dynamic field just below this r services thing now what you want to display over here now by default you know it is saying hello world so what we need to do is we need to change the preview settings click on this gear icon uh select conditions and under general select singular and what singular post type you want to select so we want to select post type and now we have to select the post type of services so we are creating we are creating a design for singular post type of services now publish this thing still it says hello world so once you refresh this thing it should be fixed right now once you refresh it now you can do one thing you can again select this gear icon and under preview uh just select any uh just select this services option so that the services are also previewed and you can select the plastic surgery that we created all right click on update again just refresh this page and now as you can see instead of hello world now it says plastic surgery or whatever the title is whatever the title of that post is now let's design this thing so we have to design it like this very similar design so go to style first change the color to white and after that we'll change the typography to martin sans and you can change some style you can increase or decrease the size will make it 36 700 weight and minus 0.6 all right now once you have this design you can now delete this top text now we have this text now for the background as well select this edit section right now we just have a regular image we want to make this thing dynamic so we can delete this image and click on this dynamic tags if you follow my mouse cursor click on this dynamic tags select custom image now click on custom image and select this field select post thumbnail okay now it will display the post thumbnail basically the featured image of this post all right now you can click on update again so we have completed the top section now let's come over here so the design and everything is good i don't want this text title and i also don't want this thing okay this post grid now instead of that we want to display first of all this consultation text so we'll come over here if you don't remember what your text and all was you can go back to edit services you can edit services and you can read and you can see all the names of these text so first we want to display this consultation text so we'll come over here again search for dynamic field drag and drop it over here and here's here it is displaying plastic surgery we don't want plastic surgery we want that consultation text so you can select source metadata and you can select that data so under services you should see that thing here it is as you can see consultation select that and now as you can see it says plastic surgery consultation you can see that thing over here so this is displaying the dynamic data now let's design this thing as well so the color is this dark blue color it is smarter sense and you can increase the size to maybe 35 36 make it a little bit bolder if you want now we also want to do one thing we want to display two things in one single row so we have to decrease the width of this thing so to do this thing we have to go to advanced change the positioning you will see this positioning option select that under width select custom and under custom width select percentage and make it 40 percentage now this is 40 percentage after that this text this will become 60 percentage and this will be our description one so if you see this will this text this description one text we will show that text over here so again search for dynamic field drag and drop it over here now again select metadata and after that select a description one all right now go to style go to advanced under positioning make it custom and this time select percentage 60 now this is how it is looking again you can go ahead and design this thing you can change the color to light blue you can change the font family to material sense and increase or decrease the size then we have this thing we have the gallery so to display that gallery again we'll search for custom field or basically dynamic field drag and drop it over here and again select metadata and instead of this thing we want to display let's see now we want to display this gallery now once you select gallery it will just display the some number like this what we want to do is we want to filter the output we don't want to output the number we want to output the exact media file so we'll select this option filter media output make it yes under callback you have you will see at the bottom okay i think you cannot see this let me decrease the size okay at the bottom you will see here it is at the bottom you will see images gallery grid select that option now for some reason if you don't see this thing let me first again come back to 100 now change the column to two we want only two columns update it now for some reason if you don't see this images gallery grid at the bottom you can go back to your dashboard now under jet engine click on jet engine and over here make sure this thing is enabled grid gallery for dynamic field widget so once it is enabled you will see that option okay images gallery grid now at the bottom we want to display our description to which is this thing we want to display this thing at the bottom so for this again we'll come back to this option and you can you use again that dynamic field but in dynamic field we cannot make it two columns let me show you so if i again drag and drop the dynamic field again we'll select metadata and we can select description two so this is good but we cannot make it two columns i want to display the same text in two columns like here as you can see two columns so what we can do is delete this dynamic field instead of this you can use the regular text editor drag and drop this text edit at bottom now instead of this text we can again display dynamic text so i want to display that description to text over here so we can go to we can click on this dynamic tags and we can select custom field and under field you can select description too okay you will this it will display this description and now you can change this thing column you can see columns make it two columns now as you can see this text is now displayed in two columns you can go to style you can change the color to light blue you can make it metal sense you can increase or decrease the size whatever you want to do it you can now go ahead and do that now let's update this page and finally if you see again uh let's do one okay we cannot do that we'll see that later on now let's do one thing let's add this thing at the bottom this form so for that we'll do one thing we'll add a new row and inside that again we'll add another inner row so select this in a row and again in this inner row we just want one single column so we can delete this second column now for the main row select that and change the width to one one seven zero basically eleven seventy pixels one one seven zero now select the inner row and make it 560 width okay because if you see the width content width is very small we have a lot of space at left and right so that is why 560 okay now let's first add this header so click on this thing use this heading drag and drop it make an appointment make it center align change the text color to dark blue change the font family to martel sans now you can go ahead increase or decrease the size make it bolder and all so all these options are available i'll make it 700 maybe then after that we have this text i will copy the text this is just regular text not dynamic text so we are just you know pasting in this text now make it center change it to light blue and material sense you can change the size and all now below this thing we need to display this form and now we need to style this form so first you have to search for form element which is this drag and drop this form element at bottom now by default you will okay first of all we have to select the form now this is the single service so we have to select that single service form search for that here as you can see single service booking form select this now this is how it will look by default very bad design so we have to do a lot of designing over here to make it something amazing like this one so let's do that so first of all uh instead of submit type reload we don't want this thing to reload we want to make it ajax okay now go to style let's do this styling let's start with this thing the heading okay choose a doctor and choose date and time let's start with that so select heading now under heading change the color to okay where it is here it is change the color to that dark blue color now make the typography metal sense now change this size to maybe 24 a little bit bolder so 700 now let's add some space okay so we can do one thing we can use this space and what we want to do is first of all make sure it is d-linked now from top i want to add 30 right inside we don't want any uh gaps so we can make it zero bottom you can add a little bit gap so maybe 10 so below this thing and at left make sure it is 50. everything will be 50 so that everything is properly aligned so make sure first of all this is 50. now let's select this field this field that you see let's design these things to select this field again for this also typography will be martel sands you can change the color and all color let's see okay we have this light blue color let's select this thing now place folder color also you can change if you want some other color now let's set the padding so for this padding will be 14 from top 10 at right 13 at bottom and 20 from left now margin now margin will be 50 from left first of all so that everything is aligned properly now we also want to add 50 at right and from top and bottom you can add maybe just five okay now border radius you can increase or decrease if you make it 50 for example this will become circular like this as you can see if you make if you want to make those corners sharper you can make it zero so i want to keep this border radius at zero now finally let's select this option at the bottom we want to select this calendar so you will see appointment calendar select that option and the width of this calendar i want this to be 460 pixels okay a little bit wider padding will be 10 from top and bottom and 20 from left and right like this now it's time for margin margin will be 5 from top and bottom and 50 from left and right now on the calendar we have a lot of things for example the very first thing is this header so you you see this thing september 2021 whatever the that is your header so for that whatever color you want we want this dark blue color i think that is okay not the background color let's let's make it default okay we don't actually have that dark blue color we have this light blue color so i had a text color under this select that light blue color and under typography obviously it is material sense and we can increase the size of this thing to 20 pixels make it a little bit bolder at 600 then we have week weekdays and names so this monday tuesday these things so for this also it will be martial sense i want to do one more thing i want to make everything uppercase if you see over here everything is uppercase so we can change the transformation to uppercase change the size to 12 make it a little bit bolder and let's add some line height so that we have some space at top and bottom of each of these numbers so under line height first select pixels px and type in 16. now as you can see top and bottom we have some space then after that we can also change the color let's see the color the color is this blue color dark blue color select this and let's add a gap of 15 pixels now it's time for these numbers weekdays are basically the dates for this also the typography will be metal sense if you want you can obviously have some other typography size will be 16 and let's make it 600 and let's add some line height of 24 very important now let's also add some gap between these options so under vertical gap type in 20. now as you can see we have nice amount of gap between these options then after that we have this slot so if somebody clicks on first they if somebody selects any doctor and after that if if they select any date then we see the slots and this is how the slots are looking right now so let's fix this thing as well first let's uh dealing the padding for top and bottom i want to make 30 for top and bottom it will be 10 left and right just leave it as it is 0. typography you can change this thing to matl sense and let's see the color okay let's select some let's see the color for this because the color is this thing right now let's add some padding so from padding top will be 6 right 10 bottom 4 and left 10 also let's add margin margin of 5 pixels from all sides we also want to add this border as you can see so let's add border type will be solid 1 pixels all right you can change the color if you want now let's select this button next button so you will see next page button select this all right background color is this dark blue color like this then after that we have the text called text color is white so we don't need to do anything change the font family to material sense also increase the size of this thing let's make it 16 pixels wait let's select maybe 600 or 700 and line height of 24 now it's time for padding which is more very important if you first make it 0 now padding from top and bottom will be 18 and from left and right it will be 50 and we don't want any border radius so make it 0 so that we have sharp edges and let's add margin left 50 just to bring this button in this thing and let's also add some margin at top maybe 20 pixels right and we have one more thing we have this shadow in this calendar so we did not add that here it is appointment calendar make sure to add that shadow here is box shadow all right change the color if you want all right update this page let's see how it is looking till now all right so this is how it is looking as you can see much better now we have a few more things if you click on this thing for example if somebody selects this thing then they click on next then this is the style let's see how this is looking right now for this i'll have to go to my home page actually let's go to all services page and if i select a single service plastic surgery all right so as you can see everything is working we have the title uh consultation text everything is working properly we also have this form so we have designed it till here if i select a doctor then we select some date then some timing some slot okay i'm seeing one thing that when we select some slot this style should change like we have over here okay as you can see when i select this slot uh the color changes to this orange color so that we know that this is selected but here when i selected anything it does not happen so you can come back and you can go to slots which is so here and under active you can change the color to maybe this orange color let's see this color copy the color color maybe just save it orange and also you can change yeah rest everything looks good maybe over here as well under border color we can change this thing to this orange color now click on update now let me try it again refresh this page select some doctor very quickly a date okay it should be under active is selected okay so under active week i think we have to you know get back to normal let me actually yeah okay we don't have to change this color border color only this color at top okay under active so let me again refresh it so let me again refresh it and see it again select any date all right normal when i select now as you can see it is working when i select that active now when you go to next you can see this is not properly designed it should be like this so we again we have to design this thing and after that we have to design this these fields and then we also have to design this calculated thing which is this and at the bottom this button so let's very quickly do that now we have already designed the heading so heading is looking good fields are also looking good only these two things are looking bad the calculation and this button so first let's select this calculated fields now change the typography obviously to martin sans change the size as well we can increase the size a little bit maybe 20 pixels make it a little bit bolder at 200 and line height of 20. you can also add some margins so that you know we bring this thing and we align this thing properly so we have to add that 50 margin from left alright so under margin left we'll type in 50 and we can also add some margin at top and bottom so above and below this calculated text we have some space so for margin top and bottom you can add maybe 20 or 10 pixels and color of this text will be this blue color as you can see dark blue color so change this color to dark blue now select this thing then after finally we have this submit button to select this button background color will be this dark blue color text color is fine it is material sense increases size of this thing to 18 now let's change the padding so padding will be 18 and 50. so basically 18 from top and bottom and 50 from left and right and margin again left 50 so that it brings it like this and okay i just noticed that the color is actually this orange color and the hover color is this color so the color will be this orange color and when you hover over that button it will become that dark blue color all right now i think it looks good border radius let's make it zero update let's try it again come back refresh this page now again let's select some doctor okay select a date on next okay now as you can see this is working right now somebody can enter their thing and they can book an appointment now just few final things are left let's add some spacing at top and bottom so select this inner option in a row or maybe let's add that under main row yeah let's select this main row and let's add some spacing at top and bottom so basically some padding at top and bottom maybe 90 pixels both from top and bottom and as i said earlier whenever you create any page you should always see how it looks on mobile phone so let's see responsive mode mobile all right so this is how it is looking we need to fix this thing title is good but i want to make it i want to bring this thing in center for mobile phone again make sure this mobile icon is selected now select this consultation and go to advanced for positioning for mobile phone we don't want to make it 40 60 so select this thing go to positioning and for mobile phone make it full width all right select the second text go to advanced positioning okay here it uh okay here it is select this and for this also full width for mobile phone now for gallery and all if you want to change this thing for example for description two uh let's see we don't want uh two columns we just want one single column all right and for this also gallery also i think you can make it one column so in mobile phone this is how it will look if you scroll down now select this option this form go to style first of all select field okay first let's start with heading select heading everything will be good just fix the gap now under gap type in zero we don't want any gap now select the fields again under margin type in zero fixed now select the calendar which is so here appointment calendar we had set this thing 460 pixels for desktop now for mobile phone i want to set this thing to percentage and make it hundred percent okay and no margin so zero margin now as you can see it looks much better and button you can select submit button and next page button and you can again remove the margin right and now as you can see it is looking so much better on your mobile phone if you want to add some custom padding and margin obviously you can go ahead and do that one more thing i don't think we need this much space at top and bottom for mobile phones so you can go ahead and maybe you know 75 at top and 100 at bottom not 100 maybe 125 or maybe 150 at bottom all right so this is how it's looking maybe 50 at top end 178 bottom so you can see this thing you can control it yourself you can now design this thing update it again come back to your desktop and with this we have completed this thing as well now we can come back to our dashboard now let's try to create another service and let's see so this is working for plastic surgery and let's see whether it is working for some other service or not so click on add new service let me go back to my demo website go to departments let me create a new service maybe for maybe for neurology so i'll copy the title paste it over here then this is your description one let me copy everything [Music] paste it under description one copy your description to paste it under description too then we have the consultation text okay of media files gallery basically your so select these two images click on choose file price price slot maybe 15 featured image let me select this featured image this time let's see for plastic surgery we had this featured image so i'll select this one this time okay some other featured image is to see whether this is working or not now let's see we this is your excerpt related doctor we can select a doctor for this we had created one doctor i think alan what is the doctor name let's see okay anna so we can search for that okay here it is and it is created now we can publish it now let's see let's go to our services page all services page let's see whether this is displaying or not okay so as you can see this is displaying but i think okay i uploaded this thing not this one we have to select this icon this image and under gallery we have to select those two images let's update it again let's try it come back over here refresh it now fixed now let's see if we click on neurology we are redirected to plastic surgery or neurology so if i click on this now as you can see in the url bar we are redirected to this now the title is automatically changed consolidation text all these things are automatically changed for you okay so this is working now let's see till now what we have done let's see the progress so we have created first we started with the custom post type we created two different custom post types one for department and basically one for service and one for doctor then we added all the meta fields then after that we created the forms and after that now we have designed these two things for departments for services so we have designed this services archive page and also the single services page now similarly we have to design doctors archive page when we can list all the different doctors and single doctor page now i don't want to show you the same process again and again because we have already seen this thing in complete detail for services so i don't want to do the same thing for doctors so now what we'll do is just to save you some time i'll give you all the files so you can just import them and after that i'll show you how you can fix them so do one thing come back to your dashboard come back to your main dashboard right now first let's see the archive page for doctors this is how it is looking as you can see very similar design now if you remember in the departments or in this services archive page first what we did is we designed this single thing single service grid similarly we have to design this single thing okay this single doctor listing but as i said earlier you don't have to do that i'll just give you a file you'll have to import it and i'll explain you how things work so first let's import this file so come back to dashboard now that thing was under listings if you remember under just jet engine listings okay this was the one single listing grid if you want to confirm this thing you can edit this with elementor to see that this was the one all right so as you can see this is the one okay for for this one now we have to similarly create for this one so you can simply import it you can click on add new first of all you should see this is the post type post type should be doctors this time not services and this will be single uh doctor uh grid design maybe all right now click on create listing now we don't have to do it from scratch again we'll just import the file so click on this add template go to my templates and you need to import the file so click on import select file and that you will see under this folder listing templates and this is the one and you have to select this one single doctor list okay i should name it single doctor grid all right so this this one single doctor grid select this click on open now once it is imported this is the one you can insert this file click on yes all right so as you can see this is how it will display select the second one and under meta field we want to display the consultation so under doctor okay thing not consolidation i think speciality yeah let's see yeah this is the one and if you don't see anything like this again you can go to this gear icon under listing settings make sure post type is doctors and yeah just make sure this post type is doctors and after that you can update this thing so very simple we have used a dynamic image and we are displaying the post thumbnail then we are we have used a dynamic link and we are displaying the title and also the link so very simple thing we have already seen these things you know multiple times and finally we are displaying metadata so under again dynamic field metadata and we are displaying this speciality metadata so simple thing now once you do this thing you can now come back to your dashboard now we can import the archive page for doctor so we can use that pages regular pages thing we have used the regular pages to create all services so let's create all doctors all doctors so again give it a title of all doctors now template will be full with layout and we don't want breadcrumbs so disable that and publish this page now again edit with elementor and we have to import that file archive page file so click on add template go to my templates import that file let's try it again select file it will be under let's see pages yeah doctors archive select this click on open now let's insert this thing dr archive page insert that thing now here it says all providers instead of all providers if you type in all doctors you can do that now by default is not displaying if you click on this thing at bottom we have to select the listing so the listing that we just created was so the listing that we just created was single doctor grid layout here as you can see single doctor grid design that we just created select that and now it will display this thing now you can update this thing again come back to your dashboard now let's let's see the design for single doctor so if you go to all doctors it is just a regular page so this is working but if somebody clicks on single doctor the design is not present so let's design the single doctor page so again come back to your dashboard and if you remember for single pages we have to use theme builders under croco block use theme builder go to single earlier we had created single service design now we have to create single doctor design so give it any title and click on create template and again let's just import that file so click on add template go to my templates and import that file this is also all under pages single doctor page okay so single doc page open it now let's insert it so click on insert single doctor page make it yes now here you have it now if you see some options like this if they don't display properly just click on them and make sure you select the right thing so click on this thing custom field is selected click on custom field and select your own field so we have to select the speciality field then select this expertise field now as you can see that data is displaying select this expert is again custom field and under this we have to select it to expertise that we created now length of work custom field and here you have length of work select that email so select this email under meta field just select that email under doctors then on phone select this meta field and it will be phone under doctors now certificates click on this under meta field select certificates under doctors it is also displaying now for specification uh first the rest everything is working select this form first this was single doctor form that we created so select the single doctor booking form now we have to design this part if you don't want to design it you can just add that 50 pixels thing okay this is check box so select check box and margin left if you type in 50 this is how it will look like if you want you can you know do some changes you can increase the size you can change the typography to material sense you can increa change the color to maybe dark blue uh increase the width increase the size all those things maybe let me increase the size a little bit all right you can do it like this click on update now this repeater was left so if you select this repeater now as you can see for repeater also we have to import some listing so again come back to your listing under jet engine click on listings and import another file under post this will be doctors because we are creating single doctor page and this is what let's see so this is all specialization so i'll give it a title of specialization list now click on create listing term and again we don't need to create it we just need to import it now once you do this thing click on add template my templates and import that template that is given to you let's see this will obviously be under listings so listing template here is specialization open it and here it is import this one yes now if you don't see this thing you need to do few things first of all click on this gear icon under listings we did not had this underscore before specialization you can check this thing if you want you can go to your dashboard and under doctors if you click on add new doctor here as you can see it is just specialization no underscore before that so let's remove this underscore before it from here all right so this is the first thing you have to do now if you click on this option you have to select the source so we have to select metadata not metadata we want repeater because this was a repeater field but i don't see repeater option for some reason let's actually update this page try to refresh it again click on this option and now as you can see we have this repeater field click on that and now under custom meta field instead of specialization we have to add this thing as you can see because we want to display this list the name of this list is qualification so add this qualification over here and now as you can see it is displaying now we can update this thing so this is fixed now we can come back over here refresh this single doctor page just this thing was left again scroll down and this time you will see that specialization search for that here it is against the specialization list select that and here you have it now you can update this page and we have now successfully created this thing as well alright so with this this is also completed again come back to dashboard and finally let's create our home page so click on pages add new give it a title of home and make the template full width content layout and disable breadcrumb at the bottom publish this page now let's set this page as our home page so come back to your dashboard all right right this is just a regular page right now if you open this in a new tab it is as you can see your website name slash home if i click on jet booking i'm redirected to some other page so this page that we have just created is just a regular page we have to set this page as your home page and for that you need to hover over settings click on reading and over here you will see your home page displays we have to select a static page and we have to select the page that we want to display as our home page now again if you come back to this page and refresh it that slash home will be gone and now as you can see if i click on jetbooking i'm still on the same page so this is set as your homepage if i go back to pages you can see now besides home it says front page now we can edit this home page and again we don't need to design it from scratch i'll just give you the file you can import it so click on edit with elementor let's see how we can import this entire page over here come back click on add template go to my templates click on import it does not work sometimes so let's try it again now go to pages folder and select home page jetbooking click on open now let's insert this page and here you have it your home page let it load now departments is not showing if you click on this thing we have to again insert or we have to import a list to show this department type let's see some other thing medicals for for this doctor we have created this design so we can use this design if you remember we have created that listing search for that it was this single doctor grid design so we can use that design over here and if you want to instead of this list instead of this department list if you want to use that to us that department grid services grid list you can use that thing as well for example if i click on let's come back if i click on this thing edit section and you can search for that services grid that we have created remember the title a single doctor grid design that we created for services pages okay not doctor single service it was i think it was this single listing grid yeah so if you want to design if you want to display this thing under departments you can do that or if you want to have a style like this then let me show you how you can do that let me get rid of this update this page again you have to you know import some thing from here under listing click on add new this is this will be under services let's give it a title of departments list all right now click on create listing term and import that thing so go to my template import it it will be under listing here you have it departments listing open it now insert this thing click on yes all right so as you can see this is how it's looking just make sure under gear icon post type is services yeah if you click on your rest everything is good just update it now again what is the title department list if you search for department list here as you can see we have this thing this is how it is working now you can update this page and with this you have also created your home page and we have already seen if you want to change some title some subtitle you know all these things can be changed from here if you want to change this thing now for example if your address you can just click on this thing instead of this address if you want to type in something else just type it like this same for phone number just change the text now the right hand side we have this map you can delete this map right click on that and delete and you can use the google map over here drag and drop this google maps at the right hand side and enter your address for example if i just enter mumbai you can enter your exact address i want to zoom in a little bit let's see yeah so you can zoom in zoom out you can change the size and all if you want to bring this thing in middle you can do one thing click on this thing uh edit section and go to vertical align make it middle okay now as you can see it is looking like this update this page so this is how this home page is created now finally again come back to your dashboard now we've created everything except for two things our header and footer so if you come back to your website okay okay we did not stretch this section i guess let me again click on edit with elementor for the home page whenever you use anything in the background always make sure to stretch that section okay like this click on edit section and stretch it here also we have used this image so edit section stretch this section update the page and page layout will be full width content template update this page and again come back to our dashboard let's try it again refresh it all right now it's looking much better now only your header and footer is left so as you can see header is looking bad so we need to fix that thing and at the bottom we don't have any footer so we need to add an header and footer like this one now again for this also you don't need to do that i've just given you the file you can use it on your website so for that again come back now for header and footer also we have to use this option croco block theme builder so as you can see for header for footer for single page for this thing we have to use this theme builder now go to header import this header click on add new header give it any title i'll just name it header click on create template now import this template go to my templates import the header template you will see that under this folder header and footer so select header click on open now let's insert it so click on insert yes all right so this is how it is looking okay we did not first we had to create a menu so that we can display that over here so let me actually come back to our dashboard let's first very quickly create that menu now to create a new menu you can hover over appearance click on menus let's give this menu some name i'll name it main menu click on create menu now whatever link you want to display so i want to display all doctors all services page then maybe my account page now in the my account page your customers and patients can go to this page my account and they can see all the services they have booked all the appointments they have booked they can see all the details related to that if you want to display a few single services as well you can you know click on this screen option and tick mark doctors and services and if you want to display any single doctor or single service you can take mark that thing maybe service also right so you can add these things in your menu make sure to always tick mark this thing main at bottom and click on save menu now come back to this thing click on menu select your main menu from here if you don't see it first publish it we'll need to refresh this page right now as you can see your menu is automatically displaying now if you want to change this logo med center instead of this if you want to upload your own logo delete these images and just upload your own logo images if you want to change the time click on this thing instead of this time just type in whatever your time is instead of this address just click on that address and as you can see it is very easy now we don't want this button so i'll right click and delete the button and for text click on this text and whatever you want to type instead of this type in that thing and go to advanced i've changed the positioning for this in fact not the position in dynamic visibility for this so you can do one thing just make sure dynamic visibility is off for this text call for appointment and also for this text your phone number instead of this phone number type in your own phone number go to advanced and also for this dynamic visibility make sure it is no update this page again come back to this thing come back to your dashboard and now let's create a footer so come back again now click on footer and add new name it footer or whatever you want click on create template now similarly just go ahead and upload or just import your footer so click on this folder my templates and let's try it again import that file footer file footer jetbooking open it once it is imported you can just go ahead and insert this footer file over here now the departments click on this and select that department's menu department list and three columns we want to display so you can select display those departments over here now these are just links that have created about page for you know you can change the link if you create some other page maybe for example if you want to display my account page over here change the text to my account and under link if you just search for my account you will get your my account link here as you can see select that thing similarly for this thing just click on this image and delete it upload your own logo at the bottom we have the copyright text click on that instead of 2020 i'll type in 2021 made by neishik or whatever you want you can type in that thing then at the right hand side you have the social icons click on that instead of this enter your own youtube link facebook link instagram link or if you want to add facebook link click on add file and you can add those links as well okay now let's come back to our website let's see whether this footer is working or not okay so as you can see this footer is also working now at the end we need to do one thing let me show you that thing if i click on all doctors it's good if i click on plastic surgery single service okay so on some pages as you can see we have this breadcrumb at top i don't want to display that if you open a single doctor i think over there also we have as you can see we don't want this thing if i open the my account page i'll explain you about the micron pages well we have these things so let's fix this thing so to fix this thing you need to click on customize now under customize we have many options we have to select let's see let's select general site setting and under general site settings we have a breadcrumb disable that thing just untick that thing that will be disabled and now as you can see that is gone publish it i want to do one more thing we can come back and we can change the background color so click on colors and here you have the background color instead of white i want to make it f5 f5 f5 this gray color okay if you don't want to do that obviously you can just leave it and cut this thing now finally let me show you a demo appointment looking how a person can come to your website they can book an appointment so let's see let's select a single service so let's select plastic surgery for example if somebody wants to book this service they can go select this form they can select a doctor then they can select some date select this slot click on next enter their name so i'll enter john doe for example enter some email phone number then they can see the price and all they can click on book an appointment make an appointment and they will be redirected to the checkout page because we have enabled woocommerce we want to we want to accept online payments now here this person will enter their details very quickly address and all city name pin code phone number okay some phone number and now they can see the date that they they have selected the service they have selected uh time and everything they can see over here if they want to make payment through credit debit card they can select this if they want to make payment through paypal through raiser pay upi payment get you or if they want to pay on cash on basically cash they can select that payment option and they can click on place order once they click on place order they will see the order details okay so basically this is the order details and they can see the appointment service appointment date and so on and if they go to my icon page they click on orders they can see those details as well over here if they click on view as you can see when this appointment was booked for what service for what date and how you will see let me show you that thing if you come back to your dashboard you will see that thing under orders or maybe not on under orders let's not go to orders first let's go to appointment so if you see appointments option you can see that you have a new appointment now you can see the status is pending because the payment is not made you can see that thing you can see all the details if you click on this i icon you can see status is pending the service was plastic surgery doctor's name date what slot is selected you know user id now another person cannot select this same slot because this person is selected or if you have you know increase the number of people that can select the same slot then that is different case now you can also see the related order so related woocommerce order so you can click on this thing to see more details about this thing so here you can see that this person has selected payment to be made on delivery or payment to be made on arrival basically so this person has not made the payment now if this person had made the payment using you know raise a pay using credit debit card or paypal or anything it would say that this payment was made and you would see all the payment details like the transaction number payment method used all those details now you can finally go ahead and change the status to completed and click on update now again if you come back to appointments refresh it now the status will still be pending because that is not related to payment here we have already seen option related to payment this is because this is a future date and time so when this thing completes when this future date and time completes then the status will be completed you if you want you can see the timeline or at what date at what time this thing was selected you can see the calendar view okay here as you can see on 16th some you know appointment is booked so this is how this entire process works and with this we complete this tutorial i hope you guys find this tutorial helpful i hope you have learned something new from this tutorial now if you find this video helpful make sure to subscribe and click on the bell icon so that you don't miss any future notifications if you like this video give a thumbs up to this video share it with your friends on facebook twitter whatsapp whatever social media platform you use and throughout the video if you have any doubts any comments any suggestions for me you can always leave them in the comments section below and finally thank you so much for watching this video see you in the next one

Channel: Nayyar Shaikh

Views: 23,700

Keywords: wordpress, wordpress appointment booking, wordpress booking, wordpress booking plugin, jetappointment, jet appointment booking, wordpress appointment plugin, booking plugin wordpress, how to make appointment booking website, how to make appointment booking website with wordpress

Id: --MJb-nMGuc

Length: 149min 27sec (8967 seconds)

Published: Mon Sep 13 2021