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
Monday, 25 January 2021 08:01
How To Make A Booking System In Wordpress - 2021
Written by Super User
Published in
WordPress
Tagged under
Super User
After Greek Army, I started with QBasic in QL, a computer brother of Spectrum, 2 Degrees, almost 2 Certificates, from GWBasic to Oracle Tech & IBM tech & Solaris Clusters, at almost 60s to CMS tech.
Latest from Super User
Leave a comment
Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.
