How to add a date picker (calendar) to a WooCommerce product page

image of a calendar

Many online stores need input fields on their product pages so the customer can customize their purchase. One example of an advanced input field is a date picker. In this blog post, we’ll go over how you can add a date picker to your WooCommerce product pages, so customers can select one or more dates. Store administrators can see the selected date on the order admin screens.

This tutorial uses WordPress, WooCommerce, and an additional plugin to add the date picker. Let’s dive in!

What is a date picker?

A date picker looks like a regular text input field, but when a customer clicks on it, a calendar pops up that allows them to choose a date. Here’s how it looks:

Example of a date picker on the product page

Here is an example of a date picker on a demo product.

When to use a calendar field

Date pickers are typically used for bookable products, but there are many more use cases. Let’s look at some examples:

  • Car rental: If you’re running a car rental business, you may want your users to select 2 dates – a pickup date and a return date. Good to know: You can determine the product price based on the number of days between those selected dates! If the daily rate for renting a vehicle is $50, and your user selects 3 days in the calendar, the final product price becomes $150.
  • Flower stores: If you have a flower shop, you can sell flowers online and add delivery features. Your customers can select when they want their flowers delivered.
  • Hairdressers, wellness & spas: You can allow your customers to book their appointments online. They can select a date when they would like to use your services.

How to add a date picker to your WooCommerce product pages

In this section, we’ll explain how you can add a date picker to your WooCommerce products. Unfortunately, WooCommerce does not have an out-of-the-box solution to add advanced form fields to products. That’s why you’ll need a plugin to add those input fields. We’ll be using the Advanced Product Fields for WooCommerce plugin to add the date picker. This plugin also allows you to add other types of fields to your products, which are not available in standard WooCommerce.

Let’s begin!

1. Install the plugin

These are the steps to install Advanced Product Fields for WooCommerce:

  • If you haven’t done so already, get the plugin here.
  • Download the plugin and install it on your WordPress site via Plugins → Add New.
  • Once you’ve installed and activated the plugin on your WordPress website, navigate to WooCommerce → Settings → Product fields from the dashboard to activate your license key.

2. Enable the date field in the WooCommerce settings

Go to WooCommerce → Settings → Product Fields and enable the date field there:

enable the date field in the settings

On the same screen, you can also define the date format to display all dates in.

3. Add a date picker field to a WooCommerce product

Edit the product you’d like to add a date picker field to via WooCommerce → Products. In the Product data metabox, navigate to the Custom fields section and click Add your first field.

Date field example

Set the field’s Type setting to Date and add a label, such as “Select delivery date”. Now save your product. This will add a date picker field to the WooCommerce product page! 

4. Adjust the calendar settings

You’ll probably want to configure some restrictions to the calendar. For example, users shouldn’t be able to select dates in the past. Advanced Product Fields for WooCommerce, especially its Extended version, has plenty of settings to configure your date calendar field. Let’s go over all the available settings:

date field settings in the backend
  • Disable days (available in the Extended version): Define which weekdays (such as the weekend: Saturday & Sunday) can’t be selected.
  • Min. date (available in Extended version): Define the minimum date that can be selected. Any date before that won’t be valid. You can also add dynamic values such as “7d” which means “7 days from today”. For example, if you run a print shop and your delivery time is 2 days, you can make sure your customers can’t select today or tomorrow for delivery.
  • Max. date (available in Extended version): Define the maximum allowed date. Any selected date after that won’t be valid. Just like the min. date setting, you can add dynamic values.
  • Disabled dates (available in Extended version): Define a comma-separated list of dates that can’t be selected. This setting is handy to define vacation days or holidays.
  • Disable today after a specific time (available in Extended version): This setting allows users to select today’s date only if the current time is before the specified time. This setting prevents delivery businesses from delivering on the same day when it’s already too late in the day.
  • Selection options: This allows you to define if dates in the past/future should be selectable.

Advanced usage: Change product price based on the number of days between 2 dates

Let’s say you own a car rental service. You’ll want to give your customers the option to define their pickup and return date. The product price is then calculated based on the number of days between those dates. Please note, this feature is only available in the Extended version of Advanced Product Fields.

1. Add a second date field

Repeat the steps we did earlier in this blog post to add a 2nd date field to your product. When you’ve completed the steps, this is what your product page should look like:

WooCommerce car rental demo

2. Adjust the final product price

Your customers can now select a pickup and return date. Follow these steps to change the product price depending on how many days are selected:

  1. Set the daily rate of your product in the General Price setting of the General tab. In our demo above, we’ve set the price to $40.
  2. Edit the return date field and enable Adjust Pricing. Set the pricing type to Formula Based Pricing.
    adjust pricing setting in APF
  3. Enter this as a formula: max(0;(datediff([field.62135b82e0de9];[field.62150bfd67be2])*[price])-[price]). It’s a fairly complex formula that basically counts the days and multiplies it with the daily price. You’ll need to make 2 edits in this formula. Where it says [field.62135b82e0de9] change 62135b82e0de9 to the ID of your field. Do this twice.

Once you’ve done that, you’ll see our plugin calculates a total product price depending on the selected dates:

WooCommerce car rental demo with date pickers

Adding a date picker to WooCommerce products – conclusion

By adding a date picker to your products, you make it easier for your customers to book those products and/or select a delivery/return date.

Are you ready to start adding a date picker to your WooCommerce products? Get started with Advanced Product Fields for WooCommerce now!

Share