Shortcodes and Blocks
Booking is not confined to the product page. Five shortcodes — each with a matching block — let you place booking and discovery elements anywhere on your site: a landing page, a sidebar widget, a page built with a page builder.
The shortcodes
| Shortcode | Block | What it renders |
|---|---|---|
[wcbrs_booking_form product_id="123"] | Booking Form | A complete booking form for one bookable product |
[wcbrs_bookable_products] | Bookable Products | A list of your bookable products |
[wcbrs_available_bookings] | Available Bookings | Products that are free in a given window |
[wcbrs_booking_search] | Booking Search | A Search / From / To form with a Find bookings button |
[wcbrs_booking_search_results] | — | The results of the search above |
Shortcodes also work inside text widgets, so a booking search can sit in a sidebar or a footer.
The booking form
[wcbrs_booking_form product_id="1452"]
Renders a standalone booking form for that product: the date fields for its booking type, the guest field, person types, the resource dropdown, services, extras, a quantity box and a Book now button.
| Attribute | Required | Notes |
|---|---|---|
product_id | Recommended | The bookable product's ID. On a product page it falls back to the current product |
Note
The form only renders for a product that is actually marked bookable. Point it at an ordinary product and nothing appears.
Find the product ID in the Product Settings header — Managing settings for Product ID: N — or in the address bar when you edit the product.
Good for: a landing page for one property, a "book a consultation" page, an offer page for a single tour.
Listing bookable products
[wcbrs_bookable_products]
Lists your bookable products. Use it to build a simple directory page.
Showing what is free
[wcbrs_available_bookings]
Shows products that are available in a window, each labelled Available or Unavailable. When nothing matches it says "No matching bookable products found."
The search form and its results
[wcbrs_booking_search]
Renders a form with Search, From and To fields and a Find bookings button.
Where the answers appear depends on Search results mode, under Product Settings → Global Settings → Storewide booking options:
| Mode | Behaviour |
|---|---|
| Inline | Results appear directly below the form |
| Modal | Results open in an overlay |
| Redirect | The customer is sent to a page you nominate |
For Redirect, build a results page first:
- Create a page, for example Booking results.
- Put
[wcbrs_booking_search_results]on it and publish. - Note its page ID.
- Enter that ID in Redirect results page ID and set Search results mode to Redirect.
The look of the results — grid, list or calendar, cards per row, the filters offered, whether a map is shown — is controlled on the Search Builder tab. See Location and Search.
Using the blocks
In the block editor, add a block and search for its name — Booking Form, Bookable Products, Available Bookings or Booking Search. The Booking Form block has a Product ID setting in its sidebar; the others take their configuration from your Search Builder settings.
Page builders
Extra page-builder support is available under Product Settings → Global Settings → Storewide booking options → Elementor/page builder. Turn it on if your builder does not render the shortcodes on its own. Shortcodes are also enabled inside text widgets, so most builders work without it.
Worked examples
A dedicated landing page for one hotel room
[wcbrs_booking_form product_id="1452"]
A "check availability" box in the sidebar
Add a text widget containing [wcbrs_booking_search], and set Search results mode to Modal so the results overlay the current page rather than navigating away.
A search page with its own results page
- Find a room page:
[wcbrs_booking_search] - Booking results page:
[wcbrs_booking_search_results] - Search results mode: Redirect, pointing at the results page ID
Checking your work
- Publish the page and open it as a visitor, not as an administrator.
- Confirm the form renders and the fields match the product's booking type.
- Run a search you know should return something, and one you know should not.
- Make a test booking through the standalone form and confirm it reaches your Bookings list.
Next step
- Location and Search — configure the search behaviour.
- The Customer Booking Experience — what the form does once it is filled in.