Add How Did You Hear About Us? Field To WooCommerce Checkout

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

Keep in mind, the longer the checkout process, the more friction there is for the user to pay and become a customer.

We’d recommend asking the user how they heard about your store on the thank you page instead to prevent harming the conversion rate.

However, due to popular demand, this snippet implements a custom select checkout field which asks the user prior to purchasing and saves the answer as order meta data.

Specifically, a new custom checkout field is generated with a “select” data type using the woocommerce_form_field() function.

Select options (drop down list items) are then populated with a key and a value as part of an array.

Notice how we’ve made the “required” parameter true. All this does is show an asterisk. We add custom validation after which actually prevents the user form checking out if the field is not populated. If the field is not populated, a custom error message is shown.

Finally, the selection is stored as order meta data so you can refer back to the answer when looking at the orders.

/**
 * Snippet Name:	WooCommerce Checkout How Did You Hear About Us
 * Snippet Author:	ecommercehints.com
 */

// Create the custom select field in the billing section of the checkout form
add_action( 'woocommerce_after_checkout_billing_form', 'ecommercehints_checkout_select_field' );
function ecommercehints_checkout_select_field($checkout) {
woocommerce_form_field(
		'how_did_you_hear',
		array(
			'type'		=> 'select',
			'required'	=> true, // Shows an asterisk if true (*)
			'label'		=> 'How Did You Hear About Us?',
			'options'	=> array(
				''			=> 'Please select...',
				'word-of-mouth'		=> 'Word of mouth',
				'google-search'		=> 'Google Search',
				'social-media'		=> 'Social Media',
				'ecommercehints'	=> 'eCommerceHints.com'
			)
		),
		( isset($_POST['how_did_you_hear']) ? $_POST['how_did_you_hear'] : '' )
	);
}

// Show an error message of field is not populated
add_action('woocommerce_checkout_process', 'ecommercehints_custom_checkout_select_field_validation');
function ecommercehints_custom_checkout_select_field_validation() {
		if (empty( $_POST['how_did_you_hear'] ) ) {
			wc_add_notice( 'We would really like to know how you heard about us.', 'error' );
		}
}

// Save the custom field data as order meta
add_action( 'woocommerce_checkout_update_order_meta', 'ecommercehints_save_custom_checkout_select_field' );
function ecommercehints_save_custom_checkout_select_field( $order_id ){
	if( !empty( $_POST['how_did_you_hear'] ) ) {
		update_post_meta( $order_id, 'how_did_you_hear', sanitize_text_field( $_POST['how_did_you_hear'] ) );
	}
}