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.

Booking product

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

Google Map API KEY

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 intoYITH Plugins -> Bookings -> Google Maps API Key.

Google Maps API Key options

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

Select location

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.

Google map

The 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 or months.

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

Fixed duration

Select start date

The booking end date is automatically calculated.
In this case, the booking is for 5 days.

Booking start date - fixed

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 end date - fixed 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)

Booking units

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.

Booking end date

Calendar range picker

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

Enable date picker

Date picker

The duration is automatically calculated.

Booking duration

To improve the performance, you can choose the number of months loaded in the calendar by enabling the option Months loaded in calendar. For example, by setting the value as 3, as suggested, the other months will load three at a time.


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.

Minimum and maximum duration of the booking

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 chooses units of 3 days
  • Minimum duration: 1
  • Maximum duration: 7

Configure booking duration - Example

General informations about booking availability

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

Global availability

Global availability

Product availability

Product availability

Unavailable dates become unselectable for upcoming users.

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.

Configure date/month range of the availability

First of all, we must select the time frame for which the availability rule shall be configured. You can choose between “Date range” and “Month range”.

Date range

Add date range

Month range

Add month range

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

Change availability status

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

Click on the icon shown in the image below to configure availability for each day of the week within the selected time frame.

Availability by day of the week

Set availability in single product

Go to “Booking availability” section in the product edit page to configure availability for the selected product.

Booking availability - Product settings

Besides adding availability rules as shown above, you can configure the following options:

  • Max bookings per unit: maximum number of bookings that can be accepted for the same day/month.
  • Allow booking no sooner than: the first available date will be automatically set x days/months since the date the user is making the booking.
  • Allow booking no later than: this is the latest available day for the booking and will be automatically set to x days/months since the date the user is making the booking.

Let’s make an example: suppose we want to configure your product so that the first available date for a booking is in two days’ time.
And suppose we don’t want that users can make a booking later than 5 days since they access the booking form.

If they access the form on 5th September 2016, the start date of the booking they can pick is between 7th September 2016 and 10th September 2016.

Booking availability options

Booking start date