Search Widget add-on
Using the Search Add-on, you can create a search widget that allows your website visitors to search for available dates in your calendars.
Embedding the Search Widget
Same as embedding the calendar, the search widget can be embedded via shortcode, or from a page builder module or widget such as Divi, Elementor, or Gutenberg.
| Option | Values | Description |
|---|---|---|
| Calendar | All Calendars or 1,2,3 |
Which calendars to search in. Can be all calendars or a comma-separated list of calendar IDs. |
| Language | Auto or language code |
The language in which to display the search widget. With auto the plugin tried to detect your website’s language automatically. |
| Week Start Day | Monday to Sunday |
The starting day of the week. |
| Widget Title | Yes/No |
Displays the Search Widget title as a heading above the widget |
| Automatically Mark Selection | Yes/No |
When clicking on a search result, it will open the page the calendar is on and automatically select the dates in the calendar. Only works if the calendar is linked to a page. |
| Selection Type | Date Range/Single Day |
The date selection type. If Single Day is selected, only one date picker will appear in the widget. |
| Minimum Stay | number |
The minimum number of days that can be selected in the datepickers. |
| Show Featured Image | Yes/No |
Display the featured image from the post or page linked to the calendar. |
| Show Starting Price | Yes/No |
Show the base calendar price in the search result. |
| Show results on load | Yes/No |
Display all the calendars below the search form by default. |
| Results Layout | List/Grid |
The layout of the search results. Can be a list where the results are displayed one under each other, or a grid where they are displayed as multiple boxes per row. |
| Results per page | number |
The number of results to be displayed per page. |
| Redirect | url |
By default results are loaded below the search widget. You can enter a link to a page where to redirect after the “Search” button is clicked. This page will also need to have the search widget embedded, with the “Redirect” option empty. |
Embedding with Gutenberg
Go to the post or a page where you want to embed the search widget and click on the black + sign. A list with all the available modules will appear. The easiest way to find the Calendar module is to search for it by typing “calendar” in the search box.
The embed process is similar to the one of embedding a calendar with Gutenberg.
Embedding with Divi
Go to the post or a page where you want to embed the search widget and click on the grey + sign. A list with all the available modules will appear. The easiest way to find the Calendar module is to search for it by typing “calendar” in the search box.
The embed process is similar to the one of embedding a calendar with Divi.
Embedding with Elementor
Go to the post or a page where you want to embed the search widget. Scroll through the Elements list until you see the WP Booking System category, or simply search for “wp booking” to show the relevant widgets.
The embed process is similar to the one of embedding a calendar with Elementor.
The shortcode
An example of the shortcode:
Changing or translating strings
Search widget strings can be changed from Settings → Strings and Translations
Customizing the widget
- Adding additional fields to the search form
- Customize search results layout
- Adding a description to the search results
