aksamit
Olga Aksamitnaya
Columnist
Updated on
Tutorials

How to add booking functionality to Elementor with Crocoblock plugins

Booking functionality itself can be used for any kind of business on any WP website. If you’re running either a hotel, equipment or car rental business, you definitely need to allow your clients to book the items online. 

What should a booking plugin do to meet both clients and site administrator needs?

Speaking of clients they should be able to get full information about the product or service they are willing to book. Also, filling in the form should be comprehensive and clear for them. When there are tons of orders and dozens of clients waiting for their order to be processed it’s crucial for a website administrator to use time efficiently and manage quickly. 

JetBooking in combination with other Jet Plugins meets those goals in full. The submitted requests via Booking Form are saved in WordPress automatically as Custom Posts. In addition, the plugin has integration with top-flight services as Zapier and Intergromat, which are irreplaceable tools if we are talking about automation. 

It’s more than easy to sync your booking system with Google Sheets and Mailchimp audiences. Plus, clients have the opportunity to check if the item is available for booking. And, after the order is submitted, an email notification is sent automatically. 

Let’s get familiar with JetBooking by Crocoblock and explore its capacity.

What is so special about JetBooking?

All Jet Family plugins were crafted as Elementor addons to boost its functionality even more.  So, what is so special about JetBooking? Here we are talking about the two main features:

1) the opportunity to specify the period to check items availability before booking;

2) the built-in functionality to automatically submit the booking requests to a database and save them in the form of custom posts in the WordPress dashboard. 

Why JetBooking should be combined with other plugins

Somebody may think that a JetBooking plugin is just a booking form for Elementor, but its functionality is much wider. All you need to do is combine it with JetEngine, JetSmartFilters and JetThemeCore and boom! Magic happens! Let’s look at what each of the abovementioned plugins can do and why they are necessary to create a unified booking mechanism for your Elementor website.

JetEngine: because you need to create items that people will book

Those items are Custom Post Types that need to be created with JetEngine. Their content will be dynamically pulled and then booked by the site visitors. 

Assume, you are the owner of a small hotel in need of establishing a booking functionality on your Elementor website. With the help of JetEngine you can easily create Custom Post Types and enrich them will meta boxes and complex relations. 

Plus, JetEngine originally comes with Forms functionality with the help of which you are able to build any structure of your Booking Form and enrich it with various field types, from textual to calculated ones. Thus, your site visitors will be able to full in the Form and add detailed information to complete their request fully. JetBooking plugin itself enabled additional functionality of the Form — Check-in\check-out dates field type. 

So, what’s next? In order for JetBooking to work as intended, you can create CPT like “Rooms” ( for the items to book) and CPT“Orders”( that will connect information about room reservations). 

JetThemeCore: because you need to display the items properly

To display the Rooms CPT you`ll need an Archive page to display the entire grid and the Single page to showcase detailed information and embed Booking form itself. Here the JetThemeCore library will come in handy.

Protip

Note: If you’re an Elementor Pro fan JetBooking plugin will work with it just perfectly as well.

JetSmartFilters: because there is no booking without available rooms

As a user you need to check the room’s availability before booking it, right? Well, JetSmartFilters with its Data Range filter will be responsible for that. This plugin has a specially developed checkin_checkout key, which should be inserted in the Query Variable field when filter setup. As a result, the dates, for which the room is unavailable won’t be possible to select. 

JetBooking itself: because without it users can’t book 🙂

We have items to book. They are displayed properly on Archive and Single pages. We can filter them by dates and see the availability. Are we forgetting something? Ooo right, now we need to give visitors the opportunity to actually book them. 

But you can’t book anything if you don’t have a booking form. With JetBooking plugin it is super easy to create one.

  1. Create a table with needed parameters (order id, name, email, number of people, etc). Also, the relations between two CPTs should be established in the corresponding fields.
  2.  After a client submits a booking, the information will be sent to the database as well as duplicated to your prepared CPT for future orders.

You get the opportunity to manage your bookings both in the WordPress Dashboard and in the database. Another major benefit is that you don’t have to transfer reservation requests from the email to your website manually – everything is done automatically.  

if your client contacted you willing to make some changes in the reservation he’s done just edit “Orders” Custom Post Type and make the changes according to your client’s request, and information will be updated in the database as well.     

What’s about Booking Form styling? You can do it in every way possible. Just drop the Form widget in Elementor and adjust the Style settings in a visual mode.

Google Calendar sync: building a connection

The cherry on top: you can see all your booking orders in Google calendar. Currently, there are two ways to connect the booking form with it: Zapier and Integromat. Want to know more? 

Building a hook with Zapier

Zapier online service is used worldwide and allows establishing connections between various apps. In the context of the JetBooking plugin you can easily hook up Google Calendar, and synch it with the orders in the WordPress dashboard. Plus, using a multistep Zapier option it’s quite handy to sync Booking Form with a Mailchimp to store clients’ emails in it and use it for the future mailing.

Structuring scenario with Integromat

Integromat helps to combine multiple apps and sites. It can also be used for synchronization of your orders with Google Calendar by means of creating a webhook and using it in your Form. It comes with the option to set the time period when the synchronization is made.

BONUS FEATURE: WooCommerce integration

Setting the desired payment options for your website has never been easier. Just choose from the payment systems integrated into the WooCommerce and activate the necessary ones on the dashboard. Now your website visitors can choose the payment method on the checkout page.

Conclusion

JetPlugins together with JetBooking are able to establish a strong structure of Custom Post Types, filters functionality and Booking Form, being spiced up with the processes automatization for your convenience.