Cloudbeds Booking Engine - How to Customize the Rooms Dropdown Menu

Follow

This article explains how to change the Room Dropdown menu options for your Cloudbeds Booking Engine.

Overview

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 or 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
  • Once you add the customized codes of this article, they will be applied to all your room types on the booking engine.

Customize the Rooms Dropdown menu

Step 1- Switch from 0 to No and from 1 to Yes
  1. Copy the following code and paste it under Custom footer for your hotel booking page section to exclusively change the Room Dropdown menu options from 0 to No and from 1 to Yes.
  2. Save your changes
  3. Replicate the steps for the required languages
<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
Step 2 - Replace the Rooms text with a customized text

Change the drop-down menu wording from Rooms to Select this room? or Continue? instead. 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 replace YOUR TEXT HERE with 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

If the code is not working when you switch the booking engine language, refer to this article for further information.

Powered by Zendesk