Quick Tutorial: Create a WooCommerce Booking System with Price Calculator
The Barn2 blog is famous for revealing how to achieve specific use cases in WordPress and WooCommerce. Today, I advised a colleague how to set up a WooCommerce booking system for a window cleaning company.
As well as being able to book available time slots, they needed a price calculator to work out the correct price, including any extras.
In this post, I will share my suggested solution so that you can set it up on your own website! We’ll do it by combining two well-known WooCommerce extensions.
The brief – booking appointment system with calendar, integrated with an instant quote calculator and online payments
Phew, that sounds like a mouthful!
In a nutshell, my colleague wanted to build a booking appoint system for a window cleaner, which included a calendar showing his current availability. He also wanted an online price calculator which would take information provided by the customer, and use it to generate an instant quote. Customers would then be able to book a window clean for an available time slot, and pay the correct amount online via PayPal.
If you want something similar for your own website, keep reading. I’ll show you how to set up your WooCommerce booking system. It’s a great solution whether you’re a window cleaner, hairdresser, tutor, dog groomer, medical practitioner, or something else. You might even use it to sell bookable rooms or venues, such as hotel rooms or meeting rooms. All that matters is that you need a calendar-based booking system, with chargeable extras.
There are plenty of WordPress and WooCommerce and booking plugins. These let you set your availability and sell time slots or sessions. However, they don’t come complete with a price calculator where the customer can input their requirements and generate an instant quote, which they can then accept and pay for online.
There are also plenty of WordPress quote calculator plugins. You can even use Gravity Forms for this. However, these don’t integrate with any WooCommerce booking calendar plugins.
If you are a developer (or are willing to pay for one) then you could integrate the two. Unfortunately, this isn’t straightforward.
My colleague was building a website for a friend on a tight budget, so a bespoke integration wasn’t realistic. Instead, I advised him of a compromise solution that would achieve a similar result straight out of the box.
The solution – combine 2 plugins to take WooCommerce bookings with an instant price calculator
As we’ve seen, it’s complex to integrate a WordPress bookings plugin with a quote calculator plugin. As a compromise, you can achieve a similar result by combining two high quality plugins: WooCommerce Bookings with Product Add-Ons.
How the booking system and quote calculator work
Your customers will visit your website and view a product page for the service that you are selling time slots for. They will choose an available date and time from the calendar.
Underneath, they will see a services of optional extras which they can select before adding their chosen time slot to the cart. While the total price isn’t displayed on this page, the rice for each extra appears in brackets so that customers can make informed choices. Once they are happy with their selections, they can click ‘Book now’ to add everything to the cart.
On the cart page, the customer can view the total cost for their booking:
As the Administrator, you will receive an order confirmation email with all the booking information, extras and price.
Before you start
Before you start, I’m assuming that you already have a WordPress website with the free WooCommerce plugin set up. If you haven’t already done so, do this now. You should also set up your chosen payment gateways, such as PayPal.
1. Set up the WooCommerce Bookings plugin
- Install WooCommerce Bookings.
- Create a new product and call it ‘Window Clean’ (or whatever service you are allowing people to book).
- In the ‘Product Data’ section of the Add/Edit Product screen in WooCommerce, choose the ‘Bookable Product’ type.
- Add a base price for the product. (I’ll show you how customers can add extras in a minute.)
- Upload your availability to the bookable product so that it appears on a calendar.
Your customers can visit the single product page to select an available time slot and add the bookable product to the cart.
2. Use Product Add-Ons for the price calculator
- Install Product Add-Ons.
- When you create your bookable product, click on the ‘Add-Ons’ tab in the ‘Product Data’ section. Add as many add-ons as you require, each with their own price.
Think carefully about how to set up your add-ons because there are plenty of options. For example, you can have checkboxes, radio buttons or dropdowns. You can have quantity input fields where the customer enters the desired quantity (e.g. 10 if they have 10 windows) and the price increases accordingly. There are even text fields where the customer can add any further information.
Can I add my WooCommerce bookings to Google Calendar?
WooCommerce.com have helpfully provided an extension that lets you automatically add bookings to Google Calendar. This is a fantastic way to manage your time. It’s much quicker (and more reliable) than having to manually add each booking to your calendar.
Now you know how to use WooCommerce bookings to sell time slots alongside chargeable extras. It’s a neat alternative to using an actual price calculator plugin. It’s also much easier to set up than integrating a booking plugin with a full price calculator.
I hope you found it useful. Do you think it’s a good compromise? Let me know in the comments below!