View Product Page

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.

All bookings page

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’).

Upcoming bookings

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.

Bookings calendar

You can filter by:

  • Product
  • Resource (requires the Resource module to be enabled)
  • 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
Bookings - daily view

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.

Calendar by resource

From this view, you can also filter bookings by the selected resources and see a calenar of the specific resource.

This is very useful, for example, if your resources are staff members and you want them to see an updated calendar of their day.

Filter calendar by resource

Create a booking manually

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

New booking

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

Create new booking from admin panel

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, if enabled, the number of people, resources, services etc.

Note: When creating a booking, all the dates included must be available and consecutive. For example, users can’t book any product or service from October 1st to October 10th if the 5th and 6th have been already booked by another customer.

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.
Order with booking

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.

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.
      If this option is not available in your installation, make sure you have enabled the related module from YITH > Add-ons > Modules.
  • 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.

First of all, you have to generate and copy your “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

Now, make sure you have enabled the Google Maps module from YITH > Add-ons > Modules.

Now, you will be able see the Google Maps API Key fields in YITH > Booking > Settings > General settings > “Google Maps API Key”: copy and paste the key there.

Google api and geocode fields

Now open your product settings (Booking Options > Settings > Google Maps), 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
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.

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

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.

Please, note that these options are only visible if you have enabled the Services module from YITH > Booking > Add-ons > Modules.

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