WooCommerce Bookings: Displaying Only a Single Date for Simplified Experiences
Are you using WooCommerce Bookings and finding that your date selection is showing confusing date ranges when you only need to book for a single day? You’re not alone! Many businesses, from single-day workshops to one-off equipment rentals, need to display only the selected booking date, not a “from-to” range. This article will guide you through how to achieve this, making your booking process cleaner and more user-friendly.
Why Show Only One Date?
Imagine you run a pottery class that runs for just one specific date. When a customer books a spot, showing a date *range* like “October 27th, 2024 – October 27th, 2024” is redundant and potentially confusing. They just need to know they’re booked for October 27th! Similarly, if you rent bouncy castles for single-day events, displaying only the selected date simplifies the order summary and confirmation emails.
- Improved User Experience: Customers understand the booking immediately.
- Clarity: Reduces confusion caused by unnecessary date ranges.
- Professionalism: A cleaner, more focused booking process looks more polished.
The Problem: WooCommerce’s Default Date Range
By default, WooCommerce Bookings is designed to handle bookings that span multiple days. This means it displays a start and end date, even if they’re the same. This can lead to that awkward “date – date” display we discussed.
The Solution: Custom Code to the Rescue!
We’ll use a little bit of PHP code to modify the way WooCommerce displays the booking date. Don’t be intimidated! We’ll break it down step-by-step. This code snippets will essentially check if the booking start and end dates are the same, and if so, only display the start date.
#### Method 1: Modifying the Order Summary
This approach alters the display of the date in the order summary page (the “Your Order” section during checkout).
1. Access your `functions.php` file: This file is located in your active theme’s folder. You can usually access it through WordPress Admin: Appearance > Theme Editor. Important: Always back up your `functions.php` file before making any changes! A mistake here could break your site. Consider using a child theme to avoid losing your changes when your theme updates.
2. Add the following code:
add_filter( 'woocommerce_get_formatted_order_item_meta', 'ts_single_date_booking_order_summary', 10, 2 );
function ts_single_date_booking_order_summary( $formatted_meta, $item ) {
if ( $item->get_type() == ‘line_item’ ) {
if ( isset( $formatted_meta ) && is_array( $formatted_meta ) ) {
foreach ( $formatted_meta as $key => $meta ) {
if ( $meta[‘key’] === ‘_booking_start’ && isset( $formatted_meta[$key+1]) && $formatted_meta[$key+1][‘key’] === ‘_booking_end’ ) {
$start_date = $meta[‘display_value’];
$end_date = $formatted_meta[$key+1][‘display_value’];
if ( $start_date === $end_date ) {
// Modify the display
$formatted_meta[$key][‘display_value’] = $start_date;
unset($formatted_meta[$key+1]); // Remove end date
}
}
}
}
}
return $formatted_meta;
}
Explanation:
- `add_filter(‘woocommerce_get_formatted_order_item_meta’, …)`: This is the core. It hooks into the function that formats the order item meta data.
- `ts_single_date_booking_order_summary(…)`: This is your custom function that modifies the data.
- `if ( $item->get_type() == ‘line_item’ )`: Ensures we’re only modifying line items (products).
- `if ( isset( $formatted_meta ) && is_array( $formatted_meta ) )`: Checks the meta data.
- `if ( $meta[‘key’] === ‘_booking_start’ …)`: Looks for the ‘_booking_start’ meta key, which holds the start date. Also, this code looks for `_booking_end` meta key, which is the end date and is placed just after `_booking_start`.
- `$start_date = $meta[‘display_value’]; …`: Gets the formatted start and end dates.
- `if ( $start_date === $end_date )`: The key check! If the dates are the same…
- `$formatted_meta[$key][‘display_value’] = $start_date;`: Sets the display value of the `start_date` meta key to just the start date.
- `unset($formatted_meta[$key+1]);`: This removes the `end_date` value from the display.
- `return $formatted_meta;`: Returns the modified meta data.
3. Save the `functions.php` file. Clear your website cache, if you’re using a caching plugin.
Important Note: The `_booking_start` and `_booking_end` meta keys are *internal* WooCommerce Bookings keys. Explore this article on How To Sell Physical Gift Cards On Woocommerce While likely stable, they *could* change in future updates. Monitor your site after WooCommerce Bookings updates to ensure the code still works.
#### Method 2: Modifying the Email Confirmation
This approach alters the display of the date in the order confirmation email. This is generally more difficult to implement and maintain.
1. Locate and Override the Template File: The best and most reliable way to modify the email template is by overriding it within your theme. You need to find the correct WooCommerce template file responsible for displaying booking details in the email. This is typically located in `/wp-content/plugins/woocommerce-bookings/templates/emails/plain/email-order-items.php`.
2. Create the Override: In your theme directory, create a folder named `woocommerce`. Inside that folder, create another folder named `emails`, and inside `emails` a folder named `plain`. Then, copy the `email-order-items.php` file from the WooCommerce Bookings plugin into this new directory: `/wp-content/your-theme/woocommerce/emails/plain/email-order-items.php`.
3. Edit the Overridden Template: Open the copied `email-order-items.php` file in your theme’s directory and locate Explore this article on How To Activate Woocommerce the section of code responsible for displaying the booking date. This section might vary depending on the version of WooCommerce Bookings you’re using. Look for code that uses `$item_meta->display()` or similar to output the booking meta data, and then modify it:
get_formatted_meta_data();
foreach ( $item_meta_data as $meta_id => $meta ) {
// Start Date/End Date logic
if ( $meta->key === ‘_booking_start’ ) {
$start_date = $meta->value;
$end_date_found = false;
foreach ( $item_meta_data as $next_meta_id => $next_meta ) {
if ( $next_meta->key === ‘_booking_end’ ) {
$end_date = $next_meta->value;
$end_date_found = true;
break;
}
}
if ( $end_date_found && $start_date === $end_date ) {
echo wp_kses_post( $meta->label . ‘: ‘ . $start_date . “n” );
} else {
echo wp_kses_post( $meta->label . ‘: ‘ . $start_date . “n” );
echo wp_kses_post( $next_meta->label . ‘: ‘ . $end_date . “n” );
}
} else if ( $meta->key !== ‘_booking_end’ ) { // Avoid double-printing the end date
echo wp_kses_post( $meta->label . ‘: ‘ . $meta->value . “n” );
}
}
}
?>
Explanation:
- The code iterates Read more about How To Configurate Continental Usa Woocommerce through the meta data for the order item.
- It checks for the `_booking_start` and `_booking_end` meta keys.
- If the values of `_booking_start` and `_booking_end` are identical, only the start date is displayed. Otherwise, both start and end dates are displayed.
Important: Overriding template files makes your changes vulnerable to being overwritten during WooCommerce Bookings plugin updates. You’ll need to monitor updates and re-apply your changes if necessary. Method 1 is therefore much better.
#### Method 3: Using JavaScript (Less Recommended)
While possible, using JavaScript to modify the display is generally less reliable and can be prone to issues if WooCommerce Bookings updates its HTML structure. It’s also not as SEO-friendly as server-side modifications (PHP). However, if you prefer a quick client-side solution:
1. Enqueue a JavaScript file: Add the following code to your `functions.php` to enqueue a custom JavaScript file:
function ts_enqueue_custom_booking_script() { wp_enqueue_script( 'custom-booking-script', get_stylesheet_directory_uri() . '/js/custom-booking.js', array( 'jquery' ), '1.0', true ); } add_action( 'wp_enqueue_scripts', 'ts_enqueue_custom_booking_script' );
2. Create `custom-booking.js`: Create a file named `custom-booking.js` in your theme’s `/js/` directory (you might need to create the `js` directory). Add the following JavaScript code:
jQuery(document).ready(function($) {
$(‘.woocommerce-order-details ul.wc-item-meta li’).each(function() {
var text = $(this).text();
if (text.includes(‘Start date:’) && text.includes(‘End date:’)) {
var startDate = text.split(‘Start date:’)[1].split(‘End date:’)[0].trim();
var endDate = text.split(‘End date:’)[1].trim();
if (startDate === endDate) {
$(this).text(‘Date: ‘ + startDate); // change text of the li
}
}
});
});
Explanation:
- The JavaScript code waits for the page to load completely.
- It finds all `li` elements inside the `.woocommerce-order-details ul.wc-item-meta` element.
- It checks if the text of each `li` includes both “Start date:” and “End date:”.
- If both are present and the start and end dates are the same, it changes the text of the `li` to display only “Date: [date]”.
Caveats:
- Fragile: Relies on specific HTML structure. Any changes to WooCommerce Bookings’ HTML could break the script.
- Not SEO-Friendly: The date displayed to search engines will still be the “from-to” range initially.
- JavaScript Dependency: Requires JavaScript to be enabled in the user’s browser.
Choosing the Right Method
- Method 1 (PHP Modification of Order Summary): Recommended. Most reliable and SEO-friendly, targets only Order Summary output.
- Method 2 (Template Override): Less Recommended. Hard to maintain after Bookings plugin update.
- Method 3 (JavaScript): Not recommended. Quick but fragile. Only modifies the display on the client-side, not the underlying data.
Testing is Key!
After implementing any of these methods, thoroughly test your booking process! Make several test bookings to ensure the date is displayed correctly on the order summary page, in confirmation emails, and in the admin area.
By implementing one of these solutions, you can streamline your WooCommerce Bookings date display, providing a clearer and more user-friendly experience for your customers and a more professional image for your business. Remember to back up your code and test thoroughly before making any changes to a live website.
