Traditionally, web forms would require users to enter a date in a text or date field. The problem with this is the poor UI/UX it offers. In this tutorial we’ll look at how to add a date picker to your WooCommerce product pages.
Users would have to enter the date in the correct format (MM/DD/YYYY) to book a slot without any issues. However, if the format wasn’t specified, customers ended up booking on the wrong date. All of this resulted in a poor user experience.
A better approach is to use date pickers on your product pages.
With a date picker, users who need to specify a date related to the product can simply select a date from a calendar. This makes visualizing easier for users and speeds up user flows on your WooCommerce store. Additionally, this can help you deliver a good user experience.
In this article, we’ll explain how you can add a date picker field to WooCommerce using the WooCommerce Product Add-Ons Ultimate plugin. We’ll also go over some advantages of adding the date picker field to the product page instead of the checkout page.
What is a date picker and when should you use one?
A date picker is a widget that allows users to select a date using a pop-up calendar.
You can add a date picker field to product pages that users can click on to select a date. When they click on the date picker field, a calendar will pop-up for them to select a date.
Here’s a simple example of a date picker on a product page.
By adding a date picker on your product page, you make it easier for customers to choose a date to book. This way, you can speed up the buying journey while delivering better user experience.
Let’s take a look at some use cases for using date pickers:
- Florists. If you run an online store that sells flowers, you’ll need to add a date picker to the product page to let customers book the day they want their flowers delivered. This can help customers visually see the dates available for booking.
- Restaurants. Restaurants and businesses in the food industry that offer deliveries to customers can use a date picker to let patrons choose the date they want their meal to be delivered. Check out our WooCommerce restaurant ordering tutorial to learn more about how restaurants can benefit from including additional fields on the product page.
- Wellness centers. Wellness centers can use a date picker that will let users specify dates for various services by selecting any of the available timing slots. This can help you better communicate availability and make it easier for customers to book a slot.
- Consultants. If you run a consultancy firm or provide consultancy services to people, providing a date picker on your online store might be beneficial. Customers will be able to specify dates that suits them best.
If you are looking for a way to accept bookings on your site, check out this tutorial on creating bookings in WooCommerce
Why add a date picker to the WooCommerce product page
There are advantages of adding the date picker field on the product page rather than the checkout page.
Letting customers choose a date on the product level means that you can let them purchase more than one product in one go. Not only does this help increase the average order value but can also motivate customers to purchase multiple products from your WooCommerce store. For instance, users booking appointments at spas or wellness centers might want to book a massage and a mani/pedi on the same day.
It makes it easier and convenient for customers to place orders and book slots. A date picker can also help you make scheduling easy for the bookings coming through. For example, shop managers will know it’s the same person booking two appointments on the same day, so managing everything becomes much easier.
Let’s take a look at a few examples of why you might consider adding a date picker field to the WooCommerce product page instead of the checkout page.
- A customer orders flowers for two separate occasions at once. It’s easier if the date picker is on the product page because customers can choose the type of flowers they’d like to place an order for and choose the date they’d like to have them delivered. This allows them to pick flowers for two separate occasions at once.
- Customer wants to book two different spa sessions. If you provide the date picker on the product page instead of the checkout, customers will find it easier to book multiple spa sessions at once. Customers can simply go to the product page and book a date for the service they’d like. Plus, they can book as many services as they’d like!
How to add a date picker field to WooCommerce
Here, we’ll show you how you can add a date picker to WooCommerce using the WooCommerce Product Add-Ons Ultimate plugin for WordPress.
Add a date picker field to WooCommerce
You can use the WooCommerce Product Add-Ons Ultimate plugin to add a date picker field to your product page in WooCommerce.
- Install and activate the WooCommerce Product Add-Ons Ultimate plugin
- Go to ‘Products’ → ‘All Products’ to view a list of all of your products
- Find the product you’d like to add a date picker to and click the ‘Edit’ button to edit the product
- In the ‘Product data’ meta box, click on the ‘Add Group’ button under the ‘Product Add-Ons’ tab. This will create a group for adding multiple fields
- Click on the ‘Add Field’ button and select ‘Date’ from the dropdown menu under ‘Field Type’
- Give the field a name and click the ‘Publish’ button to continue
This will add a date picker field to the WooCommerce product page.
Add a price
You can also add a price to your WooCommerce date picker field which adds to the total of the product’s price. This way, you can charge additional fees for letting customers pre-book or order flower bouquets on specific days.
Additionally, adding a price can also help you add more value to your products. For instance, if you sell flower bouquets for $25 on your WooCommerce store, you can charge an additional $5 for pre-booking it and getting it delivered by one of the available dates.
Here’s what you need to do:
- Select the date picker field you created in the previous step
- Enter the additional charges to the ‘Field Price’ field
- Once you’re done, click the ‘Publish’ button to continue
This will add an additional amount to your product when the customer uses the date picker field to select a date.
Set min date / max date
You can set the min and max date that customers can book a slot with you. This way, you can ensure you’re able to deliver products on time. For instance, you can allow pre-booking of flower bouquets two days before fresh flowers arrive in order to deliver the best quality possible.
- Tick the checkbox next to ‘Min date today?’ to prevent users from selecting a day before the min date
- Enter the start date of the pre-booking under ‘Min date’ and the end date in the field under ‘Max date’
- Click the ‘Publish’ button
This will prevent customers from selecting dates other than the ones you specified.
Set it as a required field
Setting the date picker as a required field is important if you need customers to book a slot with you beforehand. For example, a product such as a flower bouquet requires customers to book ahead of time to get them delivered at a later date.
Here’s how you can do this:
- Tick the checkbox next to ‘Required Field?’. This will not let the customer place their order if the date picker field is not set
- Once you’re done, click the ‘Publish’ button to continue
You can also enable some extra options in your date picker field:
- Offset days: enter a value in this value to set a minimum number of days from the current date. For example, if you want to prevent the user picking today or tomorrow’s date, enter 2 in this field to make the minimum date 2 days from the current date
- Disable days of the week: select which days of the week should be automatically disabled in the calendar. So if you don’t want the user to select a day on the weekend, you can check the Saturday and Sunday fields
- Blocked dates: if you want to define specific dates that cannot be chosen, enter a comma-separated list of dates using the YYYY-MM-DD format. So if you don’t want the user to be able to select Christmas Day, you can enter 2021-12-25
Add multiple date pickers
Following our flower bouquet example, customers might want to order a fresh flower bouquet on separate occasions. For example, one flower bouquet on Monday which may be for the wedding rehearsal and the same flower bouquet on Wednesday for the actual wedding.
Here’s how you can do this:
- Create a new field by clicking on the ‘Add Field’ button and select ‘Date’ from the dropdown menu next to ‘Field Type’
- Enter the name for the field under the ‘Field Label’ meta box
- Enter the start date and the end date of the booking period in the fields next to ‘Min date’ and ‘Max date’
- Click on the ‘Publish’ button once you’re done creating additional fields
When you’re done, you’ll have two date pickers on the product page.
Display date pickers conditionally
You can display date pickers for products conditionally on your WooCommerce store. For instance, if you charge extra for same-day delivery, you can create a checkbox that customers can tick if they want to avail same-day delivery.
Here’s how you can do this:
- Create a date picker field for customers to select a date by clicking the ‘Add Field’ button and entering a name under ‘Field Label’
- Set the ‘Field Price’, ‘Min date’, and ‘Max date’ and click the ‘Publish’ button to continue
- Create another field, set the ‘Field Type’ to ‘Checkbox’, and enter a name for the field
- Go back to the date picker field we just created and click the ‘Add Condition’ button
- Select ‘Show this field if’ and ‘All rules match’ under ‘Conditions’
- Now select the checkbox field we created from the drop-down menu and ‘Is’ from the drop-down menu next to it
- Once you’re done, click the ‘Publish’ button
You can add multiple conditions to your date picker fields if you’d like.
Display date fields in a product table
So far, all the examples shown above have just used the Product Add-Ons Ultimate plugin to add a date field to the product page itself.
But what about if you’d like to list multiple products on a single page and let the user select a date against each product? Users might need to choose different delivery dates for each product, for example.
You can do this using Add-Ons Ultimate plus the Product Table Ultimate plugin.
Product Table Ultimate allows you to display your products in a table format, making it easier for your customers to add multiple products to the cart in one click.
How to display a date field as a column in a product table
Product Table Ultimate allows you to specify different column types for your table, e.g. product name, price, image, stock, description, etc.
If you have date fields you’d like to display in a column, you just need to add them as a column type. You’ll get something similar to the screenshot below.
It’s possible to add date fields that are specific to each product – or you can add a date field globally that will be applied to multiple products in your table. For more information, you can see this support document.
By adding a date picker field to your product pages, you can make it easier for customers to book a slot or select a delivery date. It helps enhance the user experience and allows customers to purchase more than one product at a time.
Ready to start adding a date picker to your WooCommerce products? Get WooCommerce Product Add-Ons Ultimate today!