View Product Page

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

Calendar options

From YITH > Booking > Settings > “Customizations” you can manage the way you want to show the date picker and calendar in the booking form.

You can select format of the date and the time picker in the calendar view.

Date and time picker format

  • Date picker format
  • Time picker format

There is also an option to add a custom format. When you select your preference, you can see the preview below your selection.


Now we can go back to YITH > Booking > Settings > “Booking forms” to manage the style and layout of the calendar shown to the customers.

show calendar options settings

  • Date range picker layout: Decide to show it in a single line or separate lines.
  • Date range picker columns: Decide to show it in a single column or 2 columns.
examples of layout and columns

show calendar options

  • Calendar style: Decide to show the calendar as a dropdown or inline in the page.

calendar inline or dropdown example

  • In calendar load: How many months are loaded in the calendar, we recommend 3. (You will be able to see the complete year, other months are loaded in AJAX to improve performance).

booking form calendar options

  • Check min/max duration: Enable so the plugin considers the min and max duration to show available dates in the calendar.
  • Update non-available dates on loading (AJAX): Only enable if you use plugins to cache product pages.
  • Disable day if no time is available: Enable to hide days in calendar if no time is available.