Cloudbeds Booking Engine - Hide, Remove or Resize Elements

Insert the code under Custom Meta Tags section:

To hide the Children column and display it only for some rooms, make sure that the code to remove the children column from all of the rooms is taken off or erased. Add the following code along with the particular room ID:

<style>
[data-room-type-id="Room ID here"] .av-children {
visibility: hidden !important;
display: none;
}
</style>

<style>
/* hide avail. calendar blue dot */
.css-1rssrv2 .calendar-footer .notes .dot {
background: white;
}
/* hide avail. calendar "Restrictions apply" */
.css-1rssrv2 .calendar-footer .notes p {
display: none;
}
</style>

Add the following code in Custom Meta Tags section and replace the sentence in red

<style>
.advance_amount {
visibility: hidden !important;
display: none;
}
</style>

Go to the booking engine and scroll down to the Property Information section, the fields with contact details are basically a numeric list on CSS side.

On the following example, Property Name is the field number 1, Address 1 is the field number 2 and so on.

To hide certain fields, add the following code and specify the number of field to hide after the code p:nth-child in brackets.

Example below, the 8th field on the list (Email) is hidden:

<style>
div.page-container.property_info > div > div > div.portlet-body > div.map_info > p:nth-child(8) {display:none; }
</style>

Insert the code under Custom Meta Tags section:

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', (event) => {
function deferLoadingJQuery() {
	if (window.jQuery) {
		// Initial page.
		setInterval(function() {
			if ($(".av-room-details .basic_prices").get(0)) {
                              $(".av-room-details .basic_prices").each(function() {
					$(this).html($(this).html().replace("adult", "guest"));
                                       $(this).html($(this).html().replace(/and.*$/i, ""));
                                       $(this).html($(this).html().replace(/and^\s+|\s+$/g, ""));
				});                     
			}
			// Change no results error message.
		}, 50);
	} else {
		setTimeout(function() { deferLoadingJQuery() }, 50);
	}
}
deferLoadingJQuery(); });
</script>
<style>
.av-per-person-price p.basic_prices::after {content: ")";}
</style>

The code below will remove the children column from all of the room types:

Add the following code to the Custom Meta Tag section and replace the red text with the desired room type code:

<style>
[data-room-type-id="00000"] th.children.custom-children {
visibility: hidden;
display: none !important;
}
[data-room-type-id="00000"] .btn-group.bootstrap-select.children_select.accommodation-select {
visibility: hidden; 
display: none !important;
}
</style

On the following example, we have hidden children column for the Standard Room only:

Insert the code under Custom Meta Tags section:

Insert the code under the Custom Meta Tags section:

Add the following code to Custom Meta Tag section:

Add the following code to the Custom Meta Tag section and replace the red text with the desired room type code:

<style>
[data-room-type-id="ROOM_ID_HERE"]  .av-occupancy {
display: none !important;
}
</style>

Add the following code to the Custom Meta Tag section:

Add the following code to the Custom Meta Tag section:

Add the following code to the Custom Meta Tag section:

Add the following code to the Custom Meta Tag section. This will remove the Minimum Stay text from all of the room types:

<style>
/* Remove Availability Calendar */

.show_avail_calendar {
visibility: hidden !important;
}
.availability_calendar_container {
display: none !important;
}
</style>

<style>
/* Remove Address */ 
.map_info {display:none;} 
</style>

<style>
/* Remove Map */ 
#map_canvas {display:none;} 
</style> 

<style>
.checkin-checkout-terms-block{
display: none;
}
</style>

<style>
.checkin-checkout-terms-block, .property_info h5, .cancellation_policy {
display: none;
}
</style>

Insert the following code in the Custom Meta Tags field:

Insert the following meta code in the Custom Meta Tags field:

Insert the following code in the Custom Meta Tags section:

<style>
.reserve_total .row.total_adults, .reserve_total .row.total_child {
 display: none;
}
</style>

Insert the following code in the Custom Meta Tags section:

<style>
.row.total_child, .nb_kids {
 display: none;
}
</style>

Insert the following code to Custom Meta Tags section:

<style>
.row.total_adults {
display: none;
}
</style>

Insert the following code in the Custom Meta Tags (Confirmation Page Only) section:

<style>
.kids_column.book_child, .book_child {
display: none;
}
</style>

Add the following code in Custom Meta Tags section to remove the maximum number of nights allowed from the date picker drop-down:

<style>
.max_l_yes {
display: none !important;
}
</style>

Add the following code to the Custom Meta Tag section: