How to show the date picker on the WooCommerce product page

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.

Flexible Product Fields FREE →

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.

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

Adding new product fields is just a few clicks away!

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.

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

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:

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:

   

2. Choose the field settings

   Next, use the 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:

   

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

     

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

     

   • First day of week

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

     

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

     

     👀 Take a look at how it works:

     

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

     

   • The date picker field Advanced settings

     ✅ Take a look at the whole settings page:

     

   • The product date picker

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

     

4. Pricing

   ✅ You may also decide to add a fixed or percentage fee when a customer picks any 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).

   

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.

   

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

   

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.