How to add time picker in WooCommerce checkout?

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 223,647 stores use this plugin on a daily basis and it’s well-rated with 4.6 out of 5 stars.

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
• Textarea
• Paragraph Text
• Number
• E-mail
• Phone
• URL
• Image
• Multi-checkbox
• Checkbox
• Radio button
• Select (Drop Down)
• Multi-select
• Date
• Radio with colors
• Radio with images
• 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.

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.

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.

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.

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.

The next tab is Advanced. Here you can choose the minute step and set the minimum and maximum hour.

Finally, the last two tabs are Pricing and Conditional Logic, where you can enable it. You can read more about it in our Conditional Logic Guide.

Time picker example

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

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.

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!