Show Delivery Time Picker on your WooCommerce Product Page

In this article, I will explain to you a simple way how to show the Delivery Time Picker on your WooCommerce Product Page using a free plugin. Read this article carefully and find out how to do it just in a few steps.

Building a WooCommerce product with a delivery time picker can be a game changer! Especially if you want to let customers choose the exact delivery time for specific WooCommerce products!

Today, I will show you the way to customize the WooCommerce product page to make that possible!

Table of contents

1. Show product delivery time in WooCommerce
2. Download the Flexible Product Fields plugin
3. Add Time Picker to your product page
4. Customize your Time Picker field
5. Save and Update

Show product delivery time in WooCommerce

The Time Picker Field might have numerous uses on your WooCommerce Product Page. Most importantly, you can use it to establish the exact pick-up or delivery time of a product or service, like for example food delivery 🍔.

For instance, let's imagine you owe a catering company and you want your customers to have the option to choose the exact delivery time of their meals.

Not your case?

Maybe you own a Wellness Center 💅 and you want to provide your customers the option to make an appointment by choosing the exact time of the day.

Or you are a florist and you want to make it easier for your clients by providing this option for them.

In conclusion, all this can help customers visually see the dates available for booking. Useful, right? 😋 With this field type it is possible and incredibly easy to implement.

Step 1: Download a free plugin

First, download, install, and activate the Flexible Product Fields

👉🏾 You can also watch this video

Find out what you can get in the free version of the plugin: 

Next, go to the plugin settings

👉🏾 The Flexible Product Fields plugin will be visible in the Products tab:

Let's start customizing your WooCommerce product page!

Step 2: Add Time Picker to your product page

✅ Here you will see all field types available in the Flexible Product Fields plugin. To add the time picker, click the Time field, which is located within the picker fields:

Step 3: Customize your Time Picker field

👉🏾 This is an example of how you can modify the delivery time picker field on your WooCommerce product page:

Delivery time picker settings

✅ This is where you should give all the basic information concerning this field.

Advanced field options

Now let’s check the Advanced tab. For example, in my configuration, I have used the 12-hour clock:

Delivery time format

Here you can choose whether you need your Time Picker field to be in the 24- or 12-hour format.

Additionally, choose any minute interval (from 1 to 60) in which you want to display your field. As a result, you can easily adapt the time format to the one people use in the country, where you sell your items or services.

Extra pricing (PRO)

✅ Moreover, you can go to the Pricing Tab if you want to establish a price for your time field:

Consequently, you can choose from the Fixed or Percent price type.

Conditional logic (PRO)

👉🏾 Last, but not least! In addition, you can also configure the Conditional Logic for this field type, which will be set in accordance with another field type used by you while modifying your WooCommerce product page:

Step 4: Save and Update

Most importantly, once you have added and personalized this field for your product page, don’t forget to click the Update button on the right top side of the page:

🎉 In conclusion, this will be your final result of how your Time Picker looks on your WooCommerce Product Page:

Summary and more about the plugin

Today, you've learned how to add the time picker on the WooCommerce product page to let customers choose the delivery time. Get the free plugin & read more about its options below and in the plugin documentation.

Did you find it useful? Please feel free to comment on this article if you have any doubts. We will be more than happy to guide you further 🙂.