WP Delivery Time Plugin: Add Date and Time in WordPress Checkout Page

In today’s fast-paced digital world, customers value convenience and flexibility when making online purchases. One way to enhance the customer experience in an eCommerce store is by providing them with the option to choose their preferred delivery date and time.

In this tutorial, we’ll guide you through creating a custom WordPress plugin for WooCommerce that prompts customers to input their desired delivery date and time during the checkout process.

Introducing the WooCommerce Delivery Time Plugin

The WooCommerce Delivery Time Plugin is a simple yet powerful tool designed to integrate seamlessly with your WooCommerce-powered online store.

By implementing this plugin, you allow your customers to specify when they want their order to be delivered, providing them with a personalized shopping experience.

Features of the Plugin

Our WooCommerce Delivery Time Plugin offers the following key features:

1. Delivery Date and Time Input: A user-friendly interface is presented to customers during the checkout process, allowing them to select their preferred delivery date and time.
2. Validation and Error Handling: The plugin validates the delivery date and time input to ensure that customers do not proceed without making a selection. Proper error handling is in place to notify customers of any missed entries.
3. Order Meta Data: The selected delivery date and time are saved as order metadata, providing both customers and administrators with this information for reference.
4. Display on Order Pages: The plugin displays the chosen delivery date and time on the order received page and in the WooCommerce order details, enhancing transparency and communication.

Getting Started

To implement the WooCommerce Delivery Time Plugin in your WooCommerce store, you’ll need to copy the provided plugin code below and create a plugin ZIP file for installation.

This plugin is written by Abdullah K. Rajpot

1. Copy the Plugin Code:

<?php
/*
Plugin Name: WooCommerce Delivery Time Plugin
Description: Prompt customers to input delivery time and date for their orders.
Version: 1.0
Author: ExpertPakistani.com
*/

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

// Display delivery date and time input on checkout.
function display_delivery_time_input($checkout) {
    echo '<div id="delivery_date_field"><h3>' . __('Delivery Date and Time') . '</h3>';
    woocommerce_form_field('delivery_date', array(
        'type' => 'datetime-local',
        'class' => array('form-row-wide'),
        'label' => __('Choose a delivery date and time'),
        'required' => true,
    ), $checkout->get_value('delivery_date'));
    echo '</div>';
}
add_action('woocommerce_after_order_notes', 'display_delivery_time_input');

// Validate the date field.
function validate_delivery_date($fields) {
    if (empty($_POST['delivery_date'])) {
        wc_add_notice(__('Please select a delivery date and time.'), 'error');
    }
    return $fields;
}
add_action('woocommerce_checkout_process', 'validate_delivery_date');

// Save the delivery date to the order meta.
function save_delivery_date($order_id) {
    if (!empty($_POST['delivery_date'])) {
        update_post_meta($order_id, 'Delivery Date', sanitize_text_field($_POST['delivery_date']));
    }
}
add_action('woocommerce_checkout_update_order_meta', 'save_delivery_date');

// Display delivery date and time on the order received page and order admin.
function display_delivery_date_on_order($order_id) {
    $delivery_date = get_post_meta($order_id, 'Delivery Date', true);
    if (!empty($delivery_date)) {
        echo '<p><strong>Delivery Date and Time:</strong> ' . esc_html($delivery_date) . '</p>';
    }
}
add_action('woocommerce_thankyou', 'display_delivery_date_on_order', 10, 1);
add_action('woocommerce_order_details_after_order_table', 'display_delivery_date_on_order', 10, 1);

2. Create a Plugin ZIP File:
   • Open a text editor (e.g., Notepad) and paste the copied code into a new file.
   • Save the file with an .php extension, for example, woocommerce-delivery-time-plugin.php.
   • Create a new folder and name it woocommerce-delivery-time-plugin.
   • Move the .php file you saved in the previous step into the woocommerce-delivery-time-plugin folder.
   • Right-click on the woocommerce-delivery-time-plugin folder and select “Send to” > “Compressed (zipped) folder”. This will create a ZIP file.
3. Install the Plugin:
   • Log in to your WordPress dashboard.
   • Navigate to Plugins > Add New.
   • Click on the “Upload Plugin” button.
   • Select the ZIP file you created (woocommerce-delivery-time-plugin.zip) and click “Install Now.”
   • Activate the plugin once it’s successfully installed.

You’ve successfully installed the WooCommerce Delivery Time Plugin! Customers can now choose their desired delivery date and time during the checkout process.

Read More: How To Fix Remote Desktop DPI Scaling Problem