WooCommerce Bookings Availability

WooCommerce Bookings Availability is an add-on for the main WooCommerce Bookings extension (separate purchase) which gives customers two ways to view and select Bookings directly from posts and pages with:

• A schedule block displaying a list of available slots in a day, a week or a month.
• A calendar block displaying available slots on a weekly or monthly calendar.

Both blocks enable customers to customize the booking if it has options available and add it directly to their cart.

If there are multiple slots available for a product on a date, the customers will be taken to the product page to select their booking date and time on the calendar to book the product.

Requirements

↑ Back to top

• WordPress 5.6 or higher, with the Gutenberg Block Editor
• WooCommerce 6.0 or higher
• WooCommerce Bookings 1.15.0 or higher (separate purchase)
• PHP version 7.0 or higher

Should WooCommerce Bookings be absent or deactivated when installing Bookings Availability, a notification will appear.

Installation

↑ Back to top

1. Download the extension from your WooCommerce dashboard.
2. Go to Plugins > Add New > Upload and select the ZIP file you just downloaded.
3. Click Install Now, and then Activate.

This adds two blocks to the Block Editor under WooCommerce called:

• Bookings Calendar
• Bookings Schedule

Setup and Configuration

↑ Back to top

To use the WooCommerce Bookings Availability extension, you need:

• An active install of WooCommerce Bookings. More info at: Getting Started with Bookings.
  and
• One or more bookable products. More info at: Creating a Bookable Product.

There are three steps to setup:

1. Add a block.
2. Select products.
3. Configure settings for the block.

Adding blocks to a post or page

↑ Back to top

Following installation and activation of WooCommerce Bookings Availability, a message appears and guides you to the next step.

1. Select an existing page or post, or create a new page or post, where you would like to offer bookings to customers.
2. Select the ⊕ in the upper left corner of the Editor to add a block. More info about adding blocks at: Adding a block.
   
3. Go to the WooCommerce category and toggle open to find the Bookings blocks.
   
4. Select Bookings Calendar or Bookings Schedule to add, and it then appears on the page or post.
   

Learn how to configure the block in the next sections.

Selecting products to display

↑ Back to top

Once a Bookings block is added, specify which products to display and their availability:

• All bookable products displays the availability of all products.
• Specific bookable products displays availability of only certain products. If this option is selected, search for the name of the desired product(s) or tick the box(es) on the list.
• Specific categories displays availability of products associated with certain categories. If this option is selected, search for the name of the desired category/ies or tick the box(es) on the list.
• Specific resources displays availability of products using certain resources. If this option is selected, search for the name of desired resources or tick the box(es) on the list.

Select Done to save your selection(s).

To correct an error or make a different selection, select Display Different Products to go back to the previous screen and start again.

Now that bookable products have been selected, the last step is to configure settings for the Bookings block.

Configuring a block

↑ Back to top

Bookings Calendar block

1. Select the block to show the Bookings Calendar Block Schedule and Display Settings in the right sidebar.*
   
   *If the Block Settings do not display in the right sidebar, toggle the kebab menu (three dots) to open more options and select Show Block Settings.
   
2. Enter a preference for each setting.
   

    

   • Schedule settings allow you to change the selected products, offering the same options the block displayed when first added to the Editor (section above). Should you make a different selection than the current, be sure to finish setup with Done to save changes.
   • Display settings offer a way to change how the calendar is displayed to customers.
     • Time range allows switching between a weekly or monthly view of the calendar.
     • Show date navigation toggles visibility of controls that allow customers to move forward/back on the calendar. Off: Only shows current week/month.
     • Show sold-out times toggles visibility of bookable slots that are no longer available.
   • Advanced is for CSS styling.
3. Update to save.

Bookings Schedule block

1. Select the block to show the Bookings Schedule Block Schedule and Display Settings in the right sidebar.*
   
   *If the Block Settings do not display in the right sidebar, toggle the kebab menu (three dots) to open more options and select Show Block Settings.
   
2. Enter a preference for each setting.
   

    

   • Schedule settings allow you to change the selected products, offering the same options the block displayed when first added to the Editor (section above). Should you make a different selection than the current, be sure to finish setup with Done to save changes.
   • Display settings offer a way to change how the calendar is displayed to customers.
     • Time range allows switching between a daily, weekly or monthly view of the calendar.
     • Show date navigation toggles visibility of controls that allow customers to move forward/back on the calendar. Off: Only shows current day/week/month.
     • Show all available times provides pagination. Off: Only the number specified in Maximum number of times to show at first is displayed when a block is initially shown, then the same amount is rendered as the customer scrolls down.
     • Show empty dates toggles visibility of only available times/dates and not slots already sold or booked.
     • Advanced is for CSS styling.
3. Update to save.

Removing a block

↑ Back to top

To remove a block:

1. Select the block.
2. Toggle the kebab menu (three dots) to open more options.
3. Remove Block.

Usage

↑ Back to top

Customers have different ways to interact with bookings, depending on the Bookings block selected and how it’s configured.

Bookings Calendar

↑ Back to top

Customers are presented with a weekly or monthly calendar that displays available bookings.

Hovering over any slot displays a popup.

which contains additional info for that booking:

• Date
• Time
• Price
• Button to book or customize this option

If navigation is enabled, the calendar also has arrows in the top right corner that give customers the ability move forward/back.

Bookings Schedule

↑ Back to top

Customers are shown an ordered list of available slots, each with the product name, time, price and, as in the Calendar block, a button to book or select options.

If the block is configured to only show a certain number of slots, a link to load more items is displayed at the end of the list. Otherwise, new events are auto-loaded as the customer scrolls down.