WooCommerce Product Time Picker

WooCommerce product page showing a custom time picker field


There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About this Solution

This snippet adds a product time picker to the single product template above the add to cart button and save the time picked against the product as meta data. Once a time is picked against the product, you’ll notice it is shown under the product name in the mini-cart, cart, checkout, thank you page, emails, my account area, and order view in the admin dashboard. This is a rather niche requirement and a lot of use cases would require a time picker on the checkout rather than the product page. This particular snippet is useful if you need to set a time against a product. Arrival time, tattoo, and engraving are some example of where a time may need to be picked against a product.

 * Snippet Name:     WooCommerce Product Time Picker
 * Snippet Author:   ecommercehints.com

// Add the new field
add_action( 'woocommerce_before_add_to_cart_button', 'ecommercehints_custom_product_time_picker_field' );
function ecommercehints_custom_product_time_picker_field() {
	global $product;
	echo '<div class="ecommercehints_custom_product_time_field">
	<label for="arrival-time">Team arrival time</label>
	<input type="time" id="arrival-time" name="arrival-time">

// Save the field to the cart data
add_filter( 'woocommerce_add_cart_item_data', 'ecommercehints_save_custom_time_to_cart_data', 10, 3 );
function ecommercehints_save_custom_time_to_cart_data( $cart_item_data, $product_id, $variation_id ) {
	if ( !empty( $_POST['arrival-time'] ) ) {
		$cart_item_data['arrival-time'] =  $_POST['arrival-time'];
	return $cart_item_data;

// Show custom field data on cart, checkout, and thank you page.
add_filter( 'woocommerce_get_item_data', 'ecommercehints_show_custom_time_data_under_product_name', 10, 2 );
function ecommercehints_show_custom_time_data_under_product_name( $item_data, $cart_item ) {
	if ( !empty( $cart_item['arrival-time'] ) ) {
		$item_data[] = array(
			'key'     => 'Team arrival time',
			'value'   => $cart_item['arrival-time'],
	return $item_data;

// Save the custom field data as order meta
add_action( 'woocommerce_checkout_create_order_line_item', 'ecommercehints_add_custom_time_data_as_product_meta', 10, 4 );
function ecommercehints_add_custom_time_data_as_product_meta( $item, $cart_item_key, $values, $order ) {
	if ( !empty( $values['arrival-time'] ) ) {
		$item->add_meta_data( 'Team arrival time', $values['arrival-time'] );

Snippet Benefits

  • Save a time against products in your store and save as product meta data.
WooCommerce Conversion Rate Optimisation (CRO) eBook
100 WooCommerce Conversion Rate Optimisation Tips

Leave a Reply

If you are going to write code in the comments, please wrap it between code tags.

Your email address will not be published. Required fields are marked *

Other Recent Guides

Subscribe To Emails

Get exclusive WooCommerce tips that I only share with email subscribers

Join hundreds of other subscribers