Quick tutorial: Create a WooCommerce booking system with price calculator

WooCommerce boooking quote calculator pluginThe 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 WordPress site! 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 appointment system for a window cleaner, which included a calendar range 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.

The challenge

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: YITH WooCommerce Bookings with Product Options. These are compatible with WPML.

How the booking system and quote calculator work

WooCommerce booking system with price calculator

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:

WooCommerce bookable product in cart

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 and payment methods, such as PayPal.

1. Set up the WooCommerce Bookings plugin

  1. Install YITH WooCommerce Bookings.
  2. Create a new product and call it 'Window Clean' (or whatever service you are allowing people to book).
  3. In the 'Product Data' section of the Add/Edit Product screen in WooCommerce, choose the 'Bookable Product' type.
  4. Add a base booking price for the product. (I'll show you how customers can add extras in a minute.)
  5. Upload your availability (i.e. available dates) 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 in real-time.

2. Use product add-ons for the price calculator

  1. Install Product Options.
  2. Go to Products → Product Options and create as many add-ons as you require, each with their own price. At the top of the Add/Edit Option Group page, select which bookable product(s) or categories you want to display the extra add-on fields on.

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.

When the customer selects options, the total price will appear at the bottom.

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.

Wrapping up

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!

3 Comments

  1. It sounds good if you want to add extra products but in the case the extra product takes time (it extends the original booking) the booking duration remains the same. Which destroys the whole booking schedule...
    For example:
    There is a cleaning service and the block is 3 hours.
    The add-on service is ironing (1-2-3 hours)
    When the customer clicks on the options but the duration of the ironing is not added (extended) to the original cleaning service. The timeslot remains the same and overbooking could occur.
    Any suggestion?
    Thanks
    Alex

    • Hi, Alex. I see what you mean and good point. I suggest refraining from including any extras that would add more time to the booking. Instead, make those available as separate products that would have/require their own booking schedule/duration.

  2. Simply combine 2 plugins to take WooCommerce bookings with an instant price calculator

Please share your thoughts...

Your email address will not be published. Required fields are marked *