All bookings

From “YITH > Booking > Dashboard > “All bookings” you can see all bookings made on your store. When no bookings have been placed yet, a message is shown.

Booking dashboard new

The dashboard of all bookings enables you to filter and search the booking list, and use columns you can sort. (By default, it is sorted by ‘date from’).

All bookings filled

Within the ‘all bookings’ tab, you can find various sub-tabs depending on the booking status. The default list of views are ‘Upcoming’ and ‘All’. (Other tabs are automatically populated based on the statuses of your bookings).

The “Upcoming” view shows all current and future bookings (with visibility in the first column on when it starts).

The amount column refers to the order price, only if there is an order. (Only if you would edit the order item price manually, this price can differ from the booking price).

Booking status and icons

Each booking that is placed will be directly visible, you can distinguish the status of the booking not only by name, but also by color.

status colors

When hovering over some statuses, you will see the “Action icons” which you can use to directly change the booking status.

icons actions on bookings

The status transitions allowed through “action icons” are:
– Unpaid to Paid ( money icon )
– Paid to Completed ( black check icon )
– Pending to Confirmed ( blue check icon )
– Pending to Rejected ( red X icon )

Calendar

From YITH > Booking > Dashboard > “Calendar” you can see a calendar overview with all placed bookings.

Dashboard - Calendar view

You can filter by:

  • Product
  • Date and year
  • Month or day: You use the ‘Daily view‘ for hourly and/or per-minute bookings, you use the “Monthly view” for daily bookings.

Using the arrows beside the ‘month/day’ header, you can switch easily to the previous/next month or day.

You can also search on any terms available in the booking details.

monthly view

Bookings example in calendar

daily view

Day view in booking calendar

Each booking that is placed will be visible directly in the calendar, the color of the booking indicates the status of the booking.

Booking status

status colors

If you want to change the name of the shown booking (show only name, only product etc.), you can! Please check the specific settings on this page here.

Availability left

If you want to know how many seats, rooms, beds etc. are left for a certain booking product, that is possible! You can simply filter the product you want to see, select monthly view or daily view, select date and hit “filter”. 

Monthly view

days left in calendar

daily view

Availibility left daily view

The calendar view only shows the selected product, and its availability in the header of the specific day or time.

Note: This filter can only be applied to booking products that have the “Max bookings per unit” option greater than one.

Create a booking manually

From YITH > Booking > Dashboard > “Create booking” you can manually add new bookings

create booking button

Note: this is to create a “booking”, not to create the “booking product” itself.

create booking filled fields

You can decide to link the booking to an existing user, or a guest user. Search the booking product you want to use, add the dates and the number of people.

Below you will see the totals of the booking, and the button to create the booking.

The Assign to order” option let’s you decide to link the booking to an order or not:

assign booking to order

  • Don’t assign this booking to any order: the booking will be created without a linked order.
  • Assign this booking to a specific order: a new field will appear where you can add the specific order number.
  • Create new order for this booking: Booking will create a new booking and a new order. After creating both of them, you’ll be redirected to the “edit order” page to see the result.

assign booking to order redirect

This is the only way to add a ‘booking product‘, to an order. You cannot add a booking product to the order from the ‘edit order’ page.

Be careful if you choose to associate an already existing order.
This could cause issues with invoice management.

Edit booking page

From the ‘All bookings’ list, you can click on the booking ID number to enter the edit booking page.

edit booking page

You have an oversight of the booking details and the possibility to edit it. You can change the booking date and duration:

Edit booking date

Note: the admin should double check the availability before changing the date, because the calendar used in this page does not indicate the availability.

You can also edit the number of people and the booking services:

edit booking people services

Add notes

Another useful option is to add notes to the booking. These can either be private notes (only visible for the admin) or notes shared with the customer.

Private Note - note to customer

To distinguish them, you can see them in different colors, light grey for private notes, and blue for notes to customer.

When choosing the “Note to customer” option, the customer will also be informed per email, with this note.

Booking PDF

From the sidebar you have the option to download the customer PDF and the admin PDF, The admin PDF also includes the user information.

Customer pdf

customer pdf

When you (or the customer) would click on the product “Sydney Hostel” in this case, the user will be redirected to the frontend product page. When you click on the “order number” you will be redirected to the My Account > My orders page.

booking pdf for admin

As you can see, the same information as for the customer PDF + the user info.

When the admin clicks on the “Sydney Hostel” in this PDF, you will be redirected to the product edit page in the backend, the same goes for the “order number” you will be redirected to the order edit page in the backend.

General settings

From YITH > Settings > “General settings” you can decide which theme you want to use in combination with the booking plugin. We suggest to use our YITH Proteo theme, but you are free to use your own theme.

settings proteo activated

You only have to activate it by clicking on the link ‘activate’, and you are ready to go. The plugin will show a ‘check mark’ once the theme has been activated.

booking proteo integration

From Appearance > “Proteo Theme” you can find the 3 ‘Booking’ skins you can activate and use. These skins are ONLY available if you’ve purchased and activated the YITH WooCommerce Booking and Appointments plugin.

For more information on how to set up your Proteo theme, check out the documentation here.

Now we go back to the ‘General settings’ page, as from here you can also set some other general settings:

General settings booking

  • Set which categories to show in search forms:
    • All product categories: Useful if you do not sell non-booking products.
    • Choose specific product categories: Useful if you also sell non-booking products. Eg. you do not want to show the clothing category in the booking search form.
  • Reject a “Pending confirmation” booking after a specific time: Decide if you want to reject a booking automatically and set the amount of days.
    • The booking with pending confirmation will be rejected automatically when reaching the number of days you have previously configured.
  • Set paid booking to “Completed”: Decide if you want to set a booking to ‘completed’ automatically and set the amount of days.
    • The paid booking will be set to completed automatically, as soon as the End Date has been exceeded by the specified number of days.

Please note: it doesn’t take into account hours/minutes since the check is executed daily.

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 https://developers.google.com/maps/documentation/javascript/get-api-key, 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 > Booking > Settings > General settings > “Google Maps API Key”

Google api and geocode fields

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

settings-location

You can set 2 different API Keys for:

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

Google api and geocode fields

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:

Geocode-library

  • Now search for Geocode API and enable it.

geocode-library2

Geocode-library3

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.

add location to product

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″]

Booking form position

From YITH > Booking > Settings > “Booking forms” you can manage the booking form position on the single product page.

showing the booking form

  • Show booking form in booking product page to: Decide to show the form to all users or only to logged users. If you decide to show it only to logged users, guest users will not be able to place a booking.
  • Booking form position:
    • Default
    • Before summary
    • After title
    • Before description
    • After description
    • After summary
    • Use widget
    • None (use shortcode)

We especially want to highlight the “use widget” and the “none” options.

None – use shortcode

Selecting the None” option, allows you to use the “[booking_form]” shortcode to place the booking form anywhere you want. You can use it without any parameter on the product page.

If you want to use it on other pages, you’ll need to use a parameter (product ID), eg: “[booking_form id=123]”.

example shortcode

Use widget

Selecting the use widget” option, the special “Booking product form” widget becomes available. You can find this widget in Appearance > Widgets.

Add booking form widget

This widget needs to be added to the product page sidebar. If you are using the YITH Proteo Theme, you can use any Proteo additional sidebar (sidebar 2, sidebar 3, …), you should set the sidebar to be shown in the product pages.

Note: the widget is only shown on the product page. If your theme does not include a product page sidebar, you are not able to use this widget.
example widget

People in booking form

If you want to show the types in a unique field in the booking form, you can enable the option “People types layout” in the YITH > Booking > Settings > “Booking form” section.

booking form people settings

  • Show as dropdown: Click on “people” field in order to see the people types.
  • Show people type fields: People types are shown in the booking form.
    • Columns for people fields: Decide how many columns to show.

show people

How to enable people management for your bookable products? Take a look at this page here.

Services options

From YITH > Booking > Settings > “Booking forms”  you can manage the visibility of the services and their details.

booking form calendar options 2

  • Info to show before “Book” button: (Example)
    • Prices for services
    • Descriptions for services
    • Included services
    • Totals
  • Service info layout: (Example)
    • Show in tooltip
    • Show inline
  • In case of errors in the booking form: (Example)
    • Disable the “book” button and show messages when updating the form
    • Show error messages after clicking on the “book” button
Example with all services selected
frontend booking form example

Example of services layout inline and tooltip
show services info inline or tooltip

Example In case of errors in the booking form
error in booking form