Search

A Beginner’s Guide to Creating a Booking Website with WooCommerce Bookings

    Lavanya Deshmukh
Listen to this article

What do hotel, a party hall, and salon have in common?

They all need a booking website.

Although this sounds like we came up with a terrible joke, a booking website can actually make a world of difference. It can simplify the job of handling and managing all your clients by a lot.

And this guide will take you through setting up a booking website of your own by using the popular WooCommerce Bookings plugin.

Before we start, let’s talk about the must-have features for a booking website.

Must-have features for a Booking Website

1. Real-time Booking process 

The booking process on your website shouldn’t require the customer to send you a request. Then wait for you to confirm the booking. Say through a contact form. Customers should be able to book desired slots and they should be automatically added to your calendar. Which brings us to our next feature 

2. A Calendar

 The purpose of automating your booking process is to make things easier and run smoothly. A calendar that shows you all the bookings arranged properly in a color-coded manner makes for easy management and tracking. 

Now, a search option for users can help them see which dates are available and help them plan their bookings accordingly. However, this isn’t built into WooCommerce Bookings, but can be easily added with some custom development

3. Multiple Payment Options 

 A part of making it super easy to make bookings is to offer multiple payment options. So the customer isn’t restricted to just one mode of payment. This is one benefit you have with using the WooCommerce bookings plugin. You can take advantage of WooCommerce’s flexibility when it comes to payments and also include local payment options. 

4. Cancellations and Refunds

You need put in place a system to allow customers to cancel bookings and how to process refunds 

5. Flexible Pricing 

For establishments like hotels and resorts often prices will differ for the weekend, for tourist season, holidays, etc. Similarly, for Spa or a Salon, you might want to offer a lower rate for a day as a promotional offer. Your booking website should be able to accommodate these changes in prices.

Now, jumping into the actual process of setting up a booking website.

Step 1: Set up a website with WordPress

Now, if you want to add booking functionalities to an existing website, you can skip ahead.

This step is only necessary if you’re building a booking website from scratch. WordPress makes setting up websites super easy and it’s completely beginner-friendly.

You’ll need to do a couple of things: 

  1. Get a domain name and hosting
    We recommend that you get a hosting service provider like Bluehost, Siteground, or WPEngine. This will have you all set up with a domain name and hosting without much hassle. And you also get perks like SSL certificates, backups, and recovery
  2. Install WordPress 
    If you go with a ‘Managed WordPress Hosting’ plan, your hosting provider will install and set up WordPress for you. Otherwise, you’ll need to download and install your free copy of WordPress from here.
  3. Pick a theme that suits your business
    There is a wide range of WordPress themes for every type of business. Kallyas is a good theme for a hotel or a resort. Jevelin is great for Spas or Salons.
  4. Customize it to your brand
    Personalize the theme to reflect your brand, switch the colors, add your logo. You can do this from the Appearance -> Themes section on your Dashboard.
  5. Add/Edit pages like Home, About us or Contact us
    Edit the home page, about us, and contact pages with your content and images. Set up any additional pages as required.

For more details on all of these steps, you can read this guide.

Step 2: Install WooCommerce and WooCommerce Bookings

WooCommerce Bookings is an extension plugin for the popular WordPress e-commerce plugin – WooCommerce. So we’ll need to install both to set up our booking functionality. 

To do so, from your admin dashboard, go to Appearance -> ‘Plugins’ click on ‘Add New’.

Search for ‘WooCommerce’,  Install and Activate. The WooCommerce Setup wizard will pop up and will take you through setting up the plugin. All the options can also be modified later on. At the end of it, a new ‘WooCommerce’ section will appear on your Dashboard Menu.

Next, install and activate the ‘WooCommerce Bookings’ plugin. You will see another section called ‘Bookings’ appear in your WooCommerce menu.

This section can be used to configure the various Bookings settings. But first, to start accepting bookings, we have to create a bookable product.

Step 3:  Create a Bookable Product

Since WooCommerce is an e-commerce store plugin, WooCommerce Bookings functions by creating ‘Bookable Products’. To make a booking,

1. A customer adds the bookable product to the cart. 
2. All details are filled out in a booking form.
3. And then the customer pays for the booking at checkout.

Adding a new product:

If you’re familiar with the workings of WooCommerce, this should be a cake-walk. For creating a bookable product, go to WooCommerce -> Products -> Add new.

On the product page that opens up, add a title and an informative description. Also, add images and any categories or tags.

Scroll to Product Data.

To turn this into a booking specify the product type to be ‘Bookable Product’. And be sure to check the ‘virtual’ checkbox. This omits all shipping related fields from the tab.

TZMIPQlOxWz3c3Nu hCdyAZngA6jix 2A3UOohoZhEUr2fgBk67QnlBB7LRW6sv1pAIS51P50KecTAYm3MFuTN7IxwayRspBJ5 0J05D5iFZ3MR1
Image Courtesy: WooCommerce


Booking duration is for how long the booking can be made by the customer and it can be configured in two ways:

Using fixed blocks – When you want the customer to book only one slot of a fixed duration

For example, if you offer hour-long fitness classes, you can create fixed blocks of 1 hour. And for a doctor, this can be 20 mins consultation appointments. 

Using customer-defined blocks – When you want the customer to be able to book any number of slots

The duration is still fixed – 1 day, 1 hour, 20 mins. But the customer can pick how many slots she wants to book. You also have the option of setting a min and max number allowed for making a booking.

For example, if you have a hotel, the fixed duration is ‘1 day’. The person making the booking can choose how many days they would like to book a room. You can set the minimum value as ‘1 day’ and the maximum value as ‘5 days’ if you wish to.

Step 5: Adding People and Resouces to the Bookable Products

A booking can include multiple people. For example, someone can book a hotel room for 1 child and 2 adults. If you want to offer the same, check the ‘Has persons’ boxThis adds a separate ‘Persons’ tab that you can use to set up the details. These bookings would be handled accordingly.

Image Courtesy: WooCommerce

Similarly, check the ‘Has resources’ checkbox if you want to offer multiple bookable items in one booking. This could be activities (kayaking, snorkeling), tickets (child ticket, adult ticket), or room types(Delux, suite). You can even use this option for trainers or different personnel that work in your establishment.

Step 6: Set up Booking Costs

For setting up pricing with WooCommerce, you have to mainly configure 2 things:

Base cost: Which is added by default (you can also leave this as 0)
Block cost: cost per block the customer has booked

Base cost + Block Cost * the number of blocks is the default price that will be displayed.

You can also price the product differently for specific date ranges(holiday season, weekend), time period, or add extra charges ( additional person + resources ). Do this using the ‘Add Range’ button.

t7j2VjrV f6E9tBWmOzK5Pl2
Image Courtesy: WooCommerce

If any of the rules are satisfied the default price get’s recalculated and replaced according to the rule defined.

Step 7: Configure the Booking Process

Here is an example of the default booking form that users see at the front end. The booking calendar shows up after a user clicks on the Bookable product. Configure it to ‘display all the time’ or ‘display when clicked’ from the product data settings.

The cart total is updated as the booking is made. The checkout process remains the same.

BSXOKeFN55ZLjpGFknKql5IaJRUiO2BdtqeSfPvwcF07li8Owdhk3FnuUNHm6zX5bjZz2oy SUaWRvKaFCSAiOfJ6nrwf Hs9ml8opLja8LZ3AwCo1nC2 K3x4DL9edj9s 7TnA



The dates available for booking can be customized using availability rules.

The Availability tab in the Product Data section allows you to define these rules. The process is similar to the one we went over when configuring pricing rules.

Except here, instead of cost, you need to specify if the product is bookable between the specified date ranges and the priority of the rule. Rule of higher priority trump those of lower priority. The highest priority is 1.

RKKPj51a27bbxSIv5r8ARvW kS95NAydO uc2h06HocGxNm8njgDli0Z VkgL01WgZYYtpoMoR6XGhdBqZOK3I0LFR9LYzE HZmkAz90hIehDejPBBCKnEmNuTtJoqUhjMIgQi4
Image Courtesy: WooCommerce

By default, unavailable slots or slots that have been already book will not be made available for booking. Hence there is no double booking.

If you want to add a public calendar that displays the blocked off slots etc, you’ll need a separate extension called WooCommerce Availability.

Recommended Reading: 6 much-needed features in WooCommerce Bookings

Step 8: Confirmation and Cancellations of Bookings

Enable these settings from the ‘Product Data’ page.

TZMIPQlOxWz3c3Nu hCdyAZngA6jix 2A3UOohoZhEUr2fgBk67QnlBB7LRW6sv1pAIS51P50KecTAYm3MFuTN7IxwayRspBJ5 0J05D5iFZ3MR1
Image Courtesy: WooCommerce


Check the ‘Requires Confirmation’ box. This will require the admin’s approval before the booking can be confirmed. Payment will not be taken during the booking process and the checkout page will look something this.

u Y8h1 F Bh ZzxSjppORnHhh8pbon0RJJ7Qgs KWkfFZ0kNd ZrNYr 3dxFO59slZuKsJTqhn9LuoOCMJ4kQqnZhc0WWOSj22Rcbx7RILU7FqUYc45dTWLGv174Er0CdK baQ


Check the ‘Can be canceled? ‘ box to allow cancellation of bookings. You can mention how long before the start date the booking can be canceled. Refunds, however, need to be processed manually.

WsG1ZkR1vuFf7XM42353zJzKzw0yN9YR8P YhN99gl7mMF9 oiCVxANTwZ2ONqpf3
Image Courtesy: WooCommerce

Step 9: Managing Bookings

To manage your booking conveniently you can see all your bookings right at the WooCommerce Bookings Dashboard. The list is reverse-chronological, showing the latest booking at the top. View or edit individual bookings from here. Additionally, you can add a new appointment manually.

d4KdPTHb3Ly7Awlt3hwhpeTrGZmG simVFgyaZ7wrZGDLzndtWFJEN 56L8hq6lLEQtHNIAeK9EXaOJz8pkxNAW ULZvAnEfE2UqudXGgV4HokHTqdkrZhx6Kzas6u ASTkz2EM
Image Courtesy: WooCommerce

You can filter this view based on dates, status, or product/resource. You can take bulk actions on this filtered view.

A calendar view is available as well. View your schedule for the day or month in an easy-to-understand manner. You can filter this view as well.

WooCommerce Bookings supports Google Calendar. This means that you can access your schedule on the go, and keep track of everything you have going on.

Step 10: Setting up Payment Methods

Our booking website is built on top of WooCommerce. Hence it uses the payment methods available in WooCommerce. So if you skipped this step during the initial setup, go to WooCommerce -> Settings -> Payments.

You’ll be able to enable the various offline and online options available from here – Direct Bank Transfer, PayPal, Cash on Delivery, and Checks. Each option has it’s own ‘Set Up’ page that you can access from the same page and configure details.

To add Stripe to your list of payment options you will need to add the free Stripe extension from WooCommerce.

The WooCommerce Payments extension can be used to further simplify managing and handling payments, refunds, and payment methods. However, do ensure that it is available for the country you are located in.

Over to you!

This is where we end our journey, its now your turn to go ahead and set up your booking website.

We hope this guide helped put you on the right path. If you have any other questions please do leave them in the comments and we’ll do our best to answer them 🙂 

Picture of Lavanya Deshmukh

Lavanya Deshmukh

Leave a Reply

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

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads