The Booking & Appointment Plugin for WooCommerce now features its first Gutenberg Block: the Available Bookings Block. This innovative block lets you showcase available bookings of your products in either List or Calendar view, providing a seamless experience for your customers.
Whether you’re using WordPress 5.0 (Gutenberg) or a previous version like WordPress 4.9 (Classic Editor), this feature is fully compatible.
Imagine displaying all your bookable products and their availability so customers can easily see what’s available and when. The solution is simple: the Available Bookings Block.
It lets you list products with their booking availability, making it easy for customers to find and book what they need.
Here’s what it looks like:
1. Available Bookings Block (Block Editor)
Create a new Page by going to Pages > Add New menu.
Set the title to the page.
To add the Available Bookings Block, click on the Add Block icon available on the page as shown:
You can also search for the blocks using Seach for a block option as shown here:
Clicking the Available Bookings Block will add the Block to the page.
On the right side, you will find a section with all the available settings of this block.
All the available products will be displayed in the List view (which can found under the Style setting) by default.
You will be able to see the preview of the block on the left side:
Let’s publish the page by clicking the Publish button
Click the View Page button to see on the front end:
Here’s how it will appear on the frontend:
All the available bookable products on a particular date will be listed in the view.
Currently, the products are shown in the List view for the entire month. This is because in the Filter Settings section, ‘All Products’ was selected. Additionally, in the Display Settings section, Style & Duration are selected as ‘List’ & ‘Month’ respectively.
2. Understanding the different sections of view
a) Month and Year
On the left top, the Month and Year will be displayed. It indicates the month & year of the current view.
b) Navigation Bar
On the right top, the navigation bar will be present.
This will be used to navigate to a different day, week, or month depending on the duration you have selected in the settings.
c) Available Block Table
In the Main section, all the Available Products will be displayed under their respective Date and Day as the heading.
Here, the Date is June 5, 2020, and the Day is Friday.
Under that, the records are listed in 4 different columns.
Main Section
Column 1
It will show whether the product is bookable for the full day or a specific time slot.
If it’s bookable for the full day then the Full Day text will be shown.
If it is bookable for a specific time slot, the timeslot range will be shown. E.g. 10:00 am – 12:00 pm.
Column 2
Here, the product title will be shown. Below that, its availability information will be displayed.
Column 3
The Quantity selector field will be displayed here if the Show Quantity option is enabled under the Display Settings.
Column 4
In this column, Book Now! OR Select Options button will be displayed.
The Book Now! button will be displayed only for Simple Products that satisfy any of the following criteria:
1. Product setup with Single Day Booking Type.
2. Product setup with Fixed Time Booking Type and Show Times option is enabled under Display Settings of Available Bookings Block.
If the above criteria aren’t fulfilled, the Select Options button will be displayed.
Clicking the Select Options button will redirect customers to the product page where the date will be auto-selected.
d) Filter Settings
The following is the list of options available in the Filter option under Filter Settings.
- All Products
- Booking Type
- Specific Products
- Specific Categories
- Resource Based
1) All Products
By default ‘All Products’ option will be selected in the Filter option.
This means all the bookable products will be listed in the view.
2) Booking Type
Selecting the Booking Type option in Filter will show all the different Booking Types.
Among them, you can select one Booking Type.
The products created with the selected Booking Type will be displayed in the list.
For instance, you have selected the Multiple Dates booking type:
On the front, you’ll be able to see all the available Multiple Dates bookings:
3) Specific Products
If you want to show only specific products in the view, select Specific Products in the ‘Filter’ option.
You can easily Select the required products.
4) Specific Categories
Using product categories you can list the bookable products. For instance, categories like One Day Tour, Half Day Tour, and Best Seller Tours can be chosen under the Categories field.
This would mean that only those bookable products with any of these categories will be listed in the view.
5) Resource Based
This filter will allow listing only the products that have a specific resource assigned.
e) Display Settings
The following is the list of options available in the Display Settings section.
i) Style
List and Calendar are two options that can show the available bookings of products in List View or Calendar View.
Default: List
We have already seen the list view above, so below is the screenshot for the Calendar view.
ii) Duration
Day, Week, and Month are three options to display the available bookable products in Day, Week, or Month.
Here’s what the Day View looks like:
iii) Sort Single Day
This option shows all the Single Day Bookable products first in the list of available products.
By default, this option is enabled.
iv) Show Quantity
This option allows to show/hide quantity field selector from the view.
If it’s disabled, the quantity field will be removed from the view. The quantity will be considered as 1.
Here’s how it looks without the quantity field.
v) Show Times
This option is used for the ‘Date & Time’ Booking Type.
By default, this option is disabled. This means it will list only a single record for the bookable product even if the product is set up with many different timeslots.
If it is enabled, it will list bookable product records according to the added timeslots for the product.
So if the product has five different timeslots then five records will be listed in the view for each timeslot.
vi) Show Navigation
This option allows you to show/hide the navigation ( Prev / Next ) button.
vii) Grey Out Booked Date
Enabling this option will list locked-out products on the date as Sold Out.
The layout of that list will be greyed out.
However, when this option is disabled, it will not list the product.
3. Shortcode for Available Bookings Block (Classic Editor)
The only difference between Block Editor (Gutenberg) and Classic Editor for Available Bookings Block feature is that in Block Editor you can see the live preview of the changes made in settings on the same page.
However, in Classic Editor, you use a shortcode with its attributes on the selected page.
Next, you need to publish or preview the page to view all the available bookable products on the front end.
The users of the Classic Editor can use the functionality of the Available Bookings Block feature by using the [tyche-bookings] shortcode.
This shortcode can be used along with the following attributes to control the bookable products that need to be shown.
Attributes:
view=’list’ ( list, calendar)
filter=’all’, ( all, type, products, categories, resources )
type=’day’, ( day, time )
dayType=”, ( only_day, multiple_days )
timeType=”, ( date_time, duration_time )
products=”, ( product ids separated by comma )
categories=”, ( category ids separated by comma )
resources=”, ( resource ids separated by comma )
duration=’month’, ( day, week, month )
showQuantity=’true’, ( true, false )
showTimes=’true’, ( true, false )
showNavigation=’true’, ( true, false )
sortingSingleEvents=’true’, ( true, false )
greyOutBooked=’true’, ( true, false )
As a first step, please install the Classic Editor plugin from WordPress Plugins > Add New. Activate it.
Create a new Page by clicking on the Page > Add New menu and setting the title to the page.
If you want to display all available bookable products for one week in calendar view then the shortcode is
[tyche-bookings view=’calendar’ duration=’week’]
Along with the shortcode, select an appropriate title and publish the page by clicking on the Publish button.
Use the View attribute with its value as a Calendar. Use the Duration attribute with its value as a Week.
On the front end of the website, all the available bookable products will be displayed in the calendar view for the duration selected for one week:
When the view attribute is not specified in the shortcode, all the available bookable products will be displayed in the List view by default.
Let’s take a real example of 3 use cases using the shortcode with different attributes & values to show:
- specific products
- all products of one category
- selected resources
The created product is a Basic Pedicure, with the assigned category of Skin Care. Two resources Sophia & Maria have been added.
a. Shortcode to show the availability of specific products
To show the availability of some specific products, you need to find out the product IDs.
Whenever you add a new product, a product ID is automatically assigned to it.
On the Products page in admin, when you hover the mouse over the product, you can see the Product ID with other settings such as Edit, Quick Edit, Trash, View, and Duplicate.
For instance, the product Basic Pedicure has ID 501 and is assigned a category Skin Care.
The Shortcode used to show only some specific products is
[tyche-bookings filter=’products’ products=’498, 449, 447, 501′ duration=’week’]
Here, the attribute filter is used.
Its value is ‘products’ and the attribute products with its value are ‘498, 449, 447, 501.’
Here, 498, 449, 447, and 501 are Product IDs.
Additionally, the attribute Duration with its value Week has been used.
Using the above shortcode, you will see only those products with a particular ID for one week.
In this case, the Basic Pedicure product with ID 501 is displayed on the front end.
Let’s say that your store has 20 bookable products. You wish to show only 14 bookable products on the front end page.
When the shortcode is used, those 14 products will be displayed.
b. Shortcode to show all products of a specific category
Find out the Category ID of the particular category you wish to show. Assigning a category to products is also equally important.
Hovering the mouse over each category will show the URL in the bottom left where its particular ID is present.
You can find all categories under the Products > Categories page.
Here, the Skin Care is a Category with ID 27. You can find the ID in the URL in the “tag_ID” parameter.
The shortcode for showing all products of a selected category is
[tyche-bookings filter=’categories’ categories=’27’]
After using the above shortcode and updating the page, the front-end page view will display all available bookable products in that category.
For instance, the Skin Care category has ID 27 and this category has only one product Basic Pedicure.
The available bookings of the Basic Pedicure product will be displayed for both the resources that were assigned.
We can also add more products to a particular category as needed.
c. Shortcode for showing a specific resource from all available resources
To show the availability of selected resources, you need to first fetch the Resource IDs.
When you go to Bookings > Resources you can see all the resources assigned to different products under the View Resources Tab.
If you wish to add a new resource, go to the Add Resource Tab.
For instance, the two resources added are Sophia and Maria. Their IDs are 507 and 506 respectively.
The resource ID can be found on the Edit page of a particular Resource.
Here’s how the Resource Sophia’s edit page with the ID 507 can be seen:
The shortcode to show the booking availability of a specific resource is
[tyche-bookings filter=’resources’ resources=’507′ duration=’day’]
In the below image, only one resource ID has been selected in the shortcode.
The duration is one day.
After updating the page, the front-end page view of this shortcode will show the available bookable different time slots for resource Sophia:
Assigning such product IDs, category IDs, or resource IDs in shortcode will show the availability of the selected bookable products in the List/Calendar view.
You can show, add, or remove all bookable products or some bookable products using shortcodes.
Try the Booking & Appointment Plugin for WooCommerce’s Available Bookings Block feature on the demo site with different products or create your own new product!