How to Display WooCommerce Bookings Search Availability Widget on your store

In this article, we will cover one of the widely used functionalities in online bookings – Bookings Search Availability, which will help you display a search availability widget on your WooCommerce store. The widget will allow your customers to search all the available bookings between their preferred dates quickly. Customers can enter “From” and “To” dates and search for all the bookable products within that range. Furthermore, customers get to filter the search results based on “Asset” and even specify how many bookings they are looking for in the form of “Participants“.

Before proceeding, you will require the following to access this feature:

• WooCommerce Bookings & Appointments plugin v.5.0.0 or above

How to Enable WooCommerce Bookings Search Availability Widget

You can display the WooCommerce Bookings Search Availability Widget on the following pages:

• WooCommerce Home Page
• WooCommerce Product Page
• Product Category Page

Follow the steps below to enable the widget and display it on your WooCommerce store:

• From the WooCommerce Plugins page, click on the plugin settings option, as shown below

On the settings page, click on the Calendar Display tab.

Scroll down and enable the Display Search Availability Widget option.

Under the Booking Availability View, you can choose the following options:

• Flexible Booking (Recommended)

This option is useful for businesses that require customers to be able to modify the bookings after the search results are displayed. It will let customers view the calendar and all other options including the addons, participants, etc.

• Direct Booking

This option offers a quicker flow for customers to place a booking directly from the search results. It calculates the booking cost based on customer’s entries and allows them to place a booking without any modifications.

After selecting the Bookings Availability View, the widget is added to the WordPress Widget section. Click on the Widgets options under Appearance to access the WordPress widgets.

Select your preferred region where you want to display the bookings search availability widget and click on the “+” icon.

Search for the Bookings Search Availability and select the widget on the screen, as shown below.

Under the Search Widget Title, enter the widget title that will be displayed on your WooCommerce store.

You can also control the pages where you want to display the widget. Click on the Display Search Widget Visibility checkbox and select the preferred place you want to display the widget.

You can also choose to hide the clear booking search fields button by enabling the Hide Clear Search button.

You can also modify the style for the Search Button, Clear Button, and Search Bar Border to match your WooCommerce store by visiting the Customized Style tab. Under this tab, you can modify the button text, button color, and the button text color, as per your preference.

To modify the search field text, click on the Customize Filter Labels and enter the text you want to display for From Date and To Date, as shown below.

Click on the Update button to save changes. Once the changes are saved, the search widget will be visible on your WooCommerce store, as shown below.

Customers will be able to select the Check-in and Check-out date fields to search for the products that are available to book. The plugin will automatically display the search results, as shown below.

On clicking the View Product, customers will get the following views based on the Booking Availability View options you have selected above.

Customize the WooCommerce Bookings Search Availability Widget

The WooCommerce Bookings and Appointments plugin allows you to customize the widget as per your store template by offering the following customization options.

• Customize the Date Format for the search bar

While on the widget section, visit the Display Settings and select your preferred date format from the drop-down as shown below.

Once modified, the date format will update in the search area as shown below.

• Customize action buttons

Apart from the Clear Search button, the plugin allows you to display, hide, or customize other buttons as per your preference. In the widget Display Settings, you can enable the “Book Now” and “View Product” buttons. You can also modify the “View Product” button label as per your preference.

Additional Search Filters

Apart from the date filter, the plugin offers the following filter, which allows your customers to search for a bookable product.

• Filter by Fixed Date

The plugin performs a search based on a From Date and a To Date. However, if your business requires customers to enter only one booking date, you can use this filter to display on the search bar as shown below.

You can modify the booking search bar to look for bookings based on a fixed date by enabling the Filter by Fixed Date option under the Search Filter tab as shown below.

• Filter by Day

For businesses that operate on certain days of the week (for example, only weekdays), the plugin allows you to filter the booking search based on the day, as shown below.

You can modify the booking search bar to look for bookings based on certain days for both check-in and check-out fields by enabling the Filter by Day option under the Search Filter tab as shown below.

• Filter by Time

For businesses offering bookings based on time intervals, the plugin allows you to add a time-interval filter to search for bookings as shown in the image below.

You can modify the booking search bar to look for bookings with both date and time by enabling the Filter by Time option under the Search Filter tab as shown below.

• Filter by Asset Name

For businesses where customers are required to select the service type before booking a slot, the plugin utilizes the Bookings Asset functionality. The plugin allows customers to search the booking availability based on the asset as shown below.

You can modify the booking search bar to look for bookings with the asset by enabling the Filter by Asset Name option under the Search Filter tab as shown below.

• Filter by Participants

For businesses that require customers to enter the number of guests before booking slots, the plugin allows you to search bookings based on the number of guests as shown below.

You can modify the booking search bar to look for bookings based on the number of guests by enabling the Filter by Participants option under the Search Filter tab as shown below.

Modify Filter Labels

The plugin allows you to modify the filter display text as per your preference. Visit the WordPress widget area, select the Bookings Search Availability Widget, and click on the Customize Filter Labels tab. Here you will be able to modify the filter label text as shown below.

If you have any queries regarding the search widget functionality discussed above, or you have a complex booking scenario, feel free to contact our Contact PluginHive Support. We will try our best to help you find a solution and set up your online WooCommerce store.