Once you have a WooCommerce store that has a lot of bookable products, your customers will want to be able to search which are the products available on requested dates. A search utility gives your site more interactivity with your customers and encourages them to stay longer. We have Booking & Appointment Availability Search Widget in our Booking & Appointment Plugin for WooCommerce which allows customers to check the availability of each and every product before they book.
In this post, we will show you how to add and use Booking & Appointment Availability Search Widget in your WooCommerce store.
How does Booking & Appointment Availability Search Widget work?
Using our search widget, you can allow searching of the available products on your store in 3 ways, by Range of dates or by a Particular date and by Search by Category. Search by date range means the customer can search the products selecting the required Start and End date. Search by particular date means the customer can select a single date to search the products. For search by category, the customer can select the name of the category to search the products. Based on searched date and category, a list of all the available products will be displayed on the Shop page.
Where to find and add Booking & Appointment Availability Search Widget in WordPress?
Booking & Appointment Availability Search Widget can be found on Appearance-> Widgets page in your WordPress admin area along with all the widgets from WordPress, WooCommerce plugins are available. On your right hand, you will find the designated areas on your WordPress site where you can place the widget. These designated areas are defined by your WordPress theme. They are called sidebars or widget-ready areas.
Booking & Appointment Availability Search Widget
Adding the Booking & Appointment Availability Search Widget to your site frontend
There are multiple ways to add widgets to sidebars available in your WordPress theme. Below is one of the ways to add the search widget to the sidebar. Click on Booking & Appointment Availability Search widget-> Select Sidebar-> Click on Add Widget button. The sidebars will differ depending on the theme you are using on your site.
Add Widget button
Setting labels to the widget fields
Now you can see Booking & Appointment Availability Search widget is added to the sidebar. Below is the list of fields where you can set the label as per your business requirements.
Title Label: Set title of the search widget. e.g “Search Availability of Product”
Start Date Label: Set start date label. e.g “Start Date”
End Date Label: Set end date label. e.g “End Date”
Hide End date field: Tick this option if you don’t wish to display the end date field.
Search By Category: Tick this option to search by product category
Show only Child Categories: Tick this option to simply show child categories.
Category Title: Add Category title for product search. e.g “Choose a Category”
Search By Resource: To enable searching booking products by their resources, tick this option
Resource Title: Add Resource title for product search. e.g “Choose a Resource”
Search Button Label: Set text to be displayed on the button. e.g “Search”
Clear Button Label: Set clear button label. e.g “Clear”
Text: Setting text to this will display a short note. e.g “Enter Start Date and End Date to check the availability of products on the specified dates”
At the bottom of the form, you can see Hide the End Date Field option. If you want your customer to search the availability of the products by selecting a particular date then you can enable this option so that on the frontend only a start date field will appear to choose the date.
Once the labels are set and option enabled/disabled as per requirement, click on Save button to save the data for widget.
Adding details for Booking & Appointment Availability Search
How to find available bookings by a date range?
On the front end of the website, our search widget will be displayed in the sidebar. You can select required date range in Start Date and End Date calendar and search by clicking on Search button. Once searched, all the products which are available within that date range will be listed on the Shop page as shown below:
Products available within that date range
If you select any product from the search result, that product will have the searched dates pre-populated in the booking fields as shown below:
Pre-populated date by date range search
If you have enabled Hide the End Date Field option then the customer can search products only for a particular date. All the available products on that particular date will be listed on the Shop page as shown below:
Available products on particular date search
If you select any product from the search result, that product will have the searched dates pre-populated in the booking fields as shown below:
Pre-populated date by particular date search
How to find available bookings by a ‘Choose a category’ option?
On similar lines as we did for search product by date range, here we will select a particular category from the search widget. Click on dropdown of All Categories and select a category for displaying products.
Note: Choose Category is the option, using which you can have functionality of search, based on product category.
As you can see in the below image, we have selected Hotels & Stay as the category, hence all the products with this assigned category will be displayed.
Selecting category to search products
Once you click on Search Product button after selecting category, all the products with category Hotels & Stay will be displayed as shown below:
Products displayed as er the selected category
If you select any product from the search result, that product will have the searched dates pre-populated in the booking fields as shown below:
Search dates pre-populated in the booking field
If you have chosen to only display child category as shown below, then on the frontened, your customers will be able to only choose from child categories from the dropdown:
For instance, you have two child categories, one of them is ‘Booking for Guitar classes’.
If you have selected this child category, then on the frontend, you will be displayed those booking products.
If you have entered a child category and selected a date range, then based on these, you will be displayed those booking products.
How to find available bookings by a ‘Choose a Resource’ option?
Just as we searched for product by categories, here we will select a Resource from the search widget.
Click on the dropdown of Select Resources to select a Resource for displaying products. Resource Tanisha is available for two bookable products as shown here:
If you select a date range and then select a Resource, your products will be shown accordingly:
For instance, after adding the dates you wish to book, select the resource as shown above. You can select ‘Nathan’ who is the Tour Guide as the resource. Press the Search button and all the products with this assigned resource will be displayed. In this case, it is the Mumbai Ferry Tour.
If you have enabled searching a booking by resources and child categories then your Booking widget will appear like this:
After selecting the resource and category, you will get the booking products for your search result as shown above. In that instance, for the child category ‘Booking for Guitar Classes’ and resource ‘Tanisha’ (who is the teacher), the bookable products are ‘Advanced Guitar lessons’ and ‘Guitar lessons for beginners’.
Similarly, if you also add a Date Range along with Resources and Categories as shown below, you will see that only ‘Advanced Guitar lessons’ product is available:
That’s all, we hope this post helped you to learn how to add and use Booking & Appointment Availability Search widget in your WooCommerce Store.
Conclusion
The setup for Booking & Appointment Availability Search widget of our Booking & Appointment Plugin for WooCommerce is quick and easy. The widget adds an advantage to your site as it would help your customers to see the list of products which are available for their required dates and category in a glance before they place the order.
You can have a better user experience using this widget. It will search all the products that are available for your booking dates and you can add the product to the cart without selecting the dates again.