WooCommerce Tips

WooCommerce: Display Order Delivery Date @ Checkout

Here’s how you can add a “calendar” field on the WooCommerce checkout page, let people decide the delivery date, and save this value in the order.

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        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 8
 * @community     https://businessbloomer.com/club/
 */
 
// -------------------------------
// 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 ) {
   wc_enqueue_js( "
      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 );
      });
   " );
}
 
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() {  
   echo '<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">'; 
   echo '<script src="//code.jquery.com/ui/1.13.0/jquery-ui.js"></script>';     
}
 
// -------------------------------
// 3. Load Calendar Dates
 
add_action( 'woocommerce_after_checkout_form', 'bbloomer_load_calendar_dates', 20 );
  
function bbloomer_load_calendar_dates( $available_gateways ) {
   wc_enqueue_js( "
      $('#datepicker').click(function() {
            $('#datepicker').datepicker({ 
               dateFormat: 'dd-mm-yy',
               maxDate: '+2m',
               minDate: 1, 
            }).datepicker( 'show' );        
      });
   " );
}
 
// -------------------------------
// 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 ) {
    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>';
}

Is There a Plugin For That?

If you’d love to code but don’t feel 100% confident with PHP, I decided to look for a reliable plugin that achieves the same result.

In this case, I recommend the WooCommerce Delivery Slots plugin. On top of showing a date & time picker on the checkout page, you can also restrict hours and days, charge fees and premium for specific slots and much more.

But in case you hate plugins and wish to code (or wish to try that), then keep reading 🙂

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Cart and Checkout on the Same Page
    This is your ultimate guide – complete with shortcodes, snippets and workarounds – to completely skip the Cart page and have both cart table and checkout form on the same (Checkout) page. But first… why’d you want to do this? Well, if you sell high ticket products (i.e. on average, you sell no more than […]
  • WooCommerce: Disable Payment Method If Product Category @ Cart
    Today we take a look at the WooCommerce Checkout and specifically at how to disable a payment gateway (e.g. PayPal) if a specific product category is in the Cart. There are two tasks to code in this case: (1) based on all the products in the Cart, calculate the list of product categories in the […]
  • WooCommerce: Add Privacy Policy Checkbox @ Checkout
    Here’s a snippet regarding the checkout page. If you’ve been affected by GDPR, you will know you now need users to give you Privacy Policy consent. Or, you might need customer to acknowledge special shipping requirements for example. So, how do we display an additional tick box on the Checkout page (together with the existing […]
  • WooCommerce: Redirect to Custom Thank you Page
    How can you redirect customers to a beautifully looking, custom, thank you page? Thankfully you can add some PHP code to your functions.php or install a simple plugin and define a redirect to a custom WordPress page (as opposed to the default order-received endpoint). This is a great way for you to add specific up-sells, […]
  • WooCommerce: Disable Payment Gateway by Country
    You might want to disable PayPal for non-local customers or enable a specific gateway for only one country… Either way, this is a very common requirement for all of those who trade internationally. Here’s a simple snippet you can further customize to achieve your objective. Simply pick the payment gateway “slug” you want to disable/enable […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

38 thoughts on “WooCommerce: Display Order Delivery Date @ Checkout”

  1. Simon Howe

    I’m using this on Woo 5.9 at the moment with a variety of themes. It doesn’t work immediately but two changes resolve the issue and it works like a dream!

    At line 76 change the jQuery version from 1.11.4 to 1.13.0

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

    Insert a line at 75 linking to your preferred jQuery UI stylesheet

    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">

    Hope you don’t mind my contribution Rodolfo!

    Reply
    1. Rodolfo Melogli

      Thanks a million Simon, super useful!

      Reply
  2. Seyed Rezaei

    Hi, After adding the PHP Snippet: Display Order Delivery Date @ WooCommerce Checkout the color of view cart and checkout buttons in the cart tray at the site header has been changed to grey and I can not change it to any other colors. Please help me with that.

    Reply
    1. Rodolfo Melogli

      Did you copy the exact snippet? Seems like a CSS / JS / HTML syntax error

      Reply
  3. fouquet

    Hello,

    And thank you for this great solution !!
    I just have an error showing in the console of my chrome browser:

    Uncaught TypeError: Cannot read property ‘match’ of undefined
    at show_calendar ((index):431)
    at HTMLDocument. ((index):440)
    at HTMLDocument.dispatch (jquery.js?ver=1.12.4-wp:3)
    at HTMLDocument.r.handle (jquery.js?ver=1.12.4-wp:3)
    at Object.trigger (jquery.js?ver=1.12.4-wp:3)
    at x (jquery.js?ver=1.12.4-wp:4)
    at XMLHttpRequest.c (jquery.js?ver=1.12.4-wp:4)

    Can you tell me how to fix it ??
    Because I am new to programming !!
    I thank you in advance. 🙂

    Reply
    1. Rodolfo Melogli

      Hi Fouquet, this will require custom troubleshooting. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      Reply
  4. ammar

    Hello,

    How can i add both datetime picker and Local Pickup together with the code?

    Thanks

    Reply
    1. Rodolfo Melogli

      Hi Ammar, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      Reply
  5. Vasco

    Hi Rodolfo,

    Thanks for the nice snippet! I only have 2 questions. How can I let customers choose a date at min. 2 days later. Example: I order on Monday so I can choose only a date from Wednesday (so not Tuesday). Second question is how to exclude weekend?

    Thanks in advance.
    Vasco

    Reply
    1. Rodolfo Melogli

      Hi Vasco, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      Reply
  6. Durlov Baruah

    Hi there,
    Firstly a big thank you for your contributions. I have used your code through a plugin called snippets as I dont have a child theme. The datepicker is not loading. However, the validation of required date field is catching on submit.

    If I remove the style=”display:none”, then it shows up. However, the date picker doesn’t load. I am using a plugin called Checkout Manager for Woocommerce by Quadlayers. Can that plugin be the cause? Even in that plug-in, the date picker is not loading if I put conditions like min and maxdate.

    Can you please help.

    Reply
    1. Rodolfo Melogli

      Could be anything Durlov. Try disabling all plugins but Woo and switch theme temporarily, and see if it works

      Reply
  7. Janjua

    Hi, I want to display “Pickup calendar” at shop page. I have a table layout shop page. where i can bulk select the items. Is there any way that i can add the pickup date calendar at that page.

    Reply
    1. Rodolfo Melogli

      Hi Janjua, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      Reply
  8. Buddish

    Why i cannot select a date from next month or something. Selection is limited to around 10 days . I want to make it flexible. Plz help asap!

    Reply
    1. Rodolfo Melogli

      It should actually let you select dates for the next 2 months (maxDate)

      Reply
  9. Rahul Chauhan

    Hi
    Can you tell me how to show allow customer to select delivery date and time at the product detail page. The the above tutorial is best to show at checkout page. I want to show at product detail page

    Reply
    1. Rodolfo Melogli

      Rahul, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      Reply
  10. Jayesh

    Not show delivery date in order view page in backend.

    Reply
    1. Rodolfo Melogli

      It should. Can you try with a different theme and no other plugin but Woo?

      Reply
  11. aaron

    I want it to show up when the items belong to some categories and would be delivired to a designated location.
    I hope I could get your helps.

    Reply
    1. Rodolfo Melogli

      Hi Aaron, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

      Reply
  12. Ricardo Franco

    Hi Rodolfo,

    Does this snippet still work? I just deployed on my staging website and it does not show up.

    Best regards,
    Ricardo

    Reply
    1. Rodolfo Melogli

      Yep, it should. Can you try with another theme?

      Reply
  13. LANGONIER MELANIE

    Hi rodolfo,
    I need a special help but i don’t know where i can find it… I explain myself. I have buy a plugin WooCommerce Order Delivery OR Pick up Date it’s a cool plugin work great but not support anymore by the maker… This pickup date appear on order and i realy need that the calendar appear in my product page … i’m sure there is a way on the php file to put the calendar to another place but my knowledge are not sufficient to do that.. Maybe you can help me if i show you the files or something like that. Thanks a lot

    Reply
    1. Rodolfo Melogli

      Hello Melanie, 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

      Reply
  14. Matt

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

    Reply
    1. Rodolfo Melogli

      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

      Reply
  15. Alexandre W

    Great snippet! Could it be synched with subscriptions?

    Reply
    1. Rodolfo Melogli

      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

      Reply
  16. Aramon

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

    Reply
    1. Rodolfo Melogli

      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

      Reply
  17. Mike

    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?

    Reply
    1. Rodolfo Melogli

      Hey Mike, yes that could be done – but you need to make the two systems “talk” with additional PHP 🙂

      Reply
  18. Alessandro Marengo

    Thanks Rodolfo for your wonderful mega snippet! This would a super time saver for many others. 😉

    Reply
    1. Rodolfo Melogli

      Excellent 🙂

      Reply
  19. Qui Nguyen

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

    Reply
    1. Rodolfo Melogli

      Great 🙂

      Reply
Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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