Product Page

WooCommerce Product Time Picker

WooCommerce product page showing a custom time picker field

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.

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

Snippet Benefits

  • Save a time against products in your store and save as product meta data.

100 WooCommerce Conversion Rate Optimisation Tips

This field is for validation purposes and should be left unchanged.

Let’s collaborate!

Need to outsource WordPress development?

Join forces with UnlimitedWP for an outsourced white label web development service you can truly rely on.

First Timer Here?

Sign up to receive 10% off on your first month with us.

26027
WELCOME OFFER