Skip to main content

Add search and booking to pages

This is a minimal layout many sites use: search everywhere you need it, rich booking widget on each unit page.

1. Put a search bar on your homepage (or dedicated search page)​

  1. Edit the page in the block editor.
  2. Add a Shortcode block (or a Custom HTML block if your theme allows shortcodes there).
  3. Paste:
[bec_search]
  1. Update the page.

Where the search sends visitors: with plain [bec_search], submitting goes to the units archive by default (your public units listing), not back to the homepage—so the listing can read bec_* from the URL. If the archive is disabled, WordPress falls back to the home URL; enable Unit archive under Booking Engine → Units or add redirect_url="/your-page/" to the shortcode. Details: bec_search.

When a visitor submits the form, the browser loads the destination with dates and guest counts in the URL. Other shortcodes on that page read the same values.

Front-end search bar shortcode

2. Add a booking summary on each unit page​

On your single unit template or the unit’s post content:

[bec_booking_summary]

This block includes:

  • Embedded search when dates are missing
  • Price and breakdown when the API returns a quote
  • Continue button to your external booking engine (when configured)
  • Optional Enquiry link

If the shortcode runs on the unit’s own page, you do not need to pass a unit ID.

Front-end booking summary desktop

3. Optional: price line on archives​

In a query loop, custom grid, or archive template you can show a compact price for a specific unit:

[bec_quote unit_id="123"]

Replace 123 with the WordPress post ID of the unit. The shortcode only outputs text when the URL already has complete dates—see bec_quote.

4. Optional: Elementor Pro Loop Grid without “no availability” cards​

If you build the listing with Elementor Pro Loop Grid instead of shortcodes alone, set the grid’s Query ID to bec_available_only so units without availability for the current URL search are hidden (not shown as empty cards). See Elementor — hide units with no availability.

When building your own HTML links from a listing to a unit, use [bec_unit_url] inside the href so check-in, check-out, and guests stay attached:

<a href="[bec_unit_url]">View details</a>

Or pass a specific post ID: [bec_unit_url unit_id="123"].

Design​

Change the look under Booking Engine → Design or add CSS—see Design overview.

Full shortcode reference​

Shortcodes overview →