• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • 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.

Szymon Barczak

An Easy Way to Add Date Picker Field to Your WooCommerce Store

Updated: June 09, 2022 / Checkout, Plugin Tutorials

There is an easy way to create WooCommerce checkout datepicker. I'll show you the method in this article. You'll learn how to implement datepicker to your store's checkout. Let's begin!

WooCommerce Checkout Datepicker - Quick 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 (you can set yours). I use Storefront theme. WooCommerce Checkout Datepicker looks like this:

Date Picker at Checkout

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

Here you can see the select box of the WooCommerce checkout datepicker:

Date Picker Selected in Checkout

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

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

  • 3 days before
  • 7 days after

Look:

WooCommerce Checkout Datepicker: Time range

After a customer makes an order, you can peek the value of the datepicker field. Just go to order details in your WooCommerce admin panel:

Order details: WooCommerce Checkout Datepicker

This field is editable by default. Customers can edit this field on their My Account page.

Here is the field in My Account - Addresses:

My Account: WooCommerce Checkout Datepicker

And this is the editing mode:

Edit Address at My Account: WooCommerce Checkout Datepicker

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

Order Details in My Account

Is this what you want? In the next section, I'll show you what plugin you need to configure WooCommerce checkout datepicker.

Checkout Datepicker - there is a plugin for that

Flexible Checkout Fields plugin

Flexible Checkout Fields lets you create WooCommerce Checkout Datepicker, of course. However, you can do much more!

This is the plugin which let you do some magic with checkout fields. With this plugin you can:

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

I want you to know that over 223,788 stores use this plugin worldwide on a daily basis. People rate this plugin 4.6 out of 5 stars.

As one of our users said, this plugin is very useful :)

Second exemplary review

You can download this plugin for free but you need the PRO version to add WooCommerce Checkout Datepicker. That's because the free version offers different field types:

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

The PRO version of the plugin offers these field types:

  • Multi-Checkbox
  • Select
  • Multi-Select
  • Radio
  • Time
  • Radio with images
  • File Upload
  • Radio with colors
  • Date

However, check out this plugin for free before you buy! Watch this video to see all its features in the free version:

Flexible Checkout Fields WooCommerce

Edit, add new or hide unnecessary fields from the checkout form. It's all about conversions and better user experience.

Download for free or Go to WordPress.org
WP Desk
70,000+ Active Installations
Last Updated: 2022-08-10
Works with WooCommerce 6.5 - 6.8.x

How to add WooCommerce Checkout Datepicker?

First, install the plugin. Then, go to WooCommerce → Checkout Fields:

WooCommerce Date Picker: add a new field

You can edit different sections here. By default, we will edit the Billing section. However, you can add WooCommerce Checkout Datepicker wherever you want.

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 let you create 10 types of fields.

Back to the main topic, select the Field Type, provide a Label and click Add Field button.

After that, you can modify the settings of this new field. Look, you can set time range in here:

WooCommerce Checkout Datepicker: 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 →

Next option, the Appearance. You can set your own CSS class to the field. Style the datepicker however you want!

CSS settings of WooCommerce Checkout Datepicker

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 value of this field in My Account.

Your Date Picker: Display On

The last option: Advanced. You can configure conditional logic in here. I won't cover this topic in this article. If you need conditional logic for your fields, look up our Conditional Logic Guide →

Summary

In this article, you have learned how to create WooCommerce Checkout Datepicker. How do you like this method? Let us know in the comments section below! Also, you can ask us any question if something is not clear for you.

Tweet

3 minutes read10982 views

Szymon Barczak

Content Management Specialist at WP Desk. Concentrates his efforts on growing our plugin user base. In his free time he is interested in psychology and retro games.

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 Date Picker Field to Your WooCommerce Store

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
  • FAQ
  • Docs
  • Get Support
  • Octolize

Legal

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

© 2022 WP Desk