How does the date picker field work?
WooCommerce Product Options comes with a date field which you can use to add a date/time picker to a product. This adds a field which customers can click on to reveal a calendar, from which they can select a date and/or time slot.
The date picker is an excellent simple alternative to adding a full events plugin to your website. It lets customers select dates (e.g. their date of birth) when adding a product to their cart, and it also converts normal WooCommerce products into event tickets or bookable appointments.
The process for adding a date field is the same as adding any other field type in WooCommerce Product Options. However, it comes with several extra options, which are described below.
Selection options
- Disable past dates - Block out all past dates on the calendar.
- Disable future dates - Block out all future dates on the calendar.
- Disable today - Prevent same-day bookings by always blocking out the current day on the calendar.
- Enable time - Allow customers to select a time slot as well as a day. Time slots are available for every 15 minutes. If you would like more options for this, then please send us a feature request with details of what you would like and we will track the amount of demand for this.
Disable days
Use this option to select specific days of the week which are never bookable, for example if you are closed on Sundays and Mondays.
Advanced settings
Date format
By default the date will use the ISO format. The default is 'F j, Y' which corresponds to 'January 20, 2023'.
You can change this by entering a new date format using the syntax which is documented in the WordPress Codex.
Date limits
Enter the earliest and latest dates which can be selected. The dates before and after these limits will be blocked out. The options are:
- Enter a static date in the format:
YYYY-MM-DD
(e.g. 20291231 for 31st December 2029). - Enter a dynamic date in the format
{time_direction}{time_amount}{time_unit}
so that the minimum/maximum dates are calculated automatically based on the current day.
When creating dynamic dates, combine the following as needed:
- {time_direction} - enter either + for future dates, or - for past dates.
- {time_amount} - enter any whole number.
- {time_unit} - enter either d, w, m, or y (for days, weeks, months or years).
Examples:
-
+1d
would display one day in the future (i.e. tomorrow).+3m
represents three months in the future.-2w
represents two weeks in the past.-1y
represents one year in the past.
Each date limit field only accepts either a single static date or a single dynamic date, so it is not possible to combine them.
Disable dates
This field allows you to enter specific dates to be blocked out on the calendar. It works by blocking out specific dates rather than ranges, so you must list each date individually.
Use the same format for static and dynamic dates as the date limit option, which is described above. The only difference is that unlike with date limits, the 'disable dates' option supports multiple dates (separated by commas). For example:
- You can enter "2023-07-01, 2023-07-02" to block out both 1st and 2nd July 2023.
- Using "+7d" would disable the individual day which is seven days in the future, not all seven days within the next week.
Time limits
If you only allow customers to select certain times of day then you can enter the earliest and latest possible time that is available. Enter the earliest and latest time in 24 hour format, such as 08:30 for 8.30am and 20:30 for 8.30pm.
Time increment
You can also choose the length of each available time slot. Enter the number of hours and minutes for each time slot, for example:
- 0 hours and 15 minutes for 15-minute time slots
- 1 hour and 45 minutes for 105-minute time slots
FAQ
Can I limit the number of places available on each date?
No - the date field in WooCommerce Product Options is a simple date picker, and not a full events plugin. If you would like full event functionality, such as the ability to manage stock for each date on the calendar, then we recommend reading our article about different ways to allow event bookings in WooCommerce. This recommends the best event and appointment booking plugins for a WooCommerce store.
Can I sell different dates at different prices, e.g. weekends?
While there's no option in WooCommerce Product Options to charge an extra fee for certain dates or weekdays, there are two possible ways that you can achieve the same result:
- Method 1 - Create two separate products (one for weekdays and one for weekends), each with different pricing.
- Method 2 - Create a product with two date picker fields (one with a calendar which includes the weekdays, and one with a calendar that only shows weekend days). You can then charge different fees for each.
Related Articles
- How to translate any Barn2 plugin with WPML
- Where can I download the options from the WooCommerce Product Options demo site?
- How to let customers make a reservation using WooCommerce Product Options
- How to create product options with repeater fields
- Do Barn2 plugins meet accessibility guidelines?
- How do I report a security bug?