How to Customize the "Rooms" Dropdown menu on mybookings

Follow

There are certain properties that only have one room within a room type/category - When the guest tries to make a reservation on the booking engine, they will need to select '0' & '1' from the drop-down menu under "Rooms" to trigger the 'Book Now' button and proceed with the reservation.

Since this situation can be confusing for guests, the steps below explain how to change these numbers and add "Yes or No" instead.

  • This solution is only applicable/recommended for properties that have only one room in a room type
  • Be aware that once you add the customized codes of this article, they will be applied to all your room types on the booking engine.

How to Switch from '0' to 'No' and from '1' to 'Yes'

Add the following code under Custom footer for your hotel booking page section to exclusively change from '0' to 'No' and from '1' to 'Yes'.

<script>
function deferLoadingJQuery() {
	if (window.jQuery) {
		// Initial page.

		setInterval(function() {

			if ($(".av-room-details .basic_prices").get(0)) {

	         // Change '0' to No and '1' to Yes
                $(".several_rows select.bs-select-hidden option").each(function() {
                $(this).html($(this).html().replace("0", "No"));
                $(this).html($(this).html().replace("1", "Yes"));
			});

	        $(".several_rows .bootstrap-select.btn-group .dropdown-menu span.text").each(function() {
		$(this).html($(this).html().replace("0", "No"));
		$(this).html($(this).html().replace("1", "Yes"));
     	                });

		$(".several_rows .bootstrap-select.btn-group .dropdown-toggle span.filter-option.pull-left").each(function() {
	        $(this).html($(this).html().replace("0", "No"));
		$(this).html($(this).html().replace("1", "Yes"));
		       });
			
			}

		}, 500);

	} else {
		setTimeout(function() { deferLoadingJQuery(); }, 50);
	}
}
deferLoadingJQuery();
</script>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome

How to Switch from "Rooms" to a customized text

To be even more clear, you can also change the drop-down menu wording from "Rooms" to "Select this room?" or "Continue?". This can avoid any confusion for the guests while making a reservation on the booking engine.

Add the code below under Custom Meta Tags section and you can switch from 'YOUR TEXT HERE' to the desired text

<style>
.av-room-options .no-rooms .type_of_room {
font-size: 0 !important;
}
.av-room-options .no-rooms .type_of_room:after {
content: "YOUR TEXT HERE";
text-align: center;
font-size: 11px;
} 
</style>
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome
DEMO - Karina's Hostel - São Paulo, Brazil - Best Price Guarantee - Google Chrome

Why is the custom code not working for other languages in mybookings?

If you notice that the code is not working when you switch mybookings language, please refer to this article for further information

Powered by Zendesk