MotoPress Hotel Booking & Elementor Integration: Meet New Add-on
Table of Contents
We really care about our clients and respect their choice, so for those who have already built their hotel or vacation rental WordPress website with Elementor, we’ve released the new MotoPress extension – Hotel Booking & Elementor Integration. With this MotoPress Elementor addon, you can create all necessary pages of your website visually, without a need to tinker with shortcodes.
In broad strokes, this add-on serves up visual editing on the frontend, a user-friendly shortcode generator, and a drag-and-drop interface. It is absolutely free, so don’t forget to download it and give it a try!
Many of you who already use Elementor are familiar with the flexibility of this editor. Integrating all essential shortcodes of the Hotel Booking plugin into Elementor will provide you with a super user-friendly toolkit for editing shortcodes and their parameters, so you don’t need to manually do the job. Instead, simply choose preferred options from the drop-down menu in a visual editor and enjoy instant results.
Check out real-life websites built with Hotel Booking and Elementor!
P.S. Did you know MotoPress offers a free Elementor theme for hotels?
The theme is called Albatross and comes with Hotel Booking LITE (although, you may easily upgrade to Hotel Booking PRO). Check the Albatross demo.
Also, you might be interested in our line-up of Elementor addons:
- Stratum for Elementor – a collection of 24+ Elementor widgets with advanced content & styling settings
- Stratum Mega Menu – custom Elementor Mega Menu builder (embed any widget in submenus, use tags & badges, apply custom colors, etc)
Hotel booking Elementor WordPress plugins to make it work
You need 3 plugins installed to start editing your Hotel Booking powered website with Elementor:
- MotoPress Hotel Booking plugin
- Elementor Page Builder plugin
- Hotel Booking & Elementor Integration extension.
Make sure all of them are installed and activated. Also, add your content via the Hotel Booking plugin first so that your work with shortcodes in Elementor is really quick.
Property booking website with Elementor
To create all necessary pages with Hotel Booking shortcodes via Elementor visual builder, go to a page > edit > edit with Elementor.
In the list of available content modules in Elementor builder you’ll see MotoPress Hotel Booking modules – just scroll down to see the whole list.
Search availability widget & property listing
Now simply choose the shortcode you want to add > drag it to the page and customize with a help of the shortcode parameters. First of all, you can create a listing of your properties in clicks:
If you want to put your accommodations into different columns, firstly choose the appropriate number of columns in Elementor layout and then put your accommodation IDs as single properties:
In the Advanced settings tab, Elementor allows you to tweak the layout like spacing, etc. Overall, it’s much more flexible than the current version of Gutenberg editor.
Editing the shortcode parameters is easy: simply choose which details to show / hide. For example, here are standard settings for the accommodations listing:
- Property title
- Featured image
- Gallery
- Excerpt
- Details
- Price
- View button
- Book button
- Number of properties per page
- CSS class (if needed)
- Categories and tags
- IDs
- Relation
Moreover, you can add the search availability form module and optionally preset the following values:
- Number of adults and children
- Check-in and check-out date
System pages – Elementor bookings
There are also several system pages you can set up visually: add shortcodes for the search results, checkout form, and a booking confirmation form. Parameters of the search results page are fully customizable, so you can decide what info to show to the guests who search for the lodging.
In addition to standard listing parameters like excerpt, details, price, etc., you can also set the sorting by order or by price.
Booking form
If you need to place a booking form for any particular accommodation right on the individual accommodation page, you can add a booking form with the accommodation ID. This will allow your guests to make a reservation directly from that page.
Accommodation rates and services
You may also list all available accommodation rates and services with a help of a shortcode (don’t forget to add their content via Accommodation > Rates or Accommodation > Services before adding shortcodes). You’ll need to put the needed accommodation ID (all services and rates should be tied to this accommodation). If there are lots of services, you can even set a number of items per page.
Summing up
Hotel Booking & Elementor Integration free add-on is a perfect utility to speed up and optimize a website building process, especially for non-tech people. Elementor is very quick, neat and flexible WordPress page builder, so you can safely rely on it in building your property booking WordPress website.
Do you think you’ll be using the plugin? Do you have any idea in mind on how it should be improved? Let us know!
Make sure to check our vacation rental WordPress website optimization checklist!
Set up a custom elementor site for the accomodation type but have no clue how to set up the booking functionality. Booking form seems to be just another search form and leads to a result list, not to a register form or something else.
Hi Oliver, You may add [mphb_availability shortcode] or the Booking Form widget (if you use Elementor Integration addon). This is the availability form of the current property. If you navigate to Accommodation > Settings and enable the Skip Search Results option then the form will display the unavailable dates and will let you check availability without going to the search results page.
I installed the latest version (1.1.0) and it caused white screen of death!
Website seems to come back if I disable Hotel Booking & Elementor Integration or Elementor.
It’s a shame I can’t rollback to older version because you don’t make that available! Can you help me??
Fatal error: Uncaught Error: Call to undefined function mphb_readable_post_statuses() in C:\Inetpub\vhosts\****\wp-content\plugins\mphb-elementor\plugin.php:109
Hi Umut,
Unfortunately we were not able to replicate the issue locally as it work properly on our side. We have found a request from you and sent a reply for further investigation.
I would like to style each page myself in elementor and use your widgets i want on the place that i want it. However i do not see a widget/shortcode for just an availability calendar (in just one column the availibilty of a room, nothing more) I use another plugin at the moment and on the below referenced URL you can see what i might want to replace with on of your widgets, being the quarter column “Check availability”, fromtitle to button
Is this possible ?
Thanks,
John
Hi John,
Thanks for your question. Yes, there is shortocde to add availability calendar of certain accommodation type –
[mphb_availability_calendar id="777"]It has not been added as widget to Elementor so you can add it as shortcode so far.
Hi,
Does this work for a directory theme? and business can control their own hotel rooms with a dashboard? Thank you
Hi,
Actually Hotel Booking plugin can be used with front-end submission of accommodation type but it was not totally adjusted for this purpose yet. So it might require customizing plugin. Feel free to list all the options and functionality you need for this. Thank you.
Could you add an option to the elementor widget to make the search availability form horizontal?
I think it would be very useful, thank you.
Hi Gabriele,
Thanks for your suggestion. We’ll review this change in one of the next updates.
I use MotoPress WordPress plugins for my site. Its review and ratings is good. It also user-friendly and especially the Booking form is awesome.
Hey Joanne! Thanks for your kind words! If you have a minute, could you please leave your review right on the plugin’s page to make it instantly visible for other people? https://motopress.com/products/hotel-booking/#reviews It would be incredibly helpful!