WooCommerce Checkout How Did You Hear About Us?

WooCommerce checkout asking the user how they heard about the store via a custom dropdown select 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

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

Custom Validation Error

WooCommerce checkout custom error message if select field is not populated

Select Field Saved As Order Meta

WooCommerce Order View SHowing Saved Meta from checkout select field

Snippet Benefits

  • As the user how they found out about your WooCommerce store.
  • Understand how users are becoming customers by gathering important 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