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 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- Booking & Appointment Availability Search Widget

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.

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 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.

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 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:

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 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:

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?

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.

Search Product Availability using Booking Widget - Tyche Softwares Documentation

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:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

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

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:

Search Product Availability using Booking Widget - Tyche Softwares Documentation

For instance, you have two child categories, one of them is ‘Booking for Guitar classes’. 

Search Product Availability using Booking Widget - Tyche Softwares Documentation

If you have selected this child category, then on the frontend, 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 these, you will be displayed those booking products.

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 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. Resource 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. 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:

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 ‘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 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.

Was this article helpful to you? Yes 2 No 2

How can we help?