• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Essential Premium WooCommerce Plugins - WP Desk
  • Plugins
  • Bundle
  • Support
  • Blog
  • My Account
  • 0

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

Dorota Ingielewicz

Show Delivery Time Picker on your WooCommerce Product Page

Updated: February 20, 2023 / Plugin Tutorials, Plugin Updates

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.

WooCommerce show delivery time on the product page
Delivery Time Picker on a WooCommerce product page

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

Flexible Product Fields for WooCommerce

WooCommerce product delivery time with a plugin. Install, activate the plugin, and add WooCommerce delivery time per product.

Download for free or Go to WordPress.org
WP Desk
10,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x
💡 The delivery time picker field is available in the free version of the plugin. However, some extra features, like pricing or conditional logic, are available in the PRO version of the plugin.

👉🏾 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:

Show delivery time WooCommerce (free plugin)
Flexible Product Fields for WooCommerce

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:

WooCommerce product delivery time time picker field
All Fields available in the Flexible Product Fields PRO version

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:

WooCommerce product delivery time: general settings
Time picker field - basic settings

Delivery time picker settings

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

💡 If you have any doubts about what each of these fields represents and what are they used for, please check our Documentation where you can find all the information about these issues.

Advanced field options

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

WooCommerce show delivery time settings
Time picker advanced settings

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:

💡 Read the Documentation to find out more about how Pricing works.
Pricing Tab: delivery time WooCommerce
Add extra pricing to WooCommerce product delivery time

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:

WooCommerce delivery time per product with the Flexible Product Fields PRO
You can also add conditional logic (PRO) to your time picker field
💡 Read the Documentation to find out more about how Conditional Logic works.

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:

Show delivery time WooCommerce
Don't forget to publish your changes!

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

Show delivery time WooCommerce on the product page
Time Field: Final Result on the 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.

Flexible Product Fields for WooCommerce

WooCommerce product delivery time with a plugin. Install, activate the plugin, and add WooCommerce delivery time per product.

Download for free or Go to WordPress.org
WP Desk
10,000+ Active Installations
Last Updated: 2023-03-13
Works with WooCommerce 7.1 - 7.5.x

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 🙂.

Related to WooCommerce product delivery time

  • How to add extra cost to a WooCommerce product?

    WooCommerce add extra cost to the product
    Add extra cost to the product. Find out how to add additional cost to product options.

  • Customized product page with a plugin

    custom checkout forms and WooCommerce product page form
    Create custom fields. Find out how to combine the use of Flexible Checkout Fields and Flexible Product Fields.

Tweet

3 minutes read1978 views

Dorota Ingielewicz

Marketing Ranger at WP Desk. Interested in content writing, online marketing and advertisments of all kinds.

Powered by WP Desk

WP Desk brings you great WooCommerce plugins. We strive to save your time and money by speeding up your processes. Use our plugins to build a better store. Awesome support included in the package.

Premium WooCommerce Plugins →

Stay updated on our how-to articles

WP Desk news, WooCommerce tips, promo codes - right to your inbox.

By entering your e-mail, you agree to our Terms & Conditions and Privacy Policy.

WP Desk › Plugin Updates › Show Delivery Time Picker on your WooCommerce Product Page

Footer

WP Desk - WooCommerce Plugins

At WP Desk we create great WooCommerce plugins with awesome support. Save time and money with our e-commerce solutions. See how we can help you improve your e-store →

Secured by Comodo

WP Desk

  • About us
  • Giving Back
  • Blog
  • Contact us

Products

  • Premium Plugins
  • Get Support
  • WooCommerce Invoices
  • Email Marketing
  • Octolize

Legal

  • Terms & Conditions
  • Refund Policy
  • Support Policy
  • Privacy Policy

© 2023 WP Desk