WooCommerce Product Time Picker

Pre-Requisites

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.

Need support with the snippet? We’re Here to Help You, Contact Us!

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">
   </div><br>';
}

// 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'] );
	}
}