{"id":45227,"date":"2024-08-08T20:53:54","date_gmt":"2024-08-08T20:53:54","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=45227"},"modified":"2026-03-11T15:46:53","modified_gmt":"2026-03-11T15:46:53","slug":"how-to-create-a-booking-form-with-woocommerce-integration","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetbooking\/how-to-create-a-booking-form-with-woocommerce-integration\/","title":{"rendered":"How to Create a Booking Form with WooCommerce Integration"},"content":{"rendered":"\n
<\/svg><\/div>
Things to know<\/div>

The \"Plain\" Booking mode<\/strong> of the JetBooking<\/i> plugin allows for the use of forms with and without WooCommerce integration. In contrast to the booking form described herein, booking forms without integration with the WooCommerce<\/i> plugin do not allow use of the WooCommerce<\/i> Orders, Payments, and WooCommerce<\/i> checkout. Read more about such forms in the How to Create a Booking Form<\/a> tutorial.<\/p><\/div><\/div>\n\n\n\n

Also, you can apply the WooCommerce <\/em>“Based Mode” Booking mode of the JetBooking <\/em>plugin to expand the WooCommerce<\/em> functionality using the JetBooking<\/em> plugin (e.g., apply seasonal\/weekly prices, rates, sales dates, additional products, and range prices; allow selecting predefined additional booking services; calculate total price considering the input number of guests and ordered services, as well as manage orders via the JetBooking <\/em>and WooCommerce <\/em>dashboards). More details can be found in the How to Use Booking with WooCommerce Based Mode<\/a> tutorial.<\/p>\n<\/div><\/div>\n\n\n\n

Enable the JetBooking Settings<\/strong><\/h2>\n\n\n\n
\n

Navigate to the WordPress Dashboard ><\/em><\/strong> Bookings > Settings > <\/em><\/strong>General<\/em><\/strong><\/a> tab. The “Plain” Booking mode<\/strong> is set by default.<\/p>\n\n\n\n

Select the Custom Post Type (CPT) <\/strong>that will be used for recording and storing the booking orders in the Booking orders post type<\/strong> field and the CPT <\/strong>that will be used as booking instances in the Booking instance post type<\/strong> field, respectively.<\/p>\n\n\n\n

In the given case, we set the “Rooms” CPT <\/strong>as the Booking instance post type<\/strong> and the WooCommerce<\/em> “Orders” CPT <\/strong>as the Booking orders post type<\/strong>. Such settings can also be adjusted during the booking setup<\/a>.<\/p>\n\n\n\n

Then, enable the WooCommerce integration<\/strong> and the Two-way WooCommerce orders sync<\/strong> toggles.<\/p>\n\n\n\n

\"enabling<\/a><\/div>\n\n\n\n

Once selected, the settings will be activated automatically.<\/p>\n<\/div><\/div>\n\n\n\n

Create a Booking Form <\/strong><\/h2>\n\n\n\n
\n

In this chapter, we explain how to insert the needed fields, manage their settings, and set Post Submit Actions<\/strong><\/a>. <\/p>\n\n\n\n

For more details on the main fields and settings of the form-building process, read the Form Creation<\/a> tutorial.<\/p>\n\n\n\n

Configure the form\u2019s field settings<\/strong><\/h3>\n\n\n\n

First, navigate to WordPress Dashboard > JetFormBuilder > Add New<\/em><\/strong> to create a new form. The form will be opened in the Gutenberg editor. <\/p>\n\n\n\n

Initially, the form includes the Welcome<\/strong><\/a> block, which allows the application of the pre-created or AI-generated forms<\/a>.<\/p>\n\n\n\n

Press the “Start from scratch<\/strong>” button to build a custom form.<\/p>\n\n\n\n

\"jetformbuilder<\/a><\/div>\n\n\n\n

The Welcome<\/strong> block will be closed, and the Hidden Field<\/strong><\/a>, the Text Field<\/strong><\/a>, and the Action Button<\/strong><\/a> will be added by default.<\/p>\n\n\n\n

\"default<\/a><\/div>\n\n\n\n

Add the form’s title (“Booking form” in the given tutorial).<\/p>\n\n\n\n

In this case, the booking form will contain the Text Field<\/strong> to enter the client’s name, the Check-in\/Check-out<\/strong> dates <\/strong>field to select the booking period, <\/strong>the Number Field<\/strong><\/a> to input the number of guests, the Checkbox Fields<\/strong><\/a> to tick the needed services, and the Calculated Field<\/strong><\/a> to calculate the total price.<\/p>\n\n\n\n

Next, we customize the default Text Field<\/strong> block to get the client’s first name. Then, we add the Text Field<\/strong> twice to get the clients’ last names and their emails.<\/p>\n\n\n\n

Finally, we navigate to the Settings<\/strong> block of the Text<\/strong> Field<\/strong> and specify the necessary settings for the Text Fields<\/strong>. In the given case, we:<\/p>\n\n\n\n