If you run a WooCommerce store that requires specific delivery times or dates for your customers, integrating a delivery date and time selection feature is an essential addition. By adding this feature, customers can choose when they want to receive their orders, which is especially helpful for perishable goods, appointments, or services that depend on time-sensitive deliveries.
In this blog, we’ll walk you through how to implement a custom WooCommerce delivery date and time slots plugin with the following functionalities:
- Allow customers to choose a delivery date and time slot.
- Implement a 2-hour buffer check to ensure that delivery time is set at least two hours after the current time.
- Dynamically populate time slots based on the selected delivery date.
- Display delivery date and time in order details and email notifications.
Why Add Delivery Date and Time Selection to WooCommerce?
Offering your customers the flexibility to choose their delivery date and time enhances the shopping experience. Here’s why you should consider adding this feature to your store:
- Customer convenience: Customers can choose delivery times that fit their schedule, reducing missed deliveries.
- Improved customer satisfaction: By providing accurate delivery windows, you set clear expectations and improve the overall shopping experience.
- Efficient operations: You can plan your deliveries better, reducing the chance of overburdening delivery staff.
Let’s dive into how to create this feature in WooCommerce.
Step-by-Step Guide: Creating a WooCommerce Delivery Date and Time Plugin
To add a custom delivery date and time selection feature to your WooCommerce store, follow these steps:
1. Create a Custom Plugin for Delivery Date and Time
To keep your changes isolated from the main WooCommerce plugin, it’s a good practice to create a custom plugin.
Plugin Header:
Start by creating a folder inside your wp-content/plugins/ directory and name it something like wc-delivery-date-time. Inside that folder, create a file named wc-delivery-date-time.php with the following header:
<?php
/**
* Plugin Name: WooCommerce Delivery Date & Time
* Plugin URI: https://example.com
* Description: Adds delivery date and time selection to the WooCommerce checkout page with dynamic time slots based on the selected delivery date.
* Version: 1.0.0
* Author: Your Name
* Author URI: https://example.com
* Text Domain: wc-delivery-date-time
* WC tested up to: 6.9
*/2. Adding Delivery Date and Time Fields on Checkout
In this step, we’ll add fields to the WooCommerce checkout page so customers can select their delivery date and time.
// Hook into WooCommerce to add delivery date and time fields
add_action('woocommerce_after_checkout_billing_form', 'wc_add_delivery_date_and_time_fields');
function wc_add_delivery_date_and_time_fields($checkout) {
echo '<div id="delivery_date_time_fields"><h3>' . __('Delivery Date & Time') . '</h3>';
// Delivery Date field (Calendar)
woocommerce_form_field('delivery_date', array(
'type' => 'text',
'class' => array('woocommerce-select', 'delivery_date', 'form-row-wide'),
'label' => __('Choose Delivery Date'),
'placeholder' => __('Select a date'),
'custom_attributes' => array(
'id' => 'delivery_date',
'readonly' => 'readonly',
),
), $checkout->get_value('delivery_date'));
// Delivery Time field (Dropdown)
woocommerce_form_field('delivery_time', array(
'type' => 'select',
'class' => array('woocommerce-select', 'delivery_time', 'form-row-wide'),
'label' => __('Choose Delivery Time'),
'options' => array(
'' => __('Select a time'),
),
), $checkout->get_value('delivery_time'));
echo '</div>';
}This code creates two fields on the checkout page:
- A date picker for selecting the delivery date.
- A dropdown for selecting a delivery time.
3. Implement 2-Hour Buffer Check
You don’t want customers to select a delivery time too soon. To ensure the delivery is scheduled at least two hours after the current time, we add validation on the checkout process.
add_action('woocommerce_checkout_process', 'wc_validate_delivery_date_time_fields');
function wc_validate_delivery_date_time_fields() {
if (empty($_POST['delivery_date'])) {
wc_add_notice(__('Please select a delivery date.'), 'error');
}
if (empty($_POST['delivery_time'])) {
wc_add_notice(__('Please select a delivery time.'), 'error');
}
// Enforce 2-hour buffer
$order_time = current_time('timestamp');
$delivery_time = strtotime($_POST['delivery_time']);
// Ensure delivery time is at least 2 hours ahead
if ($delivery_time - $order_time < 2 * 60 * 60) { // 2 hours in seconds
wc_add_notice(__('Delivery time must be at least 2 hours from the order time.'), 'error');
}
}This function checks if the selected delivery time is at least two hours after the current order time, adding a notice if it’s too soon.
4. Dynamic Time Slots Based on Delivery Date
We now need to update the time slots based on the selected delivery date. We’ll use JavaScript to populate the available time slots dynamically.
jQuery(document).ready(function($) {
$('#delivery_date').datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0,
onSelect: function(dateText) {
updateTimeSlots(dateText);
}
});
function updateTimeSlots(selectedDate) {
var timeSelect = $('#delivery_time');
timeSelect.empty();
timeSelect.append('<option value="">Select a time</option>');
var dayOfWeek = new Date(selectedDate).getDay();
var daysOfWeek = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
var availableTimes = delivery_time_slots[daysOfWeek[dayOfWeek]].split(',');
availableTimes.forEach(function(time) {
var slotTime = new Date(selectedDate + ' ' + time.split(' ')[0]);
var twoHoursLater = new Date(Date.now() + 2 * 60 * 60 * 1000);
if (slotTime >= twoHoursLater) {
timeSelect.append('<option value="' + time + '">' + time + '</option>');
}
});
}
});This script adds a date picker for the delivery date, and when a date is selected, it dynamically updates the available time slots for that day.
5. Save and Display Delivery Date and Time in Order
We need to store the selected delivery date and time in the order metadata so that it can be displayed in the WooCommerce admin and customer emails.
add_action('woocommerce_checkout_update_order_meta', 'wc_save_delivery_date_time');
function wc_save_delivery_date_time($order_id) {
if (!empty($_POST['delivery_date'])) {
update_post_meta($order_id, '_delivery_date', sanitize_text_field($_POST['delivery_date']));
}
if (!empty($_POST['delivery_time'])) {
update_post_meta($order_id, '_delivery_time', sanitize_text_field($_POST['delivery_time']));
}
}
// Display delivery date and time on the admin order page
add_action('woocommerce_admin_order_data_after_billing_address', 'wc_display_delivery_date_time_in_admin', 10, 1);
function wc_display_delivery_date_time_in_admin($order) {
$delivery_date = get_post_meta($order->get_id(), '_delivery_date', true);
$delivery_time = get_post_meta($order->get_id(), '_delivery_time', true);
if ($delivery_date) {
echo '<p><strong>' . __('Delivery Date') . ':</strong> ' . esc_html($delivery_date) . '</p>';
}
if ($delivery_time) {
echo '<p><strong>' . __('Delivery Time') . ':</strong> ' . esc_html($delivery_time) . '</p>';
}
}This code saves the selected delivery date and time when the order is placed and displays them in the WooCommerce admin interface.
Conclusion
By following these steps, you’ve successfully added a custom delivery date and time selection feature to your WooCommerce store. Customers can now choose their preferred delivery time with a 2-hour buffer check, ensuring that orders are scheduled efficiently.
Benefits of this Feature:
- Improved Customer Experience: Customers appreciate the ability to select a delivery date and time that fits their schedule.
- Increased Control: You have greater control over your delivery schedules and can ensure that deliveries are not rushed.
- Customizable: You can easily configure the time slots for each day of the week in the plugin settings.
Implementing this feature enhances your WooCommerce store’s functionality and sets you apart from competitors by offering a highly personalized service.
You can download the whole code as a plugin here.
Leave a Reply