How to add a WooCommerce checkout Dropdown Question

What is the tutorial about?

Discover how to add a dropdown question to the WooCommerce checkout process using a free Code Snippet. This is a fantastic way to gather valuable customer insights, such as how they discovered your store or products. The tutorial by Web Squadron is straightforward and doesn’t require any advanced coding skills, making it perfect for WordPress users of all levels.

Tutorial Steps

1. Install the Code Snippets plugin:
   Navigate to your WordPress dashboard, click on ‘Plugins’, then ‘Add New’. In the search bar, type in ‘Code Snippets’. Install and activate the plugin.
2. Add a new snippet:
   Once the plugin is activated, go back to your WordPress dashboard and click on ‘Snippets’, then ‘Add New’. Give your new snippet a title.
3. Copy the code:

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

   Source: Code Snippets

4. Paste and modify the code:
   Paste the copied code into the new snippet you created. Make any necessary changes, such as adding new options to the dropdown menu. Remember to follow the syntax provided.
5. Save and activate:
   Click ‘Save Changes’ and then ‘Activate’.
6. Check your checkout page:
   Navigate to your checkout page. You should now see a new dropdown menu where customers can select an option that best describes how they found your store or products.

Use Cases for this Tutorial

• E-commerce stores:
  Understand how customers are finding your products to optimize marketing strategies.
• Subscription services:
  Gain insights into which marketing channels are most effective for attracting new subscribers.
• Digital product sellers:
  Learn more about your customers’ journey to improve the user experience and increase conversions.