Learn how to make a website with an appointment booking website where visitors can choose a service, a person, a date, and a time and put it on autopilot so you can fill all slots for the service you offer. You can also let them pay upfront through a payment provider.

This tool is great for barbers, massage salons, or any other business that lets people create an appointment.

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: [ Ссылка ]
Crocoblock: [ Ссылка ]

Overview With Timestamps:
00:00 Intro
00:17 The Final Result
03:46 What We Will Cover In This Tutorial
07:59 The 4 Steps We Will Take
08:37 Get A Domain Name And Webhosting
17:03 Install Wordpress

19:29 The Frontend And Backend Of The Website
23:01 Make The Website Secure
23:20 Clean Up Your Wordpress Website
28:32 Wordpress Themes
30:18 Install A Complete Website

35:38 Get Crocoblock
41:14 Install JetEngine
41:47 Activate the License
42:11 Install More JetPlugins

44:07 Create Custom Post Types
48:57 Add Services and Barbers
52:12 SetUp JetAppointment
53:42 Configure the Opening Times

57:14 Single vs General Booking Form
58:10 JetAppointment Settings
01:00:27 Add Featured Images To Barbers

01:02:50 Jet Engine Forms
01:03:13 Add The Form In Elementor
01:06:12Link The Barbers To The Services
01:08:29 Fill In The Form

01:10:43 Adjust the Booking Form
01:13:49 Add Prices to the Services
01:15:32 Show The total price in the Form
01:17:54 Split the form into 4 parts

01:20:07 Create a Popup
01:26:07 Copy The Style Of The Popup
01:27:29 Adjust the Colors
01:34:17 Add A Trigger Button For The Popup
01:38:11 Adjust the form style in Elementor

01:46:20 Let the Booker Pay Upfront with WooCommerce

01:51:36 Introduction to Listings
01:57:19 Connect the Listing To The Form
02:00:36 Create a Second Listing
02:05:17 Change The Popup Area
02:05:58 Add a Back Button

02:09:23 Create an Email Template For The Shop Owner
02:16:22 Create a Confirmation Email Template For The Booker
02:18:47 Create a Thank You Page
02:22:37 Make The Form More Personal By Adding a Name
02:26:46Thank You

свернуть