Checkout

WooCommerce Checkout How Did You Hear About Us?

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

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

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.

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 20% off on your first month with us.

26027
WELCOME OFFER