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 into 4 parts

52:30 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