Edit Layout with Elementor
With Elementor you can fully edit the layout of accommodation type pages visually without coding:
1. Make sure that Elementor, our Elementor Integration and MotoPress Hotel Booking are activated.
2. In Accommodation > Settings (Template Mode), switch to Developer Mode and save.
3. In Elementor > Settings, enable Accommodation Types for editing and save.
4. Open an accommodation type with Elementor in Accommodation > Accommodation Types.
5. In the bottom left corner of Elementor, click on the gear icon to open Settings.
6. Switch the Page Layout to Elementor Full Width.
This will leave you with an empty page that is fully editable with Elementor. Now you can add all the elements of the booking plugin following the layout that you prefer (tutorial).
Edit Layout with a Page Builder
Layout of post type
Accommodation type pages (Accommodation > Accommodation Types) are custom post types. The layout of custom post type is usually inherited from the single post template of your active theme wp-content\themes\your-theme-folder\single.php
It is possible to override the accommodation type page to use custom layouts. For this, you can simply duplicate wp-content\themes\your-theme-folder\single.php file and re-name it into single-mphb_room_type.php and edit it e.g. remove the sidebar and other possible areas, changing classes, etc.
If your theme has a page template that you like better, then you can simply copy all the code from such a template file and insert it in an empty single-mphb_room_type.php
Note: Property rental templates designed by our team provide an option to select the page template (with sidebar/full width) for each accommodation type individually.
Layout (php)
The display of some elements can be changed by overriding plugin templates (everything in the folder wp-content\plugins\motopress-hotel-booking\templates\). For example, if you make any changes in wp-content\plugins\motopress-hotel-booking\templates\single-room-type\attributes\size.php, then you need to upload the altered file (size.php) to wp-content\themes\your-theme\hotel-booking\single-room-type\attributes\
Note that you do not need to create the folder wp-content\themes\your-child-theme\hotel-booking\templates\...
Layout (php + page builder)
Page builders can edit only content areas of your pages. The only content area on accommodation type pages is the accommodation description. All the other elements (booking form, attributes (details), gallery and so on) are system elements that cannot be edited with a page builder. However, they can be removed leaving you with a blank page that can be edited with a page builder. The system elements can be added again with shortcodes and a page builder.
Here is a list of actions from the MotoPress Hotel Booking plugin. Make sure that the Theme Mode is enabled in Accommodation > Settings (Template Mode). You can use them to modify/re-place/remove blocks on single Accommodation Type pages:
Featured gallery:
add_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView',
'renderGallery' ), 10 );
Attributes (Details):
add_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView',
'renderAttributes' ), 20 );
Default Price:
add_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView',
'renderDefaultOrForDatesPrice' ), 30 );
Availability Calendar:
add_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView',
'renderCalendar' ), 40 );
Reservation Form:
add_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView',
'renderReservationForm' ), 50 );
An example of how to re-locate the Featured Gallery under the Attributes on single Accommodation Type pages. You need first to remove the action of the gallery by adding the code to your child theme functions.php file:
remove_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView',
'renderGallery' ), 10 );
add it again with a different priority value:
add_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView',
'renderGallery' ), 20 );
An example of how to remove the Availability Calendar from single Accommodation Type pages:
remove_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView',
'renderCalendar' ), 40 );
When all the elements are removed, you will have an empty page with a content area. So you can edit this page with a page builder. The system elements can be added with a page builder in the order that you like using shortcodes. The list of all the available shortcodes and their attributes is in Accommodation > Shortcodes. For example, a shortcode like this will add only the attributes of an accommodation type with id 164: [mphb_room id="164" title="false" featured_image="false" gallery="false" excerpt="false" details="true" price="false" book_button="false" ]
Try to use some sort of a Code element of your page builder to add the shortcodes. If you are using the Elementor Integration, use the elements under the Hotel Booking section.
The ids of each accommodation type can be found in Accommodation > Accommodation Types > hover over an accommodation type:
Comments
0 comments
Please sign in to leave a comment.