Posted on

WooCommerce: Display Order Delivery Date @ Checkout

A WooCommerce freelancer called Rodolfo just made your life easier ๐Ÿ™‚

You can now add a lovely “calendar” field on the checkout page, let people decide the delivery date, and save this value in the order for the admin.

It took me ages to implement this for a client (it was much more complex, with available dates, different calendars based on different shipping zones, max weight per day, etc) so I thought of sharing the basic snippet with you! Enjoy ๐Ÿ™‚

WooCommerce: display a delivery calendar @ checkout

PHP Snippet: Display Order Delivery Date @ WooCommerce Checkout


/**
 * @snippet       Display Order Delivery Date @ WooCommerce Checkout
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @source        https://businessbloomer.com/?p=73583
 * @author        Rodolfo Melogli
 * @compatible    Woo 3.3.2
 */

// -------------------------------
// 1. Display Checkout Calendar if Shipping Selected

add_action( 'woocommerce_review_order_before_payment', 'bbloomer_echo_acf_date_picker' );

function bbloomer_echo_acf_date_picker( $checkout ) {
	
	echo '<div id="show-if-shipping" style="display:none"><h3>Delivery Date</h3>';
	
	woocommerce_form_field( 'delivery_date', array(
        'type'          => 'text',
        'class'         => array('form-row-wide'),
        'id'            => 'datepicker',
        'required'      => true,
        'label'         => __('Select Delivery Date'),
        'placeholder'       => __('Click to open calendar'),
        ));
	
	echo '</div>';
	
}

add_action( 'woocommerce_after_checkout_form', 'bbloomer_show_hide_calendar' );
 
function bbloomer_show_hide_calendar( $available_gateways ) {
	
?>

<script type="text/javascript">
	
	function show_calendar( val ) {
		if ( val.match("^flat_rate") || val.match("^free_shipping") ) {
			jQuery('#show-if-shipping').fadeIn();
		} else {
			jQuery('#show-if-shipping').fadeOut();
		}	
	}
	
	jQuery(document).ajaxComplete(function() {
	 	var val = jQuery('input[name^="shipping_method"]:checked').val();
		show_calendar( val );
	});
	
</script>

<?php
	
}

add_action( 'woocommerce_checkout_process', 'bbloomer_validate_new_checkout_fields' );
 
function bbloomer_validate_new_checkout_fields() {   
	
	if ( isset( $_POST['delivery_date'] ) && empty( $_POST['delivery_date'] ) ) wc_add_notice( __( 'Please select the Delivery Date' ), 'error' );
 
}

// -------------------------------
// 2. Load JQuery Datepicker

add_action( 'woocommerce_after_checkout_form', 'bbloomer_enable_datepicker', 10 );
 
function bbloomer_enable_datepicker() {
	
  ?>

	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <?php    
	
}

// -------------------------------
// 3. Load Calendar Dates

add_action( 'woocommerce_after_checkout_form', 'bbloomer_load_calendar_dates', 20 );
 
function bbloomer_load_calendar_dates( $available_gateways ) {

	?>

	<script type="text/javascript">

		jQuery(document).ready(function($) {
				
			$('#datepicker').click(function() {

				$('#datepicker').datepicker({ 
					dateFormat: 'dd-mm-yy',
					maxDate: "+2m",
					minDate: 1, 
				}).datepicker( "show" );
				
			});

		});

	</script>

	<?php
 
}

// -------------------------------
// 4. Save & show date as order meta

add_action( 'woocommerce_checkout_update_order_meta', 'bbloomer_save_date_weight_order' );

function bbloomer_save_date_weight_order( $order_id ) {
	
    global $woocommerce;
	
 	if ( $_POST['delivery_date'] ) update_post_meta( $order_id, '_delivery_date', esc_attr( $_POST['delivery_date'] ) );
	
}

add_action( 'woocommerce_admin_order_data_after_billing_address', 'bbloomer_delivery_weight_display_admin_order_meta' );
 
function bbloomer_delivery_weight_display_admin_order_meta( $order ) {    
	
	echo '<p><strong>Delivery Date:</strong> ' . get_post_meta( $order->get_id(), '_delivery_date', true ) . '</p>';
	
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

12 thoughts on “WooCommerce: Display Order Delivery Date @ Checkout

  1. Hey is it possible to set minimum delivery date so I can offer handmade products? So that it’s different with each product

    1. Hey Matt – thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  2. Great snippet! Could it be synched with subscriptions?

    1. Hey Alexandre, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  3. Hello Friend. Thanks for the snippet, it works great!
    Q: Is there an option to add the delivery date to your order email?

    1. Hello Aramon, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  4. Nice one! Does something like this work for digital downloads? For example, someone buying a gift voucher for another person, they enter the recipient’s email on checkout and when they select a date would it delay the email with the voucher attached from being sent until selected date?

    1. Hey Mike, yes that could be done – but you need to make the two systems “talk” with additional PHP ๐Ÿ™‚

  5. Thanks Rodolfo for your wonderful mega snippet! This would a super time saver for many others. ๐Ÿ˜‰

  6. Thanks for your tutorials. Today my PM required me to implement this function for our client’s website.
    Much appreciate!

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.