When using our Booking and Appointment Plugin for WooCommerce, you will be provided with an option in global settings such as ‘Enable Availability Display on the Product Page’. If this option is enabled in the settings then the booking product page will show the booking availability messages first, then comes the calendar and finally the booking cost details.
With this customization, we can improve the booking process to be more user-friendly by allowing customers to see pricing information right away, without needing to scroll the booking form.
Solution: Shift the Price Display Block after the Availability Message in Booking and Appointment Plugin for WooCommerce
The code modifies the price display section immediately after the availability message is shown in the Booking and Appointment plugin for WooCommerce.
/**
* Display the price HTML block after checking availability.
*
* @param int $product_id Product ID.
* @param array $booking_settings Array of booking settings.
* @param string $booking_type Type of booking.
*
* @todo Convert HTML structure to a template for better customization.
*/
function bkap_after_availability_message( $product_id, $booking_settings, $booking_type ) {
do_action( 'bkap_before_price_display' );
$display_price = get_option( 'book_price-label' );
$display_html = '<div id="bkap-price-box" style="display:none">
<div id="ajax_img" class="ajax_img" style="display:none"><img src="' . plugins_url() . '/woocommerce-booking/assets/images/ajax-loader.gif"></div>
<span id="bkap_no_of_days"></span>
<span id="bkap_price" class="price">' . $display_price . '</span>
</div>';
$price_display = apply_filters( 'bkap_price_display_html', $display_html, $display_price );
echo $price_display;
do_action( 'bkap_after_price_display' );
}
add_action( 'bkap_after_availability_message', 'bkap_after_availability_message', 10, 3 );
remove_action( 'bkap_after_booking_box_form', 'bkap_price_display' );
Output
When a customer books a villa for rent, they enter their check-in and check-out dates. After choosing the number of days they want to stay, the price block will be displayed below the availability message during booking.
Placing essential details upfront enhances user convenience and clarity on the booking details. Similarly, if your business relies on offering resource based services, you can explore a similar customization to move the resource field below the date and time selection in our Booking and Appointment plugin for WooCommerce. If you have specific needs or questions, feel free to ask in the comments!
