---
title: Configuring Timepicker Fields in Custom Checkout Fields
description: Add a timepicker field to WooCommerce checkout so customers can choose a delivery or pickup time.
url: "https://wpfactory.com/docs/timepicker-checkout-fields/"
updated: "2026-09-27"
category: How to
tags:
  - Custom Checkout Fields Editor for WooCommerce
---

# Configuring Timepicker Fields in Custom Checkout Fields

The Timepicker field type in [Custom Checkout Fields for WooCommerce](https://wpfactory.com/item/custom-checkout-fields-for-woocommerce/) lets customers choose a time at checkout, for example a preferred delivery or pickup time. This guide covers the Timepicker options and how they interact with the shared Input options.

![Timepicker field options](https://wpfactory.com/wp-content/uploads/Custom-Checkout-Field-1.jpg)

### Before you start

1. Go to **WPFactory > Custom Checkout Fields** (also reachable at **WooCommerce > Settings > Custom Checkout Fields**).
2. Open a field tab and set **Type** to **Timepicker**. The Timepicker Type Options group then applies.

### Timepicker Type Options

| Label | Option ID | Default |
| --- | --- | --- |
| Time format | `alg_wc_ccf_type_timepicker_format_1` | `hh:mm p` |
| Interval (minutes) | `alg_wc_ccf_type_timepicker_interval_1` | 15 |
| Min time | `alg_wc_ccf_type_timepicker_mintime_1` | Empty |
| Max time | `alg_wc_ccf_type_timepicker_maxtime_1` | Empty |

### Notes

- **Time format** uses the timepicker library's tokens: `hh:mm p` gives a 12-hour clock with AM/PM, while `HH:mm` gives 24-hour. This is different from the time format used by the datepicker's Timepicker addon.
- **Interval** sets the step between selectable times. With 15, customers can pick 9:00, 9:15, 9:30, and so on.
- **Min time** and **Max time** use `HH:MM`, for example `09:00` and `17:00`, to limit the selectable window.

### Input options and this field

The shared **Input Options** group (Max length, Min value, Max value, Step) is aimed at Number and Range fields and does not apply to a timepicker. Two Input options are still useful here:

- **Autofocus** (`alg_wc_ccf_autofocus_1`, default No): focus the field automatically when the page loads.
- **Autocomplete** (`alg_wc_ccf_autocomplete_1`): a text field whose value becomes the input's HTML `autocomplete` attribute. Enter `off` to switch browser autocomplete off; leave it blank otherwise. It is not an on/off checkbox.

### Get more fields

You can add one timepicker in the free version. [Custom Checkout Fields for WooCommerce](https://wpfactory.com/item/custom-checkout-fields-for-woocommerce/) Pro lets you add up to 100 fields, so you can pair a date and a time field on the same checkout. [Get Custom Checkout Fields Pro](https://wpfactory.com/item/custom-checkout-fields-for-woocommerce/).

Related articles

- [Configuring a Custom Checkout Field’s General Options](https://wpfactory.com/docs/individual-checkout-fields/)
- [Adding a Checkout Fee Based on a Custom Field](https://wpfactory.com/docs/custom-field-charges/)
- [Where to Position Your Custom Fields in WooCommerce Checkout](https://wpfactory.com/docs/custom-fields-placement/)
- [Exploring the Advanced Settings in Custom Checkout Fields](https://wpfactory.com/docs/custom-fields-settings/)
- [How to Add a Custom Field to WooCommerce Checkout](https://wpfactory.com/docs/adding-checkout-fields/)

 

[![Custom Checkout Fields Editor for WooCommerce](https://wpfactory.com/wp-content/uploads/Custom-Checkout-Fields-for-WooCommerce.webp)](https://wpfactory.com/item/custom-checkout-fields-for-woocommerce/)