How to Use Booking with WooCommerce Based Mode

Navigate to WordPress Dashboard > Bookings > Settings. Unroll the Booking mode drop-down menu of the General tab and select the “WooCommerce based” option.

Next, move to the Advanced tab and enable the Automatically switch bookings statuses toggle to automatically change the “On hold” status of the unpaid orders. Here, we select the “Once Daily (1 day)” Switch interval to charge the default “On hold” Target Status(es) to the “Cancelled” New Status. Therefore, if users do not pay for the order within a day, this order will be cancelled automatically, and the date will become available for other bookings by another user.

To learn more about configuring the booking settings in the JetBooking Dashboard Overview.

Adjust the settings common for all products 

To specify settings common to all Products, unroll the needed Booking Settings (i.e., the Configuration or Schedule tab). In the given case, we unroll the Configuration tab, pick the “Per Night (last booking day is not included)” Booking Period, and set the Min days and “Any day” End date.

Then, we configure the available check in and check out weekdays in the Schedule tab. Here, we activate the Timepicker toggle and set the Time Range during which bookings can be made in the Start and End fields.

Read more about configuring the timepicker settings in the How to manage timepicker for check-in/check-out in JetBooking tutorial. 

Create attributes and terms

Navigate to the WordPress Dashboard > Products > Attributes page. Оn this page, fill in the Name field and/or the Slug field (if you omit the Slug field, it will be filled in automatically) and select the “Booking Service” option in the Type drop-down. After that, press the “Add attribute” button.

In this case, we create the “Meals” and “Extra services” attributes.

After pressing the “Add attribute” button, the new attribute will appear in the list. 

Click the “Configure terms” link on the right near the corresponding attribute, and then you will be redirected to the Edit attribute page. Here, type the Name of a new term, and the Slug field will be filled out automatically. Also, if needed, add the Description.

Next, move to the Service Cost field and insert the value that will be used in further calculations. If required, type the text in the Cost Format field that will be displayed on the front end near the corresponding item. Then, tick the Multiply cost by guests count field to multiply the attribute price by the number of guests, and tick the Everyday service? field for the daily scheduled services. In the last step, press the “Update” button.

In this case, we create the “Breakfast,” “Lunch,” and “Dinner” terms for the “Meals” attribute and the following terms for the “Extra services” attribute: “SPA/Hammam/Massage,” “Transfer in/from station,” “Children’s play kit,” and “Pet-friendly services.” Also, we add the corresponding values to the Service Cost and Cost Format text fields for all terms and tick the Multiply cost by guests count toggle for terms. The only exception is activating the Everyday service? toggle for the terms of the “Meals” attribute. 

In particular, for the “Lunch” term of the “Meals” attribute, we type its Name (“Lunch”), and then the Slug field is filled automatically; after that, we fill out the Service Cost field (the “25” text), insert the text in Cost Format field (“%s per day”). In this case, the “%s” text is replaced with the value from the Service Cost field, and the “per day” text is added after thisdata. Then, we tick the Multiply cost by guests count and Everyday service? toggles. 

After completing these fields, we save the changes.

Read the How to Create JetBooking WooCommerce Additional Services Attributes for more details.

Configure the attribute settings of the product

Once completed editing terms, navigate to the WordPress Dashboard > Products > All Products tab and open the needed product from the list to edit it. Scroll down the Edit Product page to the Attributes section. Here, choose the needed Attribute from the Add existing drop-down list, and then you can press the “Select all” button under the Value(s) field. 

In this case, we first choose the “Meals” attribute and add the “Breakfast,” “Lunch,” and “Dinner” terms. So, we add all pre-created attributes and the corresponding terms. Since we intend all products to include some units and some guests can be invited, we tick the Has guests and Unit Selection controls.

After that, press the “Save attributes” button.

Finally, after inserting all needed attributes and the corresponding terms, scroll up the page and click the “Update” button.

To create a new product, navigate to the WordPress Dashboard > Products > Add New path or click the “Create the first product” link below the Booking mode drop-down menu if you are in the WordPress Dashboard > Bookings > Settings > General tab.

Then, you will be directed to the Products > Add New page.

The Add new product page has the “Simple product” type selected by default in the Product data drop-down list.

First, to benefit from the “WooCommerce based” mode functionality, choose the “JetBooking” Product data. Once chosen, this option activates the booking meta fields, such as Pricing Settings (e.g., rates, seasonal/weekly prices), Custom Schedule, etc. These settings can be globally configured on the booking settings page (WordPress Dashboard > Booking > Settings tab), but the settings configured here are a priority.

guests and Unit Selection checkbox fields. In this case, we select the Has guests control to allow users to set the required number of guests. Also, we keep the Unit Selection control disabled, but tick the Allows the user to select the number of units to book checkbox field. In this case, the only field to select the number of units will be available on the front end. Unlike enabling this control, activating the Unit Selection control allows selecting only one unit on the front end. Enabling both controls simultaneously disables the ability to select the necessary units on the front end.

Then, the Guests tab will appear under the Attributes tab. Unroll it and type the minimum and maximum number of guests allowed in the Min guests and Max guests fields. In the last step, you can tick the Multiply cost by guest count checkbox to calculate the total cost for all guests.

In this tutorial, we range the minimum and maximum guest numbers from “1” to “5” and tick the Multiply cost by guest count checkbox.

After that, we move to the Units manager section, press the “Manage Units” button, and add three units for this apartment.

Read the How to Manage Units via the WordPress Dashboard tutorial to learn how to create and manage units via the WordPress Dashboard using the JetBooking plugin’s functionality.

Second, fill out the product Meta Fields. Here, we scroll the page up and add the Product name. Next, we fill out the Product description, Product Image, etc. Then, we move to the Pricing Settings block and type the needed value in the Price per 1 day/night field. Then, we press the “Add weekend” button and insert the specific prices on weekends.

After that, we set the Seasonal prices; in particular, we insert the regular price of the season in the newly appeared Price per 1 day/night field and pick the Start Date and End Date for this period.

Next, we press the “Add rates” button. In the newly appeared Set up advanced pricing rates pop-up, we specify the needed values in the From and Price fields. When completed, we click the “Save” button.

Finally, we set specific options for this product: move the Custom Schedule block (activate the Use Custom Schedule toggle to set the Days Off) and the Date Picker Config block (enable the Date Picker Configuration toggle).

Once completed, press the “Publish/Update” button.

To provide better usability, we recommend setting the JetWooBuilder Single Product template to display products. To do this, we move to the JetWooBuilder Template Settings block and select a Custom Template.

For an in-depth understanding of how to create a template using the JetWooBuilder and JetThemeCore plugins, activate the needed widgets, and manage their settings, read the How to Create a Single Product Page Template tutorial.

To customize the created template even further, you can use the JetWooBuilder and JetProductGallery plugins. To do so, follow the steps described in the How to Create a Custom Single Product Page for WooCommerce-Based Booking tutorial.

Once completed, navigate to the top of the page and press the “Publish/Update” button.

Press the permalink of the product to redirect to its page.

The front-end view of the product page displays the native fields of the WooCommerce Product page. The Price range specified in the product settings will be shown as the minimal pricing rate (with the “From” text). Thus, the price is displayed dynamically. Also, this page displays the added attributes and the corresponding terms as checkboxes.

If you use the JetWooBuilder plugin, the Price range will be displayed via the Single Price widget, as well as the Single Add to Cart widget will show the selected Attributes and Terms as checkboxes. 

After selecting the needed number of guests, units, booking dates, and additional services, the total price will be calculated and returned. Also, the “BOOK NOW” button will be active.

Then, press the “BOOK NOW” button to add the product to the cart for further processing with the order.

Read the JetWooBuilder Dashboard Overview tutorial to know how to create different JetWooBuilder templates and assign them to products. Also, to build a shopping cart with all the needed widgets, read the How to Create a Cart Page Template tutorial.

The Cart page displays the data separately for each unit (e.g., product title, check-in and check-out dates, selected number of guests, everyday services) with the multiplication sign on the number of days, other services, and the calculated total price. 

In this case, the Cart page displays the product title, check-in and check-out dates, selected number of guests, everyday services with the multiplication sign on the number of days, other services, and the calculated total price. 

We use “Findero,” the pre-built Crocoblock’s dynamic template, which allows users to be redirected to the cart or continue purchases. So, click the needed button 一 the “Continue shopping” button or the “Proceed to checkout” one.

To place the order, we pressed the “Proceed to checkout” button.

Next, you will be redirected to a Checkout page. Here, scroll down the page and, finally, click the “PLACE ORDER” button.

Since the order was received correctly, an “Оrder received” page appears.

Manage Bookings and Orders via Dashboard

The “WooCommerce based” Booking mode allows booking orders to be collected in the JetBooking Bookings and WooCommerce Orders tabs and filled in the Upcoming Bookings section for a specific product.

Manage bookings via the JetBooking dashboard

Navigate to the WordPress Dashboard > Bookings > Bookings path, where all orders are displayed.

You can also view the ordered booking instance in the calendar or timeline by pressing the “Calendar” or “Timeline” button in the top right corner of the page. 

If you need to edit the booking record via the Booking dashboard (e.g., to change its status), press the “Edit” button. The pop-up allows changing the Status, Booking Item, Check In, and Check Out dates and Time range (if set), choosing the Guests, selecting the Booking Services, as well as the entered email.

In this tutorial, we change the number of guests from two to three and enable the Recalculate order totals toggle. Also, the total price is recalculated, and the same changes are made in the corresponding WooCommerce orders. To save the changes, press the “Save” button.

Additionally, you can press the order ID in the Edit Booking pop-up or in the Related Order column of the booking list to be redirected to the appropriate WooCommerce order.

Manage booking orders via the WooCommerce dashboard

Unroll to the WordPress Dashboard > WooCommerce > Orders tab. This tab also displays the orders.

Select an order to see its details or take order actions. Select an order to see its details or take order actions. Also, to display the applied changes, press the “Recalculate” button.

Manage the product’s Upcoming Bookings section

After setting the booking order, it will be added to the Upcoming Bookings section for the booked product.

That’s all about implementing the WooCommerce functionality with the JetBooking plugin for your WordPress website.