Back to contents

JetAppointment: Full Overview and Wizard Setup

This detailed tutorial shows the step by step wizard installation and showcases the usage of this powerful plugin.

JetAppointment plugin is a must-have tool for building websites for the services providers. The main advantage is that now the user can book the services and select a date and a time slot available in the provider’s schedule.

Top solution for creating forms for the appointments booking

After the plugin installation in your WordPress Dashboard, proceed to a new menu that appears in your navbar. Click Appointments > Set Up to start the basic plugin customization.

ATTENTION! Note that you should have installed and activated the JetEngine plugin and enabled the Forms module as well.

1 Step — Select Post Types

Here you should select the post type with services that a user selects from the booking form. I’m going to create a spa salon website so I have created the post type called Services and added the types of beauty procedures.

ATTENTION! Please note that if you don’t have the post types created, you can switch to JetEngine > Post Types and create all needed post types.

If there is a need for choosing a service provider (in my case it is a master who accomplishes the service), toggle on the Add providers option and select the corresponding post type.

Post types step one

2 Step — Setup Database Tables

After the appointment submission, the required columns would be created in the database to save the bookings by default. This allows you to manage your appointments forms from the back-end ‒ check the status, change any info about the booking.

If you need to add more fields to the booking form ‒ for example, the first and last name of the customer, phone number, comments, etc. ‒ you should create the new columns in the database in advance.

jetappointment step two

3 Step — Set up Working Hours

At this stage, you can set your availability during the week and specify the days off.

Firstly, set the default time slot length. You can select any time here as this is just a pre-set option for creating a meta field in your services posts.
Later, you can change this time slot to more flexible or prolong it.

Now you can set working hours for each day. The great thing is that you can add multiple working hours for the same day. So if you have a lunch break, you can specify it here, so the customers can’t book the service on this time slot.

jetappointment step three

If you need to add the day off ‒ simply don’t add any working hours and it won’t be available in your calendar. Wednesday and Sunday are days off in my beauty salon, so I leave it as it is.

You can also set specific dates for the day off here. Click +New Day Off, specify the title of this day (it can be a holiday name) and pick the date. You can add as many days off as you need.

4 Step — Additional Settings

The last and important step of our appointment plugin is to enable WooCommerce integration. It allows the customer to pay the service right after the appointment submission.

ATTENTION! For this tutorial, we won’t enable this option, the customization of WooCommerce integration is covered in this tutorial.

Below you can see two options for creating booking forms, just leave them toggled on (that allows you to create forms automatically).
So, the two types of forms will be created – one for adding the form to any static page and another for adding the form on a single service page.
The difference between these two forms is that on the single service page there is no service select field.

jetappointment finish

Finally, we can click Finish and see the success screen.

Here you can switch to manage your connected post types and check newly created forms.

jetappointment step 4
ATTENTION! Note that the fields in the form are required and you shouldn’t delete any of them. If you have created additional database columns on Step 2, you have to create the corresponding fields in the forms.

As I’ve created 2 additional fields, I added the new fields to the form and changed the order.

jetappointment static form

Also, I need to update the changes in the Notifications Settings.

Settings Overview

Now, let’s proceed to Appointments>Settings and check additional customization options.

Here you can see the settings that we’ve done ‒ selected post types and working hours. You can make changes here at any time and enable WooCommerce integration later.

appointment

Right next to WooCommerce integration, there’s the Manage Capacity option. It allows you to set the maximum number of spots or tickets available for booking. Toggle it on to see the Show Capacity Counter option.

capacity

If you activate Show Capacity Counter, users will be able to see the number of available spots for each time slot in your Booking Calendar.  

Now, let’s set it up on the back end and see how it works on the front end. 

Imagine you want to set the maximum number of people to attend a birthday party. Proceed to Services>All in the left-side toolbar of the WP dashboard, then find the Birthday Party post type and click edit.

service

In the Appointments Settings, find the Capacity field and enter the desired number, for example, 10.

appointment

Update the post and refresh the booking form page. Let’s pick the service and provider, and the date we want to celebrate – the 5th of May. You’ll see three slots broken down by the time and the indication 10/10 next to every time slot. It means that 10 spots out of 10 are available.

appointment calendar

Once a user books a certain slot time, it will be visible on the front end.

calendar

This means that 9 spots out of 10 are available so far. When the limit you’ve set is reached, this time slot will disappear. 

Below the Show Capacity Counter option, there is a Slot time format select. You can select one of three available formats to customize the appearance of the time slots on the front end.

timeslot

Let’s see what happens if we pick the second slot format instead of the third we’ve used before.

slots

In the Appointments Booking Settings section, there’s also a Label tab containing the Use custom labels option. Toggle it on to customize the labels of weekdays and months.

labels

Once enabled, you’ll see the list of default labels.

labels

You can leave them “as is” or type the preferred ones to the right of the actual weekdays.

labels

Once you’re done with the weekdays, go check them on the front end. Lovely!

appointment

In the Advanced tab, there are two options.
Let’s imagine that one master provides more than 1 service. So when a visitor selects the time slot for one type of service, the next visitor won’t be able to schedule the same time slot for another type of service. To make it work this way, you should select the Through all services option.

jetappointment advanced

Hide Set Up Wizard is an option that allows you to hide the setup option in the plugin menu to avoid any resets of your appointments.
After this, Set Up option will disappear.

jetappointment dashboard

Finally, let’s switch to the Tools tab. Here you can clear the cache from the database tables. For example, I have no slots available and I want to add one more time slot for this day. However, it doesn’t display on the front-end. So I need to clear the cache and it will be available for booking.

Post connection and meta fields

In this plugin, the relations between services and providers post types are created automatically! So you can simply select the needed provider for each service.

I have 7 service types and now I’m going to set the provider and change the values in meta fields.

As you can see, here you can select a master, change the duration of the service, set the buffer time before and after the time slot.

jetappointment relation

This can come in handy if you need to have a break to prepare the workplace for the next visitor or something else.

And the last meta field is a field for price. You should set the price only if WooCommerce integration was enabled. Check more about this in the following tutorial.

Now, let’s set the masters to each type of service and make all the needed changes in the meta fields.

Customizing booking forms

Proceed to the page in Elementor where you want to add the booking form, find Form widget and select Static Page Booking form.

jetappointment elementor

In the form, you can see two select fields with Services and Providers, the calendar with available dates for booking, the user email field and all other fields that you have added additionally.

In the widget settings, you can choose fields layout and select the type of form submission ‒ by page reload or AJAX.

As for style settings, there are plenty of options for Appointment Calendar. For example, you can set colors for time slots in different modes, to make it clear when the slot is selected.

I’m going to set background color for a time slot in the active mode, to be sure that the time was selected and switch to the next step.

Let’s check how the form works on the front-end.

jetappointment form

Now let’s proceed to the single service template. If you don’t have one, you can create it with JetThemeCore or Elementor Pro.

Here you should add the second form – Single Service Booking Form.
As you can see there is no service select field as we are on the simple template of the service.

jetappointment form frontend

Now let’s book a make-up and check how we can manage the appointment from the back-end.

jetappointment service

Here you can check the details of the order.

jetappointment details

And change the info of the order, for example, change the status of the booking manually.

jetappointment complete

Great! Hope this tutorial will help you to get started with the JetAppointment plugin and create a cool booking website.