Woocommerce Bookings display calendar on click.

Hi,

Sorry for the delay. We are not yet sure why the “Choose” button or the date picker button is not displaying on the product page but you can use this code temporarily to display the date fields, which should also toggle the calendar.

#top .wc-bookings-date-picker-date-fields {
    display: block;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

Best regards,
Ismael

Hi,

Sorry for the delay. We added this script in the functions.php file temporarily to append the “choose” button in the date picker container.

function ava_custom_script() { ?>
    <script>
		(function($) {
			$(document).ready(function() {
						$('<legend><span class="label">Date</span>: <small class="wc-bookings-date-picker-choose-date">Choose...</small></legend>').prependTo('.wc-bookings-date-picker');	
			});
		})(jQuery);
	</script>
    <?php
}
add_action('wp_footer', 'ava_custom_script');

You can now remove the css above.

Best regards,
Ismael

Hi,

Glad to know that it is working correctly now. You don’t need to add the script in the functions.php file if the Choose button already exists.

Best regards,
Ismael

Hi,

Did you try the script above? It should create a date picker button below the room selection or dropdown. Please add the script in the functions.php file.

Thank you for your patience.

Best regards,
Ismael

Hi,

No problem. Please let us know in a different thread if you need anything else. We will close this one for now.

Have a nice day.

Best regards,
Ismael