Table of Contents
Imagine a place like the Maldives, or the Amalfi coast in Italy. What’s the one thing that will immediately pop up in your head when you think about them? Right, the endless sea & scenic oceans. Many tourists would enjoy them & that’s why water vehicles such as boats, kayaks, yachts are so popular! An online booking store that caters to accepting advance boat tour bookings is especially the right option for not just your local audience but also for international tourists. Today, let’s learn to set up an online boat tour booking & boat rental store with WooCommerce.
How to set up an online boat tour booking store with WooCommerce?
The very first step is getting started with a WordPress site. After this, you can install the WooCommerce plugin on it. We’ll also add the Storefront theme to our site. Once this is done, we can start adding our boat tour bookings and boats as WooCommerce Products. If Storefront isn’t what you’re looking for, we can also recommend Astra. The Astra WordPress theme is designed to work seamlessly with WooCommerce and delivers the speed, flexibility and capability you’re looking for in a rental store.
Adding products to your store
In order to add your product to the store, you will have to go to Dashboard > Products > Add New as shown below:
Now, you can enter each and every detail for your boat tour booking over here. For example, we will add our Boat tour name as Copenhagen Canal Boat Tour. We will also add a Product Category to it, which is ‘Boat Tour’.
On the right-hand side, you will find the ‘Publish’ button which will publish our product on our store. Before we click on that, we will scroll down a little to enter the Price of our Product and also give a brief description about it as shown below:
We will also add an Image for our product as shown below:
Our Boat Tour as a product is ready & so we will click on the Publish button. Here’s how it will appear on the frontend:
Adding extra required fields for the bookings
Now, we want to know the number of adults, number of children, and the Pickup destination from which they would all be joining the boat tour. So, we will add some additional product input fields on the Frontend to get information regarding all of these details.
For this, we will use our Product Input Fields for WooCommerce plugin.
For a price of $39/year for a single store, it will offer you the ability to customize various input field types such as text, textarea, select, checkbox, email, phone, datepicker, timepicker, and more!
After you have installed the plugin and activated its license, we will go to the Edit Page of the product that we just created. When we scroll down, we will find a new metabox to add our Prdocut Input fields which will be titled ‘Product Input Fields Total Number’. Here we can add in the number of product input fields we want. For example, we wish to add 3 new input fields, so we will choose our Total Product Input Fields as 3 as shown below:
Once we’re done here, we can click on the ‘Update’ button. After this, our three different product input fields will appear. Let us make changes to them.
The first product input field that we wish to add is the count for the number of adults who would be booking the boat tour. So in the metabox which says ‘Product Input Fields #1‘ we shall enter our details. We will enable the field first by checking the Enable box.
Next, under Field Type we will select ‘Number’ because we wish our customers to select a number. We will make this Field mandatory by checking the ‘Required’ box. Lastly, under Title, we will type ‘Number of Adults’. You can see all of them here:
Moving on, we wish to create a few restrictions to our field. So under the Input Restrictions section, we will add the Minimum value of 1, because we want our customers to select the booking for at least 1 Adult. Also, we will set the Maximum value to 30, which would mean that booking can be done for 30 Adults in one go but not beyond that.
We also wish to add additional prices for the Input fields that would be selected by our customers. So, we will Enable the pricing option by ticking its checkbox. Under Condition, we will select ‘Based on Number and Quantity’, because we wish the total price to be calculated by combining both of them. Lastly, we will add the Price to $15.
Here’s how our metabox will appear after we have added these settings:
This would mean that the total price would be calculated depending on the Quantity selected & the Number of Adults selected by the customer.
Similar to how we filled the settings for the Adults input field, we will do it for the Child input field. So in the ‘Product Input Fields #2‘ we will enter our details as such:
It’s important to note that we left the Minimum value blank because many customers might not book a seat for a child.
Lastly, for our third input field which is ‘Product Input Fields #3‘ we wish to know where would we be picking our customers from. So for this input field, we will select the Type as ‘Radio’ because we wish to provide radio button options on the product page. Next, under Title, we will add ‘Pick Up’ as shown below:
Moving forward, we will add the options
Once we have configured all of these settings, we will once again click on the ‘Update’ button.
Frontend Display
Here’s how our input fields will appear on the frontend:
When a customer chooses their options, here’s how our settings will work:
Now, moving on, we need our customers to be able to select a Date as well as Time to know exactly which tour suits their availability. We have two solutions for this!
Solution A
For this, we can add more two product input fields where one of the Input Field Type would be Datepicker, while the other would be Timepicker. Our Datepicker Input field will be Product Input Field #4 & along with some common settings, we would have Datepicker type settings that would look like this:
On the other hand, our Timepicker Input field will be Product Input Field #5 & here are its Type settings:
You can configure the particular type settings you want for these two fields.
Frontend Display
Once you’re done the frontend would appear as such:
This solution might work out for you if you are starting out small & can ensure to create boat tours at the exact time & date your customer selects. But if you looking for something that can help you block a date after some bookings, add Crew members or Tour guides as resources, ensure that the booking time is automatically adjusted to your customer’s time zone, and more, then you can look at our second solution.
Solution B – Using Booking & Appointment Plugin for WooCommerce plugin
Our Booking & Appointment Plugin for WooCommerce can convert your site into a fully functioning booking business. It is highly flexible & comes with a wide range of features & customizations. For a single site, it’ll cost $119/year. So, let’s start using the plugin.
After you have downloaded and activated the plugin, you can go to the Edit Page of our product. Then you can scroll down to find the Booking metabox as displayed here:
To begin with, we will enable Booking and choose our Booking Type. The Booking & Appointment plugin offers different types of bookings such as bookings for Single Days, Fixed Date and Time, Multiple Date and Time, Duration based, and so on.
For our Boat tour, we will go with the Booking Type ‘Fixed Time’.
Next, we will go to the Availability tab, the first setting that we will see over there is the Advance Booking Period (in hours). This setting will allow us to enter the advance notice period for a booking. For example, we will enter 12 because we want the booking for this boat tour to be done only 12 hours prior to the booking date.
Moving on, the Number of dates to choose field will let us add the maximum number of days for our bookings from the present date. We will add 365 because we wish to show dates for a year when our customers are making their bookings.
Since, we want our bookings to be available on all the days, so we will keep all the days Bookable. We will set our maximum booking to 120 for all these days because further ahead we would also be setting maximum bookings for our timeslots which would be 30 bookings on a single day. These settings would thus be available every week on our site.
If you want, you add different prices for bookings on these different days but for now, we won’t be doing that. You can make your booking dates available based on specific Dates or Months by enabling Set Availability by Dates/Months setting. For now, we won’t be enabling this setting.
Instead, we will move on to adding our timeslots for the days by clicking on ‘Add New Timeslot’ as shown below:
We wish to set particular timeslots for all the days of the week, so under the Weekday field, we will select All.
Next, we will add the timings of our timeslots under From and To fields. We will also enter the Maximum Bookings that we’re accepting for these time slots.
We wish to have our timeslots as 11 am to 12 pm, 12 pm to 1 pm, 3 pm to 4 pm, and lastly 4 pm to 5 pm. So we will enter the details like this:
Don’t forget to click on Save Changes once you’re done!
If you wish to keep a tab on your bookings via your Google Calendar then you can integrate the plugin by following these steps. Then, you can go to the Integrations tab under the Booking metabox and click on Google Calendar Sync as shown below:
Enable the Integration mode and click on Save Changes. Once, you’re done you can click on the Update button of the Edit Product Page.
Now, we wish to change the names of the field for Booking Date and Booking Time. For this we will go to Dashboard > Booking > Settings > Labels & Messages where we’ll change the following fields:
Instead of the words Start Date, we will go with Departure Date & instead of booking time, we will go with Departure Time:
We’ll make this change for both Labels on the Product Page & Labels on Checkout Page and save our settings:
Next, we wish to enable the timezone conversion feature for our international audience. So we’ll go to Dashboard > Booking > Settings > General Settings.
We also wish to let our customers edit their boat tour bookings & reschedule them. We will scroll down and tick the checkboxes for them like this:
In the end, we’ll click on Save Settings & Voila! we’re done.
Frontend Display
Here’s how our boat tour will appear on the Frontend:
When we click on the Departure Date, here’s how the inline calendar will look like:
After this, we have selected our booking date as 18th August 2021. Since we had set the maximum bookings to 120, those many bookings would be available as shown below:
We’ll then choose our time from the dropdown. The timeslot that we’ve gone with is 11:00 AM to 12:00 PM. Once you select it, the maximum number of bookings will be shown as 30 for that particular timeslot:
We’ll fill in our other details like this:
Then, we’ll move to the Cart Page:
As you can see, the customer will get to see the Edit Booking button. It would also be visible to them on the Checkout Page as shown below:
If your customer clicks on it then they’ll get to view these settings where they can easily edit their booking date and time:
Once they have placed an order, here’s how their Order Received Page will look like:
If the customer goes to their Account, then they can reschedule their booking over there by going to the Orders section and select their booking. Once, it is clicked on, here’s what will appear:
If your customer clicks on the Reschedule Booking button then they’ll get to view these settings:
In a similar manner, you can add more tours as products and configure the necessary settings that suit you.
How to set up an online boat rental booking store with WooCommerce?
Now, let’s add our boats to our site to offer them for rent. Just like we did earlier, we will add our product first. We’ll enter all the necessary details such as name, price, product image, etc, and publish our product.
We will then download & activate the Rental System Addon for Booking & Appointment plugin for WooCommerce. This is a Booking & Appointment plugin addon that will provide you settings that are exclusively for rental businesses. You can get it for $79/year for a single store. You can even purchase a higher plan such as one for Five Stores – $149 or the one for Unlimited Stores – $249.
Now, we will go to the Edit page of our product and go to the Booking meta box. Select the General tab in it and enable the booking for this product. Our Booking type would be Multiple Nights this time which is best for rentals.
This time, we will also get to see a new setting called ‘Allow sale and rent’ which we will enable. Next, we will select the ‘Rent’ option. We will also tick the Booking Resource checkbox because this time we wish to add Crew members to our boat rental.
Next, we shall move on to the Availability tab where we will keep our Number of dates to choose as 30 and Maximum bookings On Any Date as 10. Here, Mondays will be unbookable.
Now we shall add our Resources by going to the Resource tab. Resources are those items or people that can be included while we are renting out our boat.
We will enter ‘Crew’ under the Label field. For Resources are, we will select the dropdown option ‘Chosen by Customer’. Our customers will get to choose which resource they can select when they rent our boat.
Next, we will click on Add/link Resource’ to our new resources.
We will add two new resources. One would be named ‘Professional Skipper’ while the other would be ‘Without Professional Skipper’. We shall add prices for these resources as well.
However, we’d suggest you not to limit yourself to just adding prices for your resources. That’s because the Booking & Appointment plugin for WooCommerce gives you the ability to enter the availability of each resource as well.
This means, that you can configure their availbility based on date range, specific dates, specific time, days, and so much more by going to that Resource’s edit page from Booking > Resources.
You can also simply click on the button beside the Trash can icon. This will redirect you to that Resource’s edit page. For now, we will simply stick to adding a price for each resource.
We want 2 days to be disabled before the start date after the lockout is reached. So, we will go to Rental Settings tab & set Book prior days of start date field as 2.
We will set Book later days of end date field as 5. This is because we wish to have 5 days disabled after the End date after the lockout is reached
We will also enable the Flat charge per day setting. We don’t wish to Allow same day bookings to rent our boats. So, we will let it stay as it is.
Once this is done, we can save our settings.
On the frontend, we wish to change the Check-out Date label so we will go to Booking > Labels & Messages and under Check-out Date field we will enter Return Date for all our pages.
Frontend Display
Finally, we can see our product on the front end which will appear like this:
As you can see the labels have been changed & our resources have also been added. When a customer will try to choose a Resource, they will get to view the two resources in the dropdown.
When they will try to book the Departure Date, they will get to view the inline calendar. Bookings won’t be available on Mondays since that was our setting.
For instance, we have decided to go with 24th August as our Departure date. Our Return Date is 26th August. Adding the prices our total is as shown below:
After clicking on Book Now, the customer can proceed to the Cart Page. This is where all the details will appear once again. The customer will even get the ‘Edit Booking’ option along their Checkout journey.
Lastly, the Checkout Page will look like this for your customers!
In this manner, you can add different boats as products & create a page full of the boats included in your Boat Rental category!
Conclusion
When you’re running a Boat Tour & Boat rental company, you have a lot to manage- Boat Maintenance, tour bookings or ticket sales, Staffing issues, and so on. Necessary tools can help you run your business in a smoother, efficient, and professional manner.
With our Booking & Appointment and Product Input Fields plugins and our Rental System Addon, you’ll be able to streamline your business and create a successful online Boat Tour & Boat Rental store.
