Change the elements order on the Single Room Type details page

[Nicolas Kuhn]

Hi,

Is there a way to change the order of display of the different elements on the single room type details page.
For example, I would like to display the booking form before the calendar.

I tried modifying the templates/shortcodes/room/room-content.php but that didn’t work.

Thanks in advance !

[Stacy Lind]

Hi Nicolas,

We have an article with different ways of achieving what you need here:
https://support.motopress.com/hc/en-us/articles/360013539291-How-to-edit-accommodation-type-pages-
Let us know if you have any questions regarding it.

[UPR]

Hi Stacy,
I’ve read through this article and am still a little confused on how to edit those pages. We are using DIVI with your DIVI extension installed.

The Layout (php + page builder) section in this article is confusing/not clear.

How can we move sections around? Can this be achieved with the DIVI builder enabled?

To be clear – we need to edit the order of elements on system generated pages (not shortcodes with specific IDs).

Cheers,
Sascha

[J. Davis]

Hi Sascha,

Thank you for your feedback and questions. Section The Layout (php + page builder) explains that you may remove system generated blocks (gallery, details, calendar and form) adding the lines to functions.php file of your theme. After that you are able to build the page of each property using Divi Builder or any other editor.

If you need to change order of system generated blocks you should add codes to functions.php file of your theme to remove the block

remove_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView', 'renderGallery' ), 10 );

and then add it again with other priority number:

add_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView', 'renderGallery' ), 30 );

It is also possible to get style and layout customization from our team ordering Extended Support service.

best regards,
J. Davis

[UPR]

Thanks John, this option is obviously not update proof unless you use a child theme, right?
Can you please explain how the priority number works?
How would I go about re-arranging the blocks not just in a different order but also next to each other in two columns? For example the calendar next to the reservation form? Or the gallery to the left of accommodation title and description. (I know how to do this for a specific property ID, but not system generated pages).
Can this actually be done? May purchase extended support for this, no problem!

Cheers,
Sascha

[J. Davis]

Hi,

Yes, sure it is recommended to use child theme not to loose those changes.

As for priority so priority of gallery is 10 by default so it goes first on single property page. You should remove it and add again with other priority e.g. 50 to move it closer to calendar and so on.

In order to place from next to calendar you would need to apply custom CSS style to get this done. If you are not experienced you may order Extended Support service and our agents will do this.

Or you may remove all the system generated blocks adding the lines from the article we speak about to the child theme. Once you remove them you will be able to add the calendar and form next to each other or in a way you need.

best regards,
J. Davis

[UPR]

Hi John,
Thanks for clarification. This now makes sense.
I’ve created the folder structure with the empty PHP files and I am now able to edit via page builder.

The following issues I ran into:

Accommodations page:
We use DIVI and I have a row with three columns defined to format the listings of the accommodation.
Using [mphb_rooms] with different parameters across those three columns works, but it doesn’t start a new row for the other accommodation listing rather then listing them under each other so the column heights don’t line up.
Given this fact I would assume php coding is required and blocks don’t really work for the accommodations page or any other page where multiple accommodations without specific IDs are shown?

Cheers,
Sascha

[J. Davis]

Hi Sascha,

You may adjust layout of listing of all properties via [mphb_rooms] shortcode by applying custom CSS. or you may put each property to proper column using [mphb_room id=”777″] shortcode replacing 777 with ID of certain accommodation type.

best regards,
J. Davis

[Carla Orriols]

Hi! Also do you know how to change the order of the title and room accommodation photo? is the only thing i can’t edit…

thank you

[J. Davis]

Hi Carla,

Thanks for your question. You may do this by overriding the templates of Hotel Booking plugin.
For example, you may copy the following file

\wp-content\plugins\motopress-hotel-booking\templates\shortcodes\rooms\room-content.php

and paste it to your theme folder by the following structure:

\wp-content\themes\ %your-active-theme-folder% \hotel-booking\shortcodes\rooms\

So you will be able to edit the file at a new destination and its priority and changes will override the default file of th plugin.

best regards,
J. Davis

[Carla Orriols]

Hi, sorry but i don’t know how to find this path: \wp-content\themes\ %your-active-theme-folder% \hotel-booking\shortcodes\rooms\

the first i know is in plugins but the second…in my theme is DIVI with a child theme and then i whent to \wp-content\themes\divi-child\ and nothing else about it \hotel-booking\shortcodes\rooms\

where is it? sorry i’m learning.
thank you

[J. Davis]

Hi Carla,

You need to add the folders \hotel-booking\shortcodes\rooms\ in your divi-child theme folder. So you go to \wp-content\themes\divi-child\ and create a new folder – hotel-booking. Then enter the /hotel-booking folder and create a new folder shortcodes and so on.

best regards,
J. Davis

[Rachel Veloz]

Hi!

I’m using Albatross-child theme for my Hotel Booking website and I tried the piece of code you shared to remove the gallery and availability calendar from single_accommodation type pages.
But then my Elementor plugin stopped working and functions.php file is showing this error – “Something went wrong. Your change may not have been saved. Please try again. There is also a chance that you may need to manually fix and upload the file over FTP”
Could you please help in fixing this error?

[J. Davis]

Hi Rachel,

Thanks for your question. I’ve tried adding the lines below to the functions.php file of the albatross child theme and everything worked correctly. I could launch Elementor successfully:

remove_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView', 'renderGallery' ), 10 );

remove_action( 'mphb_render_single_room_type_metas', array( '\MPHB\Views\SingleRoomTypeView', 'renderCalendar' ), 40 );

Could you specify what exactly lines you have added to the child theme?

best regards,
J. Davis

[Author]

Posts