WooCommerce Bookings Availability

WooCommerce Bookings Availability adds two blocks to the WordPress editor so customers can find available bookings on a page or post. Choose Bookings Calendar for a calendar view or Bookings Schedule for a list of available bookings.

Compatibility with page builders

↑ Back to top

The Calendar and Schedule blocks are available in the WordPress block editor. The Elementor Connector provides the standard Bookings form, not these Availability blocks. To use them, add them in the WordPress block editor.

Requirements

↑ Back to top

You need an up-to-date WordPress and WooCommerce installation, an active WooCommerce Bookings extension, and the separately purchased WooCommerce Bookings Availability add-on. Create at least one bookable product and configure its availability before adding a block.

Installation

↑ Back to top

1. Download WooCommerce Bookings Availability from your WooCommerce.com downloads.
2. In WordPress, go to Plugins > Add Plugin > Upload Plugin and choose the ZIP file.
3. Select Install Now, then Activate Plugin. Confirm WooCommerce Bookings is active too.

Setup and configuration

↑ Back to top

Add a block to a page or post

↑ Back to top

1. Open the page or post in the WordPress block editor, or create a new one.
2. Select the block inserter and search for Bookings Calendar or Bookings Schedule.
3. Select the block you want to add.

Select products to display

↑ Back to top

Choose which bookable products the block should show: all bookable products, specific products, products in specific categories, or products that use specific resources. For a filtered selection, search for and select the items you want, then select Done.

To choose a different set later, select the block, select Edit in its toolbar, and choose Display different products.

Configure the block

↑ Back to top

With the block selected, open the Block settings sidebar. Use Schedule settings to adjust which bookings appear and Display settings to choose how they appear. The available settings depend on the block you selected. Save or publish the page when it is ready.

Check the customer experience

↑ Back to top

Bookings Calendar

↑ Back to top

The calendar shows available bookings by date. Customers can navigate the calendar and select a booking to see its details. Check the published page on desktop and mobile and confirm that an available date shows the products you intended.

Bookings Schedule

↑ Back to top

The schedule lists available bookings with their date, price and booking action. Customers can navigate between dates when navigation is enabled. Depending on the block settings, they can load more bookings or see additional results as they scroll.

Test a booking action on your published page. Book now can add an eligible booking to the cart. When a booking requires choices, Select options opens its product page; the chosen date is carried over when supported. Confirm the date and price before checkout. If the expected action or booking is missing, check the product’s availability, the block’s selected products and its display settings.

Troubleshooting a blank Calendar or Schedule block

↑ Back to top

If a block appears in the editor but is blank or missing on the storefront, a JavaScript optimization plugin may be combining or delaying scripts in the wrong order. Check your browser console for messages such as “wp is not defined” or “jQuery is not defined.”

1. Temporarily disable JavaScript minification, merging, defer and delay in your optimization plugin.
2. Clear or regenerate the optimization plugin’s cached JavaScript, then test the page again.
3. If the block renders, re-enable one optimization feature at a time to find the conflicting setting.

For WP-Optimize, test excluding these Bookings Availability frontend files from JavaScript processing:

• wp-content/plugins/woocommerce-bookings-availability/build/bookings-calendar-frontend.js
• wp-content/plugins/woocommerce-bookings-availability/build/bookings-availability-common.js
• wp-content/plugins/woocommerce-bookings-availability/build/bookings-schedule-frontend.js

The plugin’s script-exclusion instructions explain where to enter exclusions. If that does not help, test disabling Enable merging of JavaScript files. Excluding wp-includes/js/dist/ is a broader diagnostic for WordPress block dependencies; work with the optimization plugin’s support team to narrow the permanent configuration. Avoid using generated files such as wpo-minify-footer-*.js as the primary exclusion target.