When using the Booking and Appointment Plugin for WooCommerce, by default the resources configured by the admin for a particular booking product will appear at the top of the booking form. Currently, in the booking form it displays date and time selectors at the top, followed by Resource (therapist or treatment room) fields as shown in the below image.
Some store owners would like to improve the form’s layout by moving the resources field below the date and time selection. So, by optimizing the booking form, we can allow customers first to choose their date and timeslot, and then they can select their appropriate resources. Let’s see how this is done via a simple code snippet.
Solution: Move the Resource Field Below the Date and Time Selection in Booking and Appointment plugin for WooCommerce
In the Booking and Appointment plugin, the resource fields are initially positioned at the top of the booking form, above the date and time selection fields. The code snippet will help you to reorganize the booking form layout so that the resouce fields appear below the date and time selection.
/**
* This function will move the resource and person fields below the date and time selection.
*/
function bkap_move_persons_resource_fields() {
if ( is_product() ) {
?>
<script>
jQuery( document ).ready( function () {
// Moving REsource at bottom.
if ( jQuery( '#bkap_front_resource_selection' ).length > 0 ) {
jQuery( ".bkap_resource_container" ).insertBefore( ".bkap-form-error" );
}
// Moving Persons at bottom.
if ( jQuery( ".bkap_persons_container" ).length > 0 ) {
jQuery( ".bkap_persons_container" ).insertBefore( ".bkap-form-error" );
}
});
</script>
<?php
}
}
add_action( 'wp_head', 'bkap_move_persons_resource_fields' );
Output
After implementing the code, when customers visit the booking page, they will see a redesigned booking form layout where the resource field is positioned at the end of the form.
Similarly, you can also explore various customizations for fine-tuning the resource options in your Booking and Appointment plugin. For instance, you can easily hide resource price displayed from resource dropdown or personalizing the “Select Resource” text on your shop page to better match the services your business offers. Activating these snippets in your store is straightforward and can be done with just a few clicks. Give them a try, implement what suits your needs, and if you’re looking for more customizations, drop us a comment below!
