• 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.

Tomasz Drzewiecki

How to show the date picker on the WooCommerce product page

Updated: February 24, 2023 / Plugin Tutorials, Plugin Updates

You may want to add custom fields to the WooCommerce product page, including a date picker. Let customers choose the exact day (or days) to receive products or services. Today, I will show you how to add a datepicker on the WooCommerce product page with a WordPress plugin.

Reading the additional information about the order, again and again, may not be the best option for getting customer choices.

Let's add 18 custom fields with a free product customizer to get specific information from customers about the product or service you sell. You may also add the datepicker and file upload fields in the PRO version of this WordPress plugin for WooCommerce.

Table of contents

  • Customize the WooCommerce product page with a free plugin
  • A date picker on the WooCommerce product page
  • How to add a date picker to the WooCommerce product
  • Summary and more about the plugin

Customize the WooCommerce product page

Using attributes and variations is not always the best option. Let's take a look at the WooCommerce product page with custom fields.

Customize your WooCommerce products with new options
Customize your WooCommerce products with new options

Download the free plugin & start customizing your WooCommerce products today!

Flexible Product Fields WooCommerce

Add a WooCommerce datepicker on the product page. Exclude specific dates and days of the week. Define closing times.

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

Adding new product fields is just a few clicks away!

Add custom fields to the WooCommerce product page
Add custom fields to the WooCommerce product page
Read how to add a checkbox, multi-checkboxes, and multiple product options for a WooCommerce product.

A date picker on the WooCommerce product page

Let's see now how to add a date picker.

This field is available in the PRO version of the plugin.

WooCmmerce datepicker on product page with a WordPress plugin
WooCmmerce product date picker: excluded dates

Visit the product page to see all features of the plugin.

Flexible Product Fields PRO WooCommerce £59

Add a WooCommerce datepicker on the product page. Exclude specific dates and days of the week. Define closing times.

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

You can also use the field settings:

  • Excluded dates
  • Excluded days of the week
  • Selected days limit
  • Time of day closing

So, you can customize the date picker field to your needs:

Date picker on the WooCommerce product page
Date picker on the WooCommerce product page
💡 Read more about the Date field in the documentation. A date picker has a neutral design so it fits most WP templates.

Let's see how to add, set, and use the date picker.

How to add a date picker to the WooCommerce product

  1. Add a date picker

    Firstly, add a new Date field. You will find it among the Picker fields:

    WooCommerce date picker on product page
    Adding a WooCommerce date picker
  2. Choose the field settings

    Next, use the general settings:

    WooCommerce product date picker
    WooCommerce Datepicker - General settings
  3. Advanced settings

    Then, decide about the date picker options concerning the date itself, like the date format, days before, and days after:

    WooCommerce datepicker plugin
    WooCommerce Datepicker plugin - Advanced settings
    • Excluded dates

      ✅ This function lets you enter specific dates available to the user. Such exclusion of calendar dates will be useful for indicating e.g. non-working days (or excluded for some other reason). In this article, you will see some examples of how this field works.

      Enter specific dates separating them with commas. Use WordPress format e.g. dd.mm.yy. Then save changes.

      WooCommerce datepicker plugin excluded dates
      Here you can exclude the dates
    • Excluded days of week

      ✅ You can also exclude specific dates or weekdays in the panel. The function will be useful e.g. for limiting the calendar to working days (excluding Saturday and Sunday).

      I have chosen an excluded date (01.05.2023) and 2 excluded days of the week (Saturday and Sunday).

      Excluded days of week
      Exclude any days of week
    • First day of week

      ✅ Next, you may decide which day of the week will appear first in the calendar.

      Defining the first day of week
      Define the first day of the week
    • Selected days limit

      ✅ It is also possible to indicate more than one date🥳. This setting determines the maximum number of dates available for selection in the calendar. The function will be useful e.g. when the product is offered on a subscription basis and is delivered on specific days only (catering).

      The initial limit is "1" and it allows the user to select one date in the date picker on the WooCommerce product page. In my case, I will set the days limit to 3.

      WooCommerce datepicker on product page
      WooCommerce datepicker: Selected days limit

      👀 Take a look at how it works:

      WooCommerce datepicker with selected days limit
      Selected days limit: Flexible Product Fields
    • Time of day closing

      ✅ If you want, you can also restrict customers from choosing the current day after the specific time.

      This function introduces a new text input in the panel for entering the closing time of the working day. Selecting the current date will not be possible after this time is exceeded. The function will be useful e.g. if the field indicates the date of distribution of the product and orders are not accepted after a specified hour.

      Enter the specific time in the format HH:MM (e.g. 12:00). Leave the field blank so that 23:59 is the closing time. Save Changes.

      WooCommerce datepicker define time of closing
      Defining the time of day closing
    • The date picker field Advanced settings

      ✅ Take a look at the whole settings page:

      WooCommerce datepicker
      Excluding dates with a datepicker field
    • The product date picker

      ✅ Finally, let's see the final effect of the date picker on the WooCommerce product page:

      WooCmmerce datepicker on product page
      WooCmmerce product date picker: excluded dates
  4. Pricing

    ✅ You may also decide to add a fixed or percentage fee when a customer picks any date by himself.

    WooCmmerce datepicker adding prices
    Define any extra price when the customer picks the date by himself

    As you can see, this WordPress plugin is a great WooCommerce extension that also can add an extra fee when a customer uses the datepicker to specify the date(s).

    WooCmmerce datepicker on product page
    Extra payment when choosing the date
  5. Conditional logic

    ✅ Last but not least, you can decide to show or hide the field based on additional rules.

    For example, you can show the date picker only if the customer ticks a checkbox. Of course, you need to set such an additional field as a select or a checkbox.

    Conditional logic Flexible Product Fields
    You can also add conditional logic (PRO)

    It's useful if you want to build a WooCommerce product page with dynamic and flexible options!

    Conditional logic Flexible Product Fields
    Conditional Logic

Summary and more about the plugin

Today, you've learned how to add the datepicker to appear on the WooCommerce product page with a WordPress plugin!

If you have any questions, leave a comment below.

Finally, see all features of Flexible Product Fields & read the plugin documentation.

Flexible Product Fields PRO WooCommerce £59

Add a WooCommerce datepicker on the product page. Exclude specific dates and days of the week. Define closing times.

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

More about WooCommerce product date picker

  • Add a multi-checkbox with Flexible Product Fields

    WooCommerce multi checkbox field
    WooCommerce product with multiple options. Find out how to add WooCommerce multiple checkboxes with Flexible Product Fields.

  • Add product wrapping with Flexible Product Fields

    WooCommerce gift wrapping option
    Add a gift-wrapping checkbox. Find out how to add a gift-wrapping option to your product page.

Tweet

4 minutes read1849 views

Tomasz Drzewiecki

From 2020 in WP Desk. First as a Happiness Engineer in the Rangers team. Now as a QA Engineer in the Sailors team.

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 › Plugin Tutorials › How to show the date picker on the WooCommerce product page

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