Discover the new date picker field in the WooCommerce Product Options plugin, and why it's the easiest way to let customers choose a date and time.
WooCommerce is ideal for selling products online, but out-of-the-box it doesn't provide a way for customers to select a date or time. There are plenty of WooCommerce bookings and events plugins available, but these are complex to setup and overkill for many websites. If you simply want to add a date picker field to a WooCommerce product, then a product add-ons plugin is a better option.
That's why we've added a date picker field to our WooCommerce Product Options plugin. It makes it easy to add a date calendar with time picker to any product in your store.
We've also added several other new features to make your product options even better. We planned all of these features after listening to our customers' feedback requests - we love hearing from you!
Add a time and date picker field with ease
The most exciting new feature of the WooCommerce Product Options plugin is the ability to add a time or date picker field to your product pages. This means that customers can choose a date or time slot for the product they are buying. This can be especially useful for products such as:
- Event tickets
- Rental equipment
- Personalized items
- Gifts that require a specific delivery or pick-up date (and don't forget that you can also use the plugin to sell gift wrap options 🎁)
Setting up a time or date picker in WooCommerce used to require installing a full bookings plugin, which can be complex and expensive. However, with the new date option in WooCommerce Product Options, adding this feature is simple and straightforward. You can customize the date and time format, and even set up minimum and maximum dates for customers to choose from.
What sort of products need a date calendar field?
There are lots of products that would benefit from a calendar option which allows them to select a date and/or time:
- Upcoming events - Create WooCommerce products which act as tickets to a training course or event. If the event is running on multiple days then customers can use the date picker field to select their preferred date.
- Appointment bookings - Adding a calendar to the WooCommerce product page is an excellent idea if you need to take appointment bookings and accept payment online. Create a product as usual, and add a booking calendar to it. Remember to add your working hours and holiday dates when you're not offering appointments. Clients can then book an appointment online, selecting their preferred date and time.
- Age-restricted products - If you need to know the customer's age, then add a DOB or date of birth field to the product. They can select their birth date from the dropdown calendar. And even better, you can use the File Upload field in WooCommerce Product Options to require them to upload ID proving their age.
How the new WooCommerce date picker field works
The new date picker product add-on is simple to set up, yet has all the options you need. You can:
- Add a calendar field to any WooCommerce product or variation.
- Optionally enable a time picker, so that customers can choose a date and time.
- Disable past dates in the calendar (ideal for taking bookings for future events or time slots).
- Disable future dates (perfect for adding a date-of-birth field to a WooCommerce product).
- Prevent same-day bookings by automatically marking the current day as unavailable.
- Disable specific weekdays, such as weekends.
- Add a helpful description which appears underneath the WooCommerce date picker field.
- Set the field as required, which forces customers to select a date before adding the product to their cart.
- Change the date format.
- Enter minimum and maximum date limits. This lets you set the earliest or latest date which will be available on the calendar. You can either do this manually be entering specific dates, or dynamically by entering a time period (e.g. to only allow bookings which are more than 7 days in the future).
- Mark specific dates as unavailable, for example if you already have bookings on that date, or are going on holiday.
- Use conditional logic to dynamically show or hide the WooCommerce product date picker field based on the other options which the user selects. For example, if you're selling tickets to a training course then you might only display the date picker calendar if the customer selects "Face to face training" instead of "Online".
- Add an extra fee to the product when the customer selects a date. If you want to charge a different fee depending on the date then you can add multiple date picker fields. For example, if an event costs more on weekends then you would create two date picker fields:
- One showing a calendar with weekday dates, without the extra fee.
- Another showing the weekend dates, with the extra fee.
The new date picker field is super-flexible.
The customer journey
From the customer's perspective, it works like this:
- They visit the single product page as usual, and select a date (plus time, if this is enabled) before adding the product to their cart.
- The selected date and time appear on the WooCommerce cart and checkout page.
- After placing the order, the date and time also appear in the order confirmation email.
Notifications for store owners
When a customer orders a product which has a date picker field, their selected date and time will appear on the order notification email and in the WordPress admin. Store owners can easily see the date and time.
See it in action on our date picker demo product
That's a lot of words about how the new date picker works!
You can also see it in action on our 'Training Course' demo product. See the 'Course date' field disappear using conditional logic when the 'Online' option is selected. Select a date and add the product to your cart. See the date appear in the cart and checkout.
How to create a date picker product add-on
Setting up the new time and date picker field in WooCommerce Product Options is easy:
- First, you will need to install and activate the plugin on your WooCommerce store.
- Once the plugin is activated, you should create all the products that you wish to add a date picker to.
- Now navigate to Products → Product Options in the WordPress admin.
- Create a product options group and choose which product(s) or categories you want the date picker to appear on. You can create as many groups as you like. For example, if you're selling tickets to multiple events, which run on different dates, then you'll need a group per event.
- On the same page, click the 'Date' option type and fill in all the information.
Price discounts made easy
While the new date picker product add-on is the most exciting new features, that's not all! The WooCommerce Product Options plugin also now supports negative flat fees or quantity-based fees on product options.
Previously, you could set up a product option so that the product price would decrease by a percentage if you selected the option. Now you can do the same and reduce the overall price of a product by an exact amount when a particular option is selected.
This can be especially useful if the basic cost of a product includes any 'extras' which the customer can remove. It's a good idea to include extras as standard because this makes customers more likely to buy them, thus increasing your average order value. However, you don't want to lose customers on a tight budget, so you can add cheaper alternatives as product options. When the customer chooses a cheaper option, this reduces the total price of the product.
For example, imagine that you're selling a custom built computer. You might add 4GB of storage as standard, but offer a reduction to 2GB as an optional downgrade. Switching to 2GB would reduce the basic price of the product.
Bigger images for more visual appeal
Finally, we've also added the ability to display bigger images of your product options. When customers select an image option, the main image on the product page will update to show a bigger version of that image.
This is useful if you're displaying options as clickable images. These normally appear as small thumbnails, which can make them hard to see. With the new version, you can add the images to the product image gallery so that customers can see a large version, zoom in, and so on. This can provide customers with a quick and easy way to view all of the available options and help them make a more informed decision.
As well as being able to find them in the gallery, customers will see the big version when they select a particular image option.
Add a date picker field (and more) to your WooCommerce products today!
The new date and time picker in WooCommerce Product Options makes it super-simple to let customers to choose a date when adding products to their cart. You can enable or disable available dates for a product, add extra fees, and much more. It's perfect when you want to keep things simple and don't want the extra complexity of having a full event bookings plugin.
If you're already using WooCommerce Product Options then you can update to version 1.3 from the WordPress Dashboard. Alternatively, get the plugin today and start adding a wide range of flexible options to your products.