Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How To Display An Order Delivery Date And Time At Checkout With WooCommerce

In this tutorial, we are going to show you can add a calendar with both date a time selection on the WooCommerce checkout page. This is especially useful if you have an e-commerce website with a click and collect feature, but this can be used in various other case scenarios also.

What you will end up with is a date time selector at checkout which will be recorded in WooCommerce orders, in our example we used this for a click and collect where you could specify the date and time in which you would like to collect the item. This will look something like the below:

So, to implement this, all you have to do is add the following code to your functions.php file:


/**
 * @snippet - Display Order Delivery Date Time Picker @ WooCommerce Checkout
 */
  
// -------------------------------
// 1. Display Checkout Calendar if Shipping Selected
  
add_action( 'woocommerce_review_order_before_payment', 'silva_echo_acf_date_picker' );
  
function silva_echo_acf_date_picker( $checkout ) {
     
   echo '<div id="show-if-shipping" style="display:none"><h3>Collection Date</h3>';
     
   woocommerce_form_field( 'delivery_date', array(
        'type'          => 'text',
        'class'         => array('form-row-wide'),
        'id'            => 'datepicker',
        'required'      => true,
        'label'         => __('Book before 12pm, collect the same day.'),
        'placeholder'       => __('Click to open calendar'),
        ));
     
   echo '</div>';
     
}
  
add_action( 'woocommerce_after_checkout_form', 'silva_show_hide_calendar' );
   
function silva_show_hide_calendar( $available_gateways ) {
     
?>
  
<script type="text/javascript">
     
   function show_calendar( val ) {
      if ( val.match("^local_pickup") ) {
         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', 'silva_validate_new_checkout_fields' );
   
function silva_validate_new_checkout_fields() {   
     
   if ( isset( $_POST['delivery_date'] ) && empty( $_POST['delivery_date'] ) ) wc_add_notice( __( 'Please select the Collection Date' ), 'error' );
   
}
  
// -------------------------------
// 2. Load JQuery Datepicker
  
add_action( 'woocommerce_after_checkout_form', 'silva_enable_datepicker', 10 );
   
function silva_enable_datepicker() {
     
  ?>
  
   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>   
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">

	<style>
	.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th {
		background: #FFF;
		color: #000;	
	}
	.xdsoft_datetimepicker .xdsoft_calendar td:hover {
		background: #000 !important;
		color: #FFF !important;
	}	
	.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
	    background: #000;
	    color: #FFF;	
	}
	.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
	    	background: #000;
	    	box-shadow: none;
	}

	.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
		color: #FFF;
	}
	.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
		color: #000;
		background: #FFF;
	}
	.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
		background: #000 !important;
	}
	</style>
	  
  <?php    
     
}
  
// -------------------------------
// 3. Load Calendar Dates
  
add_action( 'woocommerce_after_checkout_form', 'silva_load_calendar_dates', 20 );
   
function silva_load_calendar_dates( $available_gateways ) {
  
   ?>
  
   <script type="text/javascript">
  
      jQuery(document).ready(function($) {

      	jQuery.datetimepicker.setLocale('en');

		var currentDate = new Date();
		var minutes = currentDate.getMinutes();
		var m = (Math.ceil(minutes/30) * 30) % 60;
		currentDate.setMinutes(m);      	

		jQuery('#datepicker').datetimepicker({
			beforeShowDay: $.datepicker.noWeekends,
  		    format: 'd/m/Y H:i a',
  			minDate: 0, 			
  			minTime: 0,
  			step: "30",
			 allowTimes:[
			  '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30',
			  '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00'
			 ]  			
		});      	
  
      });
  
   </script>
  
   <?php
   
}
  
// -------------------------------
// 4. Save & show date as order meta
  
add_action( 'woocommerce_checkout_update_order_meta', 'silva_save_date_weight_order' );
  
function silva_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', 'silva_delivery_weight_display_admin_order_meta' );
   
function silva_delivery_weight_display_admin_order_meta( $order ) {    
     
   echo '<p><strong>Collection Date:</strong> ' . get_post_meta( $order->get_id(), '_delivery_date', true ) . '</p>';
     
}

In our example, we added some styles which you can find in Part #2 which we customised to tailor for the black and white that the site has, feel free to tailor this to your exact needs.

We also added some functionality so that you couldn’t select a date or time before the current date and time (to avoid human-error obviously).

Also in our example, the client requested to have the date selection to Monday-Friday; 9:00-17:00 with 30 minute increments on the time selection. Again, feel free to customise this to your requirements.

You can check the documentation of the plugin we used to achieve this here.

We sure hope this tutorial helped you achieve what you wanted in your e-commerce shop. If you need any assistance with this, feel free to leave a comment below!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion