How to Link the Booking Form with WooCommerce Checkout and Order Forms
This tutorial reveals how to link the Booking Form with the WooCommerce Checkout form and Order that will be sent to the client.
WooCommerce is a very efficient tool that helps you organize trading on the web. Since apartment rent is also a kind of merchandise, this plugin can make booking more convenient both for you and your customers. In this guide, you will learn how to link JetBooking with WooCommerce.
By now, you have probably enabled the integration with WooCommerce. If not – go through our WooCommerce setup tutorial.
So, let’s set the connection between WooCommerce and Booking Form.
Go to the JetEngine > Forms, choose the form you use for the Single Page, and proceed to edit it. Scroll to Post-submit Actions/Notifications Settings and click the editing button on the Apartment booking notification.
After you enable WooCommerce, three additional blocks will appear in the Apartment booking notification panel. Let’s take a closer look at each of them.
WooCommerce Price field
By default, this field is filled with the value you define in the Price per day/night meta field. However, if you want to set another value, you can choose any of the fields of the booking form. For your convenience, they will be displayed in a drop-down list. It will be useful if you use Hidden and Calculated fields to count the total price with taxes or according to a formula.
WooCommerce Order Details
This block allows you to choose the information to be added to the order. Open the Set up WooCommerce order details window by clicking the “Set up” button.
Every row of the order table contains two options. The Label is a text area where you can choose the title for the information you want to show in the order. And in the Type drop-down menu, you can choose the type of information you want to display in the order.
- Booked instance name – the title of the booked room.
- Check in and Check out – the dates the user has chosen. You can define the format of the dates in a special separate bar. Information about dates formatting can be found on the official WordPress website.
- Booking unit – as is obvious from the title, it is the booking unit you set for the room.
- Form field – you can choose to show any of the form fields here; they will be listed in a drop-down menu.
- Add to Google calendar link – put into the order the link that will add the chosen dates to the user’s calendar.
You can add as many items to the order as you want, just click the “Add new item” button. When you finish with the order, hit the “Save” button.
WooCommerce Checkout Fields Map
In this block, you can link the fields of checkout form with the fields of the booking form. If you do, they will be automatically filled with the value a user’s already put to one form. That’s very convenient because there’s no need to submit the same information several times.
There is a drop-down menu near every checkout field, and you can choose any created form field there. As you can see, half of the fields appear in the billing form and half is for shipping.
After you finish customizing those WooCommerce fields, don’t forget to click the “Apply Changes” and “Update” buttons.
That’s it, you linked your Booking form with Order and Checkout forms. This will surely make your client happier and, as a result, you will be happier, too.