• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Essential Premium WooCommerce Plugins - WP Desk

  • Premium Plugins
  • Support
  • Blog
  • My Account
  • 0
Bartosz Gajewski

How to add time picker in WooCommerce checkout?

Updated: February 12, 2020 / Checkout, Guides

Adding time picker in the checkout page of your store can give you a lot of options. Maybe you want to add some kind of booking or just preferred pickup time. In this article, I’ll show you how to do it with one plugin.


This plugin will be Flexible Checkout Fields. When it comes to WooCommerce checkout fields, it is one of the best on the market. Flexible Checkout Fields let you add custom fields to the checkout, edit or disable the present ones and even rearrange them. Over 154,031 stores use this plugin on a daily basis and it’s well-rated with 4.5 out of 5 stars.

Flexible Checkout Fields PRO WooCommerce £59

Edit, add new or hide unnecessary fields from the checkout form. It's all about conversions and better user experience.

Add to cart or View Details
WP Desk
40,000+ Active Installations
Last Updated: 2021-01-14
Works with WooCommerce 4.2.0 - 4.6.x

With Flexible Checkout Fields PRO you can add time picker in WooCommerce checkout page, but it also allows you to add other custom fields:

  • Single Line Text
  • Paragraph Text
  • Checkbox
  • Radio button
  • Select (Drop Down)
  • Multi-select
  • Date
  • Time
  • Color Picker
  • Headline
  • HTML or plain text
  • File Upload

But enough about the plugin. Let’s go to the configuration.

How to add time picker in WooCommerce checkout?

Go to WooCommerce → Checkout Fields and go to the Billing section.

Billing section is the one I’ll use in my example, but Flexible Checkout Fields lets you add custom fields to different sections of the checkout. You can edit the Order, Billing and Shipping section.

In Add New Field section choose Time as a Field Type, enter your label and click Add Field like in the screenshot below.

Add new custom field in the billing section

As a result, your time picker should appear on the right in Section Fields. You can drag it and decide where you want it to be displayed on the checkout page. In my example, I put it just below the Company name field.

New timepicker in section fields

Now, click on your time picker to configure it. There are four sections of settings and I’ll go through all of them. First of all, the General section.

General settings of new custom checkout field

Here, you can Enable Field to set it visible, and set it as a Required Field. You can change previously entered Label and choose Validation. Read more about validation in our WooCommerce Checkout Custom Validation Guide.

Another option is Appearance. Here you can set Placeholder which will be displayed in the empty field and set your own CSS Class to style it as you want.

Appearance settings in the new custom checkout field

In the Display On section, you can decide where to display the WooCommerce Checkout Time picker. In default, it will be displayed in the checkout, user account page and in the emails. If you don’t want to let your clients change picked time after the order, disable My Account - address and My Account - order.

Display on settings of new custom checkout field

Finally, the last option is Advanced. Here you can enable conditional logic. You can read more about it in our Conditional Logic Guide.

Field's advanced settings
Field's advanced settings

Time picker example

When everything is configured, let’s check how it looks in my WooCommerce store.

Timepicker in WooCommerce checkout page example

It’s just the default display. But you can customize it with CSS.

My chosen time will also appear in the order summary and all the places that were checked in Display on settings.

Timepicker in billing address

Summary

In this article, I showed you how to add Time picker in WooCommerce checkout with Flexible Checkout plugin. I hope it’ll be useful and good luck!

Maybe you want to add date picker to your WooCommerce checkout? Check out our article with easy way to add date picker field to your WooCommerce store.
Tweet

2 minutes read892 views

Bartosz Gajewski

Content Specialist in WP Desk. He tries to increase the number of plugin users with useful content. Privately an enthusiast of mountains and European cinema.

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 →
WP Desk › Guides › How to add time picker in WooCommerce checkout?

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
  • FAQ
  • Docs
  • Get Support

Legal

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

© 2021 WP Desk