How to Add a WooCommerce Booking Filter Widget On Your WooCommerce Bookings Site
Want to add a WooCommerce Booking Filter widget that helps your site visitors easily search for and find listings that are available in their time frame?
If you sell bookable products or services online, having a WooCommerce bookings availability search widget is definitely a must-have feature for your online store built on WordPress and WooCommerce.
Why? Because nobody likes error messages.
And yet, they are so common, especially when we try to book or reserve something online on booking sites.
You click on the ‘thing’ you want to book, enter the dates, and BAM! It gives you an error message that whatever you’re trying to book is not available at that time.
Frustrations, ahoy!
But there is a way this unlucky error message can be avoided. By filtering out the listings that are not available during the dates and timings defined by the user, the user can only see the listings that are available.
In technical jargon, this is what we call Booking Filters.
What are Booking Filters For WooCommerce and How Do They Work?
Booking Filters is a WooCommerce Booking Filter Plugin that works with WooCommerce Bookings & Reservations extension.
With WooCommerce Booking Plugin, you can create an online store that sells bookable products like spa treatments, car rentals, hotel rooms, or doctor’s appointments.
WooCommerce Bookings Filter, on the other hand, adds the cherry on top by letting users filter through the available listings and fine grain their search according to their own availability.
The plugin adds a small availability search widget on the website where users can define their available dates and timing and filter the listings based on their own availability.
With this feature, users can save crucial time and quickly find the right booking that’s available when they are. This plugin streamlines the user experience and increases your store’s conversion rate by making it easy for customers to find what they need.
Read on to learn how to integrate booking filters for WooCommerce with your WooCommerce Reservations plugin.
Step 1: Install the Available Search for WooCommerce Bookings Plugin
To improve the user experience of your store and save your users the annoyance of error messages, the first step is to gear up with the right tools.
In this case, the tool we are talking about is the Booking Filters for the WooCommerce Plugin.
On purchasing the plugin, you’ll receive the plugin zip file. Store it in a safe place as you’ll need this file later to install the plugin in your store.
On your WordPress dashboard, navigate to Plugins -> Add New and click on the Upload Plugin button at the top left. Choose the zip file you stored earlier and upload it. The plugin will be installed on your site.
After installation, navigate to Plugins -> Installed Plugins to see the list of plugins installed on your site. Search for WooCommerce Booking Filters plugin on this list. Click on the ‘Activate’ link to activate the plugin.
Since the WooCommerce Booking Filters Plugin works as an add-on to the WooCommerce Bookings extension, it’s important that you have installed the extension and activated it before activating the Filter plugin.
Follow this link to buy the WooCommerce Bookings Extension and upload, install, and activate it the same way you did before.
Step 2: Configure Settings of Your Woocommerce Booking Filter Plugin
There are two ways to add the WooCommerce Booking Availability Filter Widget to your site:
- As a shortcode
- As a Gutenberg block
For the purpose of this tutorial, we’ll use the first method i.e. embedding the filter using a shortcode.
To begin, we need to configure plugin settings. Navigate to WooCommerce => Settings and open the Filters tab to find plugin configuration settings.
Here are the different options and settings available:
Features of WooCommerce Booking Filter Plugin
Let’s give you a brief overview of each of them.
- Select your Search Type: The plugin offers two types of searches: Exact search and Fuzzy Search. Exact search finds a booking available in the exact time period the user has mentioned. Fuzzy search finds a booking available in any time slot available during the time period defined by the user.
- Filter Widget Name: This changes the name that appears above the filter block.
- Enable End Date: By checking this box, you can enable the end date field in your filter block. You can also make it a required field by checking the End Date Required checkbox.
- Enable Start/ End Time: This option lets you add a time field to your filter block. This field works only for Fuzzy search. You can make both of them *required* fields.
- Price Filter: This option lets you add a price field to your filter block.
- Enable Rating: Adding a rating field allows users to filter products by their rating.
- Search by Keyword: Adding this field allows users to search using keywords.
- Enable Search by Categories: Lets your customers filter based on Categories and lets the admin choose categories to include in the filter.
- Search by Tags: Lets your customers filter based on Tags and lets the admin choose tags to include in the filter.
- Enable Search by Attributes: Lets your customers filter based on Product attributes and lets the admin choose the product attributes to include in the filter.
- Exclude categories: You can exclude categories from the filter so that search results don’t include those categories.
- Enable Ajax Search: By enabling this, your customers can search and filter in real-time without page reloads.
Once you’ve configured all the settings and customized the labels of your filter block, save your changes.
Step 3: Use the Shortcode to Add the Filter Block
Once you’re done with all the settings, copy the shortcode given at the top of the settings screen.
Now, you can paste this shortcode anywhere on your site: the text editor of a page or a text widget area. Simply pasting the shortcode will embed the filter block at that place.
And that’s it! Your widget, Availability Search for WooCommerce Bookings is all set up!
Do you know that WooCommerce offers many more native Shortcodes that you can embed to create a feature-rich website? Read this Guide on WooCommerce Shortcodes for a thorough walk-through on this subject.
Adding Multiple Filter Blocks With Unique Settings
The Booking Filters plugin also allows you to create multiple filter blocks, each with its own settings and configurations.
To do that, click the Add New Shortcode link at the top of the settings screen. Clicking it will open a fresh settings screen and give you a unique shortcode. You can configure settings for this unique filter block and copy the shortcode for that block.
Having the ability to create unique filter blocks is a useful feature when you want to add booking filters on different product category pages.
For example, you have a large bookings store where you rent out vehicles in different cities. Say, you have different pages for different cities and on each page, you want to sell booking for a vehicle available in that particular city only.
In this case, you can create multiple filter blocks for each page and exclude all categories from the filter except the ‘city’ for which you’re adding the filter.
Improve Customer Experience with Booking Filters for WooCommerce
The next time your customer visits your site, they won’t be wasting their time trying to find a booking that matches their schedule. They can simply use the booking filter widget and fine grain their search in a few clicks.
Improved user experience is the key to higher conversions. The idea is simple: give customers what they want they want as quickly as possible, and there is a good chance they’ll take it.
Here are some more tools you can use to optimize the customer experience and increase your store’s conversion rate:
- Product Table for WooCommerce
- Quick Order for WooCommerce
- Address Manager for WooCommerce
Happy selling!
Get in touch with the experts at CODUP for premium WooCommerce development services
Read Also:
