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 →
Contents
- Customize the WooCommerce product page
- A date picker on the WooCommerce product page
- How to add a date picker to the WooCommerce product
- Summary and more about the plugin
- Show Delivery Time Picker on your WooCommerce Product Page
- An easy way to add the Date Time Picker field to your WooCommerce checkout
- WooCommerce Extra Product Options - power up your products with one plugin
- Custom attributes on the product page (better than WooCommerce gives you)
- How to add a custom product field in WooCommerce? (free 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!
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.orgAdding 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
-
Add a date picker
Firstly, add a new Date field. You will find it among the Picker fields:
Adding a WooCommerce date picker -
Choose the field settings
Next, use the general settings:
WooCommerce Datepicker - General settings -
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 - 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.
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).
Exclude any days of week -
First day of week
✅ Next, you may decide which day of the week will appear first in the calendar.
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: Selected days limit 👀 Take a look at how it works:
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.
Defining the time of day closing -
The date picker field Advanced settings
✅ Take a look at the whole settings page:
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 product date picker: excluded dates
-
-
Pricing
✅ You may also decide to add a fixed or percentage fee when a customer picks any date by himself.
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).
Extra payment when choosing the date -
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.
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
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.
Leave a Reply