JetBooking Preparation Guideline

JetBooking is a Crocoblock plugin designed for booking-based services such as apartment rentals, car reservations, or any scenario where users need to book an item for a selected time period.

Before configuring the booking functionality, it’s essential to prepare the website structure properly. This involves creating Custom Post Types (CPTs), setting up relevant meta fields, and organizing Single Pages, as well as Listing Templates with Dynamic Popups, where booking forms will be displayed.

This article outlines each essential preparation step before launching the booking setup — what needs to be configured and, most importantly, why it’s necessary for the booking system to function properly. You will find a clear overview with direct links to step-by-step tutorials that walk you through creating custom post types, meta fields, booking forms, single pages, and more.

Before you start, proceed to the WordPress Dashboard > Plugins and ensure that the JetEngine, JetThemeCore, JetFormBuilder, and JetBooking plugins are installed and activated.

The JetEngine plugin is required to create a Custom Post Type with Custom Fields, which will help you to organize and add data to the services you intend to offer. 

The JetThemeCore plugin helps to create all the necessary templates for Archive and Single pages. As an alternative, you can use Elementor Pro for creating templates; however, this guide focuses on using the JetThemeCore plugin. 

Creating a dedicated Archive template is a crucial step when working with JetBooking. The Archive template ensures that the listing content is dynamically loaded and filtered based on the Post Type’s archive URL — which is essential for proper URL structure and SEO indexing. When using JetThemeCore, the Archive template also enables you to design a consistent, dynamic layout that automatically adapts as new listings are added, eliminating the need for manual updates to a static page. This approach offers better performance, scalability, and flexibility in displaying your booking-related content.

To build a custom booking form, you will also need the JetFormBuilder plugin. 

If you would like to book services directly from the list without opening it on a separate page, you will also need the JetPopup plugin. 

We also have the Elementor website builder for building the pages and templates for the booking site. Additionally, JetBooking is compatible with Gutenberg and Bricks editors; choose the one that best suits your needs. 

First, we need to create a Custom Post Type (CPT), which will be a list of all the services offered on your website. You can use a CPT you already have. Click the “Edit” button to add changes to it.

In this case, following our How to Arrange Meta Fields in the Booking Instance CPT tutorial, we create a “Rooms” CPT and add all the meta fields needed to display all the information about the rooms we offer.

In this case, we added a WYSIWYG meta field for room description, a Gallery field, Number fields for maximum guests and room size, Select fields for the room type and bed type, and Checkbox fields for view and amenities. 

Once you have finished the settings, click the “Add Post Type” button. 

Now, we need to set the values for the “Rooms” posts. From the WordPress Dashboard, proceed to the needed post type and click the “Add Page” button. Set the value for each field and click the “Save” button once you are ready. 

Create as many service posts as needed and fill them with the relevant data.

Now we need to create one more CPT for storing the orders (bookings) created on the site. Here, you will receive your orders and later be able to manage them as an administrator. In this tutorial, we create a CPT called “Orders”. 

You can create a CPT without any meta fields, as we will get all the required information from the database. In this tutorial, we added meta fields to get the data that is not default in the Booking Details. 

Click the “Add Post Type” button once you are ready.

To learn more about the Orders CPT, refer to our How to Manage Custom Booking Orders CPT tutorial.

To display detailed information about the available service (in this case, a room), we need to create a Single Page template. 

In the How to Create a Custom Single Page for CPT-Based Booking tutorial, you can find all the details on the setup of the Single Template. 

So, we created a template to display all the information about the room. 

Click the “Publish” button once you are ready with the settings.

The next step is to create a booking form. 

If you are setting up JetBooking with the booking wizard, the form will be created automatically. In the How to Set Up Booking with Wizard Setup, you can find the details on the setup. 

In case you would like to create a form by yourself, refer to the How to Create a Booking Form tutorial. 

We created a booking form using a Pattern that allows users to select dates and other options for the service.

Once the form is set up, click the “Save” button. 

Then, we need to add the form to the Single Page. Following the How to Display the Booking Form on the Single Post Page tutorial, we displayed the form we created on the Single Page template.

Click the “Publish” button once you are ready with the settings.

This step will be useful if you need to display the list of offered services on the Archive page, for example.  

Following the How to Create a Listing Template for Post Types in Elementor tutorial, we created a listing for the “Rooms” CPT.

We added the Dynamic Widgets to display short information about the rooms.

Click the “Publish” button once you are ready. 

To know more about displaying booking instances in the list, refer to our How to Display Booking Instances in a Grid tutorial.

Booking form inside the listing

If you would like to add the booking form to the Listing, you will need to use the Dynamic Popup.

Following our How to Build a Dynamic Popup for JetEngine Listings guide, we create a Dynamic Popup. We need to add the booking form we created before inside the pop-up.

As soon as everything is done correctly, return to the pop-up editor and save this pop-up by clicking the “Publish” button.

Things to know

Ensure you set the conditions according to your needs and press the “Save Conditions” button. Without the conditions applied, the pop-up will not be shown on the front.

Then, attach the popup to the listing we created earlier.

Click the “Publish” button once you are ready. 

Now, it is possible to book a service not only from the Single page, but also directly from the list.