WooCommerce – Add a special field to the checkout, order emails and user/order meta

/**
 * Add the field to the checkout
 **/
add_action('woocommerce_after_order_notes', 'my_custom_checkout_field');

function my_custom_checkout_field( $checkout ) {

	echo '<div id="my_custom_checkout_field"><h3>'.__('My Field').'</h3>';

	/**
	 * Output the field. This is for 1.4.
	 *
	 * To make it compatible with 1.3 use $checkout->checkout_form_field instead:

	 $checkout->checkout_form_field( 'my_field_name', array( 
	 	'type' 			=> 'text', 
	 	'class' 		=> array('my-field-class orm-row-wide'), 
	 	'label' 		=> __('Fill in this field'), 
	 	'placeholder' 	=> __('Enter a number'),
	 	));
	 **/
	woocommerce_form_field( 'my_field_name', array( 
		'type' 			=> 'text', 
		'class' 		=> array('my-field-class orm-row-wide'), 
		'label' 		=> __('Fill in this field'), 
		'placeholder' 	=> __('Enter a number'),
		), $checkout->get_value( 'my_field_name' ));

	echo '</div>';

	/**
	 * Optional Javascript to limit the field to a country. This one shows for italy only.
	 **/
	?>
	<script type="text/javascript">
		jQuery('select#billing_country').live('change', function(){

			var country = jQuery('select#billing_country').val();

			var check_countries = new Array(<?php echo '"IT"'; ?>);

			if (country && jQuery.inArray( country, check_countries ) >= 0) {
				jQuery('#my_custom_checkout_field').fadeIn();
			} else {
				jQuery('#my_custom_checkout_field').fadeOut();
				jQuery('#my_custom_checkout_field input').val('');
			}

		});
	</script>
	<?php
}

/**
 * Process the checkout
 **/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
	global $woocommerce;

	// Check if set, if its not set add an error. This one is only requite for companies
	if ($_POST['billing_company'])
		if (!$_POST['my_field_name']) 
			$woocommerce->add_error( __('Please enter your XXX.') );
}

/**
 * Update the user meta with field value
 **/
add_action('woocommerce_checkout_update_user_meta', 'my_custom_checkout_field_update_user_meta');

function my_custom_checkout_field_update_user_meta( $user_id ) {
	if ($user_id && $_POST['my_field_name']) update_user_meta( $user_id, 'my_field_name', esc_attr($_POST['my_field_name']) );
}

/**
 * Update the order meta with field value
 **/
add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');

function my_custom_checkout_field_update_order_meta( $order_id ) {
	if ($_POST['my_field_name']) update_post_meta( $order_id, 'My Field', esc_attr($_POST['my_field_name']));
}

/**
 * Add the field to order emails
 **/
add_filter('woocommerce_email_order_meta_keys', 'my_custom_checkout_field_order_meta_keys');

function my_custom_checkout_field_order_meta_keys( $keys ) {
	$keys[] = 'My Field';
	return $keys;
}
Advertisements

6 thoughts on “WooCommerce – Add a special field to the checkout, order emails and user/order meta

  1. How would I add a custom field (textarea) to the product page? I mean lets say my product is a key chain and I want the customer to write his message/name so that I know how to decorate it.
    The comment entered in the product page would then have to be added to the order page/checkout page as well.

    Please advise

      1. Yeah I’ve heard of it, but i’m not interested in paying that much money for it. I would’ve thought there was an easier/cheaper solution.

  2. Can i add this field on processing order email.?
    /**
    * Add the field to order emails
    **/
    add_filter(‘woocommerce_email_order_meta_keys’, ‘my_custom_checkout_field_order_meta_keys’);

    function my_custom_checkout_field_order_meta_keys( $keys ) {
    $keys[] = ‘My Field’;
    return $keys;
    }
    This is not working any buddy,
    thanks in advance

  3. Hi , your script is very interesting and it works perfectly … I have found only one problem … the field is visible for all countries … not only for Italy as required by the Javascript … any suggestions? thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s