Free and Premium WordPress Plugins & Themes Forums WordPress Plugins Hotel Booking Change the elements order on the Single Room Type details page
- This topic has 13 replies, 3 voices, and was last updated 1 year, 5 months ago by J. Davis.
- September 18, 2018 at 2:06 pm #720807Nicolas KuhnParticipant
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 !September 19, 2018 at 2:07 pm #721209Stacy LindKeymaster
We have an article with different ways of achieving what you need here:
Let us know if you have any questions regarding it.July 31, 2019 at 3:24 am #834527UPRParticipant
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).
SaschaJuly 31, 2019 at 12:16 pm #834837J. DavisKeymaster
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.
J. DavisJuly 31, 2019 at 12:57 pm #834894UPRParticipant
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!
SaschaAugust 2, 2019 at 4:22 pm #835808J. DavisKeymaster
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.
J. DavisAugust 3, 2019 at 4:16 am #835895UPRParticipant
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:
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?
SaschaAugust 9, 2019 at 3:13 pm #838669J. DavisKeymaster
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.
J. DavisDecember 27, 2020 at 7:35 pm #1051952Carla OrriolsParticipant
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 youDecember 28, 2020 at 2:04 pm #1052219J. DavisKeymaster
Thanks for your question. You may do this by overriding the templates of Hotel Booking plugin.
For example, you may copy the following file
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.
J. DavisDecember 28, 2020 at 5:40 pm #1052348Carla OrriolsParticipant
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 youDecember 29, 2020 at 10:14 am #1052732J. DavisKeymaster
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.
J. DavisDecember 10, 2021 at 11:44 pm #1229774Rachel VelozParticipant
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?December 16, 2021 at 2:48 am #1232281J. DavisKeymaster
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?
- You must be logged in to reply to this topic.