In this video, I show you how to create a booking system in WordPress where you can choose a service, a person that will provide the service, a date, timeslot, store some information of the client and let the customer pay immediately. We will do it using the plugins JetEngine, JetAppointment, JetElements, and JetPopup from Crocoblock.

First, we will get a Crocoblock subscription. Then we will install JetEngine, JetAppointment, JetElements, and JetPopup.

Then we will create 2 custom post types. Services and Barbers. But it can be anything. Houses, Listings, Appartments, Teachers. We will connect the services with the barbers so we can decide which barber offers which service. So for instance: Barber Roy can do haircuts and beard trims, but no mustache trims.

We will adjust the booking form so it will look better and is easier to fill in. We will style it to make it fit the design of the website. Then we will use JetPopup to place the form in a popup. We will trigger it in Elementor with a button element.

Then we will decide what should happen when a new booking is submitted. We will send a notification to WordPress, an email to the business owner, a confirmation email to the booker and we will redirect the booker to a thank you page.

Example website: https://jetappointment.cbexample.com
Crocoblock: https://ferdykorp.com/cb

Overview With Timestamps:
00:00 Intro
00:14 The Final Result
04:04 What We Will Cover In This Tutorial
08:26 Get Crocoblock
13:38 Install JetEngine
14:11 Activate the License
14:35 Install More JetPlugins

16:30 Create Custom Post Types
21:21 Add Services and Barbers
24:36 SetUp JetAppointment
26:05 Configure the Opening Times

29:37 Single vs General Booking Form
30:34 JetAppointment Settings
32:50 Add Featured Images To Barbers

35:14 Jet Engine Forms
35:37 Add The Form In Elementor
38:36 Link The Barbers To The Services
40:52 Fill In The Form

43:06 Adjust the Booking Form
46:12 Add Prices to the Services
47:55 Show The total price in the Form
50:18 Split the form in 4 parts

52:30:50 Create a Popup
58:30 Copy The Style Of The Popup
59:53 Adjust the Colors
01:06:40 Add A Trigger Button For The Popup
01:10:35 Adjust the form style in Elementor

01:18:44 Let the Booker Pay Upfront with WooCommerce

01:24:00 Introduction to Listings
01:29:43 Connect the Listing To The Form
01:33:00 Create a Second Listing
01:37:40 Change The Popup Area
01:38:22 Add a Back Button

01:42:25 Create an Email Template For The Shop Owner
01:48:45 Create a Confirmation Email Template For The Booker
01:51:10 Create a Thank You Page
01:55:00 Make The Form More Personal By Adding a Name
01:59:10 Thank You


    16 replies to "How To Make A Booking System In WordPress"

    • Pili 16

      Thank you very much for this fantastic tutorial. How do I get my client to see their appointments?

      Neither with a Contributor user or Editor can see your reservations.

    • kartal usa

      this site work or not?

      ıdont understand

      .

    • kartal usa

      this site work or not?
      ıdont understand

    • Hirusha Deshan

      Can't we select multiple services? haircut and beard trim both? little help, Ferdy. Thanks!

    • Hirusha Deshan

      Hey, Ferdy, have a little question. Is there any way that we can select dates on one page and time on another page? [Can we add page breaks to the calendar and time?]

      Thanks!

    • Xpert Freelancer

      Just Loving it man 😍

    • Madhukar Chopra

      Very nice tutorial Fredy,

      I have a few queries:

      I am creating a website for clinic.

      * Different doctors have different fees. How to set different fees of two dentists though service provided by them is same.

      *How can I reduce appointment duration to 5 minutes from 30 minutes.

      *Also different services from same provider are for different period.
      For eg. A dentist visit is 5 minutes, teeth scaling 15 minutes, root canal 50 minutes, implant 1 hour 20 minutes and so on.

    • Study CPL

      Hi Ferdy, hope you and your family are healthy. I have been looking for a way to create a Pilot Logbook on WordPress. I have the spreadsheet and need to load it to each user's profile so that they can log flying hours. Some suggest google docs but then everyone works off the same sheet and I need every subscriber to have access to their own spreadsheet to log hours. Any help will be greatly appreciated.

    • marijn

      Hey Ferdy, ik heb een vraag. Ik ben bezig met mijn website en ik ga sportlessen aanbieden. Ik wil graag dat leden kunnen inloggen en daarna pas kunnen inschrijven voor de lessen. Zo hoeven ze niet telkens opnieuw zijn of haar gegevens in te vullen. Hoe kan ik dit het beste regelen? En met welke plugin?

    • martin argimon

      HI ferry. Does this 'Booking" system also enters the appointments automatically in your Outlook?… Otherwise how does one know if you have clashes with other meetings?. Kindly let us know ? Many Thanks for your awesome tutorials. Rgds Martin

    • Collin Sithole

      Please do a video on how to set up reCAPTCH on Elementor

    • Joe

      Here's the problem for a real-life barbershop: there is no way to connect it to an agenda and it has no decent back-end. So if a client will call the barbershop, and book an appointment manually, you would have to log into the WordPress dashboard and remove that booking option you just received by phone in Appointment – in order to not get double bookings. This makes it pretty much unusable for a real-life company. It will make your bookings more complex and cumbersome instead of easier. Unless you'll do 100% of your booking via the website – which is not realistic.

      You also can't change appointments as a customer or remove it. The plugin is simply not ready yet for a professional environment. Hopefully, Crocoblock will develop this plugin in the future to a serious and usable functionality. Right now, it's just not that.

    • Shreyash Chatarkar

      Ferdy please make a video on how to make online free and paid webinar/workshop website

    • Mortens

      Excellent tutorial, but i need to know before I buy. You said that we need dynamic license to create website like this and you added jetElements too, and this doesn't included in dynamic license. What is the reason of implemeting jetElements too?

    • Gooodluck Chigozie

      Awesome I have been waiting for a site functionality like this…thank you so much.

    • Faisal Arafin

      Hey Ferdy,

      Which Screen Recorder / Video Editor do you use? 🤔

Leave a Reply

Your email address will not be published.