• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Bartosz Gajewski

An easy way to add the Date Time Picker field to your WooCommerce checkout

Updated: December 27, 2022 / Checkout, Plugin Tutorials

Learn how to add a new field like delivery date and time picker in your WooCommerce checkout form. I'll show you the easy method in this article using a plugin. You'll see how to implement such a date/ time picker to the WC checkout.

Do your WooCommerce customers contact you to learn about the exact delivery date or time? Would be nice to automate this and avoid additional emails/ phone calls?

In this article, I will show you the way to add delivery date and time picker in your WooCommerce checkout in a few minutes with a plugin. Let's begin!

Table of contents

  1. WooCommerce Checkout Date Time Picker - Quick intro
  2. Add a Date Picker field - Plugin
  3. How to add WooCommerce Checkout Date picker - Steps

WooCommerce Checkout Date Time Picker - Intro

I respect your time. That's why I want to show you the final effect first. This way you'll be sure that this is what you are looking for.

I have a default styling of the checkout in my store (learn how you can set yours). I use the Storefront theme. So, my WooCommerce Checkout Date picker looks like this:

woocommerce date time picker in the checkout form
WooCommerce date time picker - an example

Of course, you can add more fields (like a time field) and rearrange them.

woocommerce delivery date picker added to checkout
WooCommerce date time picker field in the checkout form

You can place a new field wherever you want in the WooCommerce checkout form!

Also, you can set this field as required if you need to. There are many more options such as conditional logic or custom validation as well. I'll tell you more about this later in this article.

Add a new checkout field (date picker)

So, let's see the select box of the new WooCommerce checkout field - let's call it the delivery date picker:

flexible checkout fields woocommerce delivery date picker
WooCommerce delivery date picker

I didn't set any time range. However, it is possible, of course!

Below you can see the select box where I set the time range to:

  • 3 days before
  • 7 days after

Take a look at the field with the maximum date range:

woocommerce date picker field example
Date field WooCommerce: 3 days before, 7 days after

Where can I see the customer value?

The information about the value from the delivery date picker will appear in the WooCommerce order details.

Date in the WooCommerce order billing details
Date in the WooCommerce order billing details

This field is editable by default. It means that your customers can edit the field value on their My Account page.

Here is the date field in My Account - Addresses:

woocommerce date time picker in my account
My Addresses: WooCommerce date picker

And this is the editing mode:

edit delivery time picker woocommerce
Edit the value of the WooCommerce date picker

Also, a customer can look up the field's value in the Orders:

my orders with the date example
My orders: WooCommerce order with the date example
After a customer places an order, you can also pick the value of the date field for the order in your WooCommerce admin panel. For example, when a field was not required or you hid it.

So, I hope this is what you're looking for! Consequently, I'll show you what plugin you need to configure to add such a delivery date field in your WooCommerce checkout.

WooCommerce Checkout with a Date Picker - Plugin

WooCommerce Checkout editor plugin to add new fields like date or time picker

Flexible Checkout Fields PRO WooCommerce £59

Add WooCommerce date and time picker fields. It's easy and fast! With Flexible Checkout Fields, you can let your customers pick up the delivery date and time in the WooCommerce checkout!

Add to cart or View Details
WP Desk
80,000+ Active Installations
Last Updated: 2023-03-15
Works with WooCommerce 7.1 - 7.5.x

Flexible Checkout Fields lets you create a WooCommerce Checkout Date or Time picker, of course. However, you can do much more!

This is the plugin which that lets you customize WooCommerce checkout fields! For example, with this plugin you can:

  • easily add custom fields to the WooCommerce checkout,
  • edit the present ones,
  • or rearrange fields in the checkout etc.

I want you to know that over 235,543 stores use this plugin worldwide daily. People rate this plugin 4.6 out of 5 stars.

You can download this plugin for free to add new following field types:

  • Text
  • Textarea
  • Number
  • E-mail
  • Phone
  • URL
  • Checkbox
  • Color
  • Headline
  • Paragraph
  • Image
  • HTML

However, you'll need the PRO version to add WooCommerce Checkout Date and Time picker and more field types like:

  • Multi-Checkbox
  • Select
  • Multi-Select
  • Radio
  • Time
  • Radio with images
  • File Upload
  • Radio with colors
  • Date
Watch this video to see all features in the free version. Firstly, check out the free version of the plugin and use it in your store before you buy PRO!

Flexible Checkout Fields WooCommerce

Add WooCommerce date and time picker fields. It's easy and fast! With Flexible Checkout Fields, you can let your customers pick up the delivery date and time in the WooCommerce checkout!

Download for free or Go to WordPress.org
WP Desk
80,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x

How to add WooCommerce Checkout Date picker - Steps

  1. First, buy and install the PRO version of the plugin.Buy the plugin →
  2. Then, go to WooCommerce → Checkout Fields:WooCommerce Date Picker: add a new field
  3. In addition, you can edit different sections here. By default, we will edit the Billing section. However, you can add WooCommerce Checkout Datepicker wherever you want.
    The Flexible Checkout Fields plugin lets you add custom fields to different sections of the checkout. You easily modify the Order, Shipping, or Billing section. Also, you can add fields before or after:
    • Customer Details
    • Billing Form
    • Shipping Form
    • Registration Form
    • Order Notes
    • Submit Button

    It may be the WooCommerce Checkout Datepicker but doesn't have to. As I said before, Flexible Checkout Fields lets you create 10 types of fields.

  4. Select the Field Type, provide a Label and click the Add Field button.
  5. After that, you can modify the settings of this new field. Look, you can set the time range here:WooCommerce Checkout Date picker: Edit field
    There is a Validation option as you may see. Do you need to add custom validation to this WooCommerce Checkout Datepicker? Read our WooCommerce Checkout Custom Validation Guide →
  6. Next option, the Appearance. You can set your own CSS class in the field. Style the WooCommerce delivery date field!CSS settings of WooCommerce Checkout Datepicker
  7. With the Display On option, you can set where to display the WooCommerce Checkout Datepicker. For example, you can set the plugin to display this field only in the checkout. This way user won't be able to change the value of this field in My Account.Your WooCommerce Delivery DatePicker field : Display On
  8. The last option: Advanced. You can configure conditional logic here. I won't cover this topic in this article. If you need conditional logic for your fields, look up our Conditional Logic Guide →

That's it - we've just added the date picker to the WooCommerce checkout. Furthermore, remember you can add a time picker too!

woocommerce date picker and woocommerce date time picker
Date and Time in the WooCommerce checkout

Summary

To sum up, in this article, you have learned how to add a new WooCommerce Checkout field - Delivery Date (and Time picker). How do you like this method? Let us know in the comments section below! Most importantly, ask us any questions if something is not clear to you.

Read more about customizing WooCommerce checkout fields

  • Add radio buttons to checkout

    woocommerce radio buttons
    How to add radio buttons to WooCommerce checkout? In this article we give you tips on how to show radio buttons to the WooCommerce checkout.

  • WooCommerce custom checkout fields

    custom fields woocommerce
    Add WooCommerce custom fields Find out how to add and configure WooCommerce checkout fields

Tweet

3 minutes read12975 views

Bartosz Gajewski

Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Checkout › An easy way to add the Date Time Picker field to your WooCommerce checkout

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2023 WP Desk