How to create a new booking product

In order to create a booking system, you should first create “Booking” products.
Only after a correct configuration of the product, you will be able to receive bookings/reservations for this product.

Create a new WooCommerce product and select the “Booking Product” type.



Once you have selected the “Booking product” type, an option will appear to set the product as virtual or non-virtual to allow shipping.



Now you can go on and configure the booking settings.
Please, read this handbook carefully to learn how to use the plugin correctly.

Google Map API KEYS

To set the location for your products, the plugin uses Google Maps services. So the first step is to insert the“Google Maps API Key”.
Access Google, go to, and click on “Get a key”.

Google Maps API KEy authentication

After selecting the project, in the next step, you will obtain the key required by the plugin.

Google Map API KEY

Copy and paste the key into YITH Plugins -> Settings -> Google Maps API Key.

goole maps api key booking

Now access the product, type in the name of the location you wish to select and you are done.


You can set 2 different API Keys for:

  1. Google Maps API Key
  2. Google Maps Geocode API Key


To set them correctly, you should create 2 different API Keys in Google Console:

1. The Google Maps API Key can be restricted through HTTP referrers.

api key settings google

2. The Google Maps Geocode API Key can be restricted through IP addresses.

api key settings google

How to enable Geocode and Places libraries in your Project

To have everything work correctly, you need to enable Geocode and Places libraries in your Google project.

Geocode library

To enable the Geocode API library, please follow this procedure:


  • Now search for Geocode API and enable it.



Places library

To enable the Places API library, just follow the same procedure described above.


How to display the map

By entering the shortcode [booking_map] within the Booking product page, the Google map linked to the product location will be automatically displayed.

location-mapThe shortcode attributes are:

  • width: map width
  • height: map height
  • zoom: map zoom level
  • type: map type, choosing from:
    • roadmap: displays the default road map view. This is the default map type.
    • satellite: displays Google Earth satellite images
    • hybrid: displays a mixture of normal and satellite views
    • terrain: displays a physical map based on terrain information.

Usage example: [booking_map width=″300px″ height=″300px″ zoom=″100″ type=″satellite″]

Set fixed duration for the booking

The duration of the booking can either be defined by the admin as a preset time frame or by the user through the dedicated input form in the product detail page.
PLEASE NOTE: the duration of a booking is expressed in booking units, days, months, hours, and minutes.

When the admin defines the default booking duration, users are only asked to enter the start date.



fixed-duration-frontendThe booking end date is automatically calculated.
In this case, the booking is for 5 days.



Let users choose the duration

It works differently if you let your users select the duration of their booking.
First of all, you have to define your booking unit.

Booking duration

The booking unit allows the system to calculate the duration of the booking dynamically, based on the quantity set by users in the “Duration” field. It will be calculated as the product of two factors, the value entered by the user (3 in the screenshot below) multiplied by the booking unit set by the admin (3 in the screenshot above).


Suppose you have set the booking unit to “3 days” (as shown in the image above), and that the user has typed “3” as the value for his booking duration, the “total duration” of the booking will be 9 days.
The end date will be automatically calculated as soon as the user selects the start date.


Another option is the unit “minutes“, you can choose between blocks of 15, 30, 45, 60 or 90 minutes.


How to show the date-picker

Only if you have set 1 day as booking unit (and therefore selected also the option “Customer chooses units of”) and have enabled the option “Enable calendar range picker“, an interactive calendar will appear to let your users select the booking date.



calendar_range_pickerThe duration is automatically calculated.

Date-picker options

How to show the date-picker

From the Booking Form section, you can configure the options to show the date-picker as follows:

  • Date Picker Format: you can set the date format by choosing from the pre-set ones or by inserting a custom format;
  • Enable People Selector: People will be shown in a unique field.
  • Enable Unique Calendar Picker: you can decide to show the dates in a unique field;
  • Display Date Picker inline: by enabling this option, the date-picker will be embedded in the page instead of showing as an overlay. Please note: this will affect the single date-pickers only; the “Unique Calendar Picker” will never be displayed inline.

date picker inline

Minimum and maximum booking duration

If you let your users select the duration of their booking/reservation, you can set minimum and maximum values for it in the product settings page. This way you can prevent users from making a booking/reservation for longer or shorter than allowed.
If you don’t want to set any limits to the booking duration, enter “zero” into the concerned field.



Let’s make an example. Suppose we want to allow bookings for the flat “Residenza Marina” in units of three days and for a maximum of 7 units (21 days, then).

To do that, we can configure the product as follows:

  • Booking duration: customer can book units of 3 days
  • Minimum duration: 1
  • Maximum duration: 7




Consider min/max duration in calendar

By enabling the check min/max duration option in the Booking Form settings, the calendar in frontend will show the dates which are no longer available, including the minimum/maximum duration.



For example, customer A has booked the Amsterdam Room from 12 July to 18 July. The minimum duration to book this room is 3 days, therefore it is not possible for Customer B to book the room from 10 to 18 July, considering the minimum of 3 days plus the booked period.


If you disable the option, the customer will see the calendar with the dates available/unavailable, however, it does not take into consideration the minimum and maximum duration of the room. Therefore the days prior to the reservation will appear clickable in the calendar, even if the booking is not available on those dates.

min duration disabled

If the customer wants to book the room from 10 to 14 July, he will get a message notifying that it is not possible to book this room in the period he wishes.

not available



General information about booking availability

Users make a booking based on the dates that the system shows as available.
Availability can either be configured from within the specific “booking” product or globally.

Product availability


Unavailable dates become not-selectable for upcoming users.

Global availability


Whether you are acting globally or on the single “booking” product, you’ll be able to create availability rules that apply only to one or more months or to a preset range of days and dates.
Let’s see how to do that.

Set availability in single product

Go to “Booking Availability” on the product edit page to configure availability for the selected product. You will find different sections where you will be able to set the related options. Let’s analyze them.

Booking termsbooking_terms1

  • Max bookings per unit: maximum number of bookings that can be accepted for the same day/month.
  • Minimum booking duration: minimum value for the duration that can be selected by customers expressed in months, days, hours, or minutes depending on how previously set in Booking duration. 
  • Maximum booking duration: maximum value for the duration that can be selected by customers expressed in months, days, hours, or minutes depending on how previously set in Booking duration. 
  • Confirmation required: to let users request a confirmation for the booking
  • Cancellation available: to allow customers to cancel the booking product already booked

Booking preferences



  • Check-in time: time for the check-in
  • Check-out time: time for the check-out
  • Allowed start days: to define the days for the booking to start.
  • Buffer time: decide the time between one booking and the next. For example, if you give in 1, the buffer time between two reservations will be 1 day. You will not be able to make a reservation for that day (or that time period).
  • Time increment based on duration: Select if the time increment of your booking is based on booking duration. By default, the time increment is 1 hour for hourly bookings and 15 minutes for per-minute bookings.
    Example: if enabled and your booking duration is 3 hours, the time increment will be 3 hours, so you’ll see the following time slots: 8:00 – 11:00 – 14:00 – 17:00.
    If disabled, you’ll be able to book a 3-hour appointment from 8:00 to 11:00, but also from 9:00 to 12:00.
  • Time increment including buffer: select if you want to include buffer time to the time increment.
    Example: if enabled and the booking duration is 1 hour and you set a buffer of 1 hour, the time increment will be 1 hour + 1 hour, so you’ll see the following time slots: 8:00 – 10:00 – 12:00 – 14:00.

Booking window


  • Minimum advance reservation: the first available date will be automatically set x hours/days/months from the date the user is making the booking.
  • Maximum advance reservation: this is the latest available day for the booking and will be automatically set to x days/months/years from the date the user is making the booking.

For example, let’s suppose we want to configure a product so that the first available date for booking is in two days’ time.
And suppose we don’t want that users can make a booking later than 1 year since they access the booking form.


If they access the form on 8th March 2019, the start date of the booking they can pick is between 10th March 2019 and 7th March 2020.



Additional availability rules


This section allows creating additional availability rules. After clicking on Add new rule,  you must select the time frame for which the rule shall be configured. You can choose from “Specific date” and “Generic date“.

Specific date


Generic date


To edit the availability status for the selected time frame, click on the Non-bookable button as shown in the following image.


This way, no booking can be made for the selected time frame.

Enable the option Add extra rules for specific days of the week to configure availability for each day of the week within the selected time frame as in the sample below.

extra_rulesTo set the days availability, the plugin provides 3 different colors:

  • red: non-bookable
  • purple: bookable
  • grey: not affecting the previous status settings.