How to use Pinpoint Booking System with WooCommerce

If you want to integrate a booking calendar with WooCommerce follow these steps:

Step 1 - Create a simple WooCommerce product.
Step 2 - Add a price to the product.
Step 3 - Attach a calendar in Pinpoint Booking System tab of that product, select a language and the style of the Add to cart button.

Below is an example of the calendar and the product creation and how they work together.

1. Create a calendar

Step 1 - Click on Calendars.
Step 2 - Click to add a new calendar. If you want to use an existing one, skip to Step 3.
Step 3 - Select a calendar and remember the name and the calendar id. It’s recommended to create availability and to add a price before linking it to the WooCommerce product but it can also be updated later.

2. Create a Simple WooCommerce product and attach a calendar

Step 1 - Click on the WooCommerce Products tab.
Step 2 - Click on Add New. The page where you can add the new product will be displayed. If you don’t want to create a new product you should select a product already created from the All Products tab.
Item 3 - Under the Product short description box you have to select the Product Data: Simple product.
Item 4 - Add a price. The price can’t be empty. The price added to the cart will be the one you set for days/hours in your calendars but the Add to cart button won’t show if you don’t have a product price set in WooCommerce.
Item 5 - Click on the Pinpoint Booking System tab of your product settings.
Item 6 - Select the calendar you want to attach to the product (when you click, a dropdown with all your calendars will be displayed). If you don’t see any calendars it means you are neither Admin or Calendar owner.
Item 7 - Select the language of the calendar.
Item 8 - Select the position of the calendar( product summary or product tabs).
Item 9 - Select the Add to cart button. You can choose from the WooCommerce button or the Pinpoint Booking System button.
Step 10 - After you finish editing your product, click on Publish to see the changes on your product page.

3. View the Booking Calendar on the Product page

Step 1 - Go to your product page.
Step 2 - Make a selection from the calendar.
Step 3 - Select the number of items you want to book.
Item 4 - At every step, when you make a change, the Reservation will update. If you add more items or if you choose more days, the prices will update accordingly.
Step 5 - Click Add to cart when you are ready. The add to cart behaviour can be changed. You can make it redirect you to the cart after you successfully add something or you can continue shopping. You can add more reservations from the same calendar or other calendars. If that period will be booked while you are still browsing the website or the periods of time selected overlap, an error message will appear.

4. View the reservation added in the Cart

Step 1 - After adding to cart, you will find the Reservation in it. Besides the price, the reservation contains the name of the calendar, a temporary reservation ID and the booked times.
Step 2 - Click on Proceed to checkout when you are ready.

5. Completing the order

Item 1 - The checkout page will require the billing address.
Item 2 - The billing address is important because it’s used by WooCommerce. At this point, it’ no longer part of Pinpoint Booking System and the confirmation email will be sent by WooCommerce.
Item 3 - Add additional information, if it’s the case.
Item 4 - Make the payment.

After completing the payment, the reservation can be found in the WooCommerce Orders tab. We also add the reservation in Pinpoint Booking System. It will look like a regular reservation with the Payment methods set to WooCommerce and will have the order ID attached to it. The order ID matches the order ID from WooCommerce.

The selected period for the reservation will be automatically marked as booked.

It is recommended to integrate Pinpoint Booking System with WooCommerce when:

You want to use a payment gateway that does not yet exist in Pinpoint Booking System (you can see the list of payment gateways available here).
You want to add multiple reservations in non-consecutive days/hours and want to check out only once.
You want to use the cart page.

Good to know:

The price is calculated from the price you set in your calendar, not from the WooCommerce product price.
It will not work with a variable product.
When you delete an order, it will delete the reservation.