1. Home
  2. Booking & Appointment Plugin for WooCommerce
  3. Search Product Availability using Booking Widget

Search Product Availability using Booking Widget

Once you have a WooCommerce store that has a lot of bookable products, your customers will want to be able to search for the products available on the requested dates. A search option will not only improves the user experience but also improves the visibility of the related products and lets your customer quickly make a booking.

The Booking & Appointment Availability Search Widget in our Booking & Appointment Plugin for WooCommerce allows customers to check the availability of each and every product before they book.

How does it work?

Using our search widget, you can provide 3 types of searches: Range of dates, Particular date, and Search by Category.

  1. Search by date range means the customer can search the products by selecting the required Start and End date.
  2. Search by particular date means the customer can select a single date to search the products.
  3. Search by category, the customer can select the name of the category to search for the products. Based on the searched date and category, a list of all the available products will be displayed on the Shop page.

Adding Booking & Appointment Availability Search Widget in WordPress

Booking & Appointment Availability Search Widget can be found on the Appearance-> Widgets page, where all the available WordPress and WooCommerce widgets will be present. 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- Booking & Appointment Availability Search Widget

Booking & Appointment Availability Search Widget

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.

Booking & Appointment Availability Search Widget- Add Widget button

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 the “Hide 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 front end only a start date field will appear to choose the date.

Once the labels are set and the options are enabled/disabled as per requirement, click on the Save button to save the data for widget.

Search Product Availability using Booking Widget - Tyche Softwares Documentation

Search Product Availability using Booking Widget - Tyche Softwares Documentation

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 the required date range in Start Date and End Date on the calendar and search by clicking on the Search button.

Once searched, all the products which are available within that date range will be listed on the Shop page as shown below:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

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:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

Pre-populated date by date range search

If you have enabled the Hide 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:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

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:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

Pre-populated date by particular date search

How to find available bookings by a ‘Choose a category’ option?

Along with the search product by date range, we can also select a particular category from the search widget. Click on the dropdown of All Categories and select a category for displaying products.

Note: Choose Category is an option, using which you can have the functionality of search based on the 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.

Search Product Availability using Booking Widget - Tyche Softwares Documentation

Selecting category to search products

Once you click on the Search Product button after selecting a category, all the products with the category Hotels & Stay will be displayed as shown below:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

Products displayed as per 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 Product Availability using Booking Widget - Tyche Softwares Documentation

Search dates pre-populated in the booking field

If you have chosen to only display the child category as shown below, then on the front end, your customers will be able to only choose from child categories from the dropdown:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

For instance, you have two child categories- ‘Booking for Guitar classes’ and ‘Hoodies’. 

Search Product Availability using Booking Widget - Tyche Softwares Documentation

If you have selected the ‘Booking for Guitar class’ child category, then on the front end, you will be displayed those booking products.

Search Product Availability using Booking Widget - Tyche Softwares Documentation

If you have entered a child category and selected a date range, then based on the inputs, related booking products will be displayed.

Search Product Availability using Booking Widget - Tyche Softwares Documentation

How to find available bookings by a ‘Choose a Resource’ option?

Just as we searched for the product by categories, here we will select a Resource from the search widget.

Search Product Availability using Booking Widget - Tyche Softwares Documentation

Click on the dropdown of Select Resources to select a Resource for displaying products. Since we are seeing a Guitar Booking class, the resources will be teachers.

For this example, the Resource (teacher) Tanisha is available for two bookable products as shown here:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

If you select a date range and then select a Resource, your products will be shown accordingly:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

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. When you press the Search button, all the products that are assigned with the resource Nathan 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:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

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 the ‘Advanced Guitar lessons’ product is available:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

That’s all, we hope this post helped you to learn how to add and use the Booking & Appointment Availability Search widget in your WooCommerce Store.

Conclusion

The setup for the Booking & Appointment Availability Search widget of our Booking & Appointment Plugin for WooCommerce is quick and easy. Add this advantage to your site to help your customers see the list of available products for their required dates and category at a single glance before they place the order.

A better user experience awaits your customers.

Was this article helpful to you? Yes 2 No 2

How can we help?