Creating a WooCommerce Checkout Field (with code)

WooCommerce Custom Checkout Fields (code recipe)

ByJennifer Moss

There are several plugins that let you add custom checkout fields to Woocommerce, but I didn’t want the weight of adding a whole plugin. So if you want to write your own custom code (like I do) here’s how you add a custom checkout field in WooCommerce.

I placed this code in my Child Theme’s FUNCTIONS.PHP file.

Here’s an example I created with a radio button select, that is required.

Are you allergic to peanuts? *
Yes
No

I wanted this to appear ABOVE the Billing address, so I chose the hook “woocommerce_before_checkout_billing_form.” View WooCommerce checkout form hooks here.

1. Add the Radio button field to the checkout form:

function new_peanut_field( $checkout ) {
    woocommerce_form_field( 'peanut_allergy', array(
	'type' => 'radio',
   	'class' => array( 'form-row-wide', 'update_totals_on_change' ),
   	'options' => array('1' => 'Yes','2' => 'No',),
   	'label'  => __("Are you allergic to peanuts?"),
	'required'=>true,
    ), $checkout->get_value('peanut_allergy'));
}
add_action( 'woocommerce_before_checkout_billing_form', 'new_peanut_field' );

 

Here are the field properties that you will want to define:

  • type – type of field (text, textarea, password, select)
  • label – label for the field
  • placeholder – placeholder for the input
  • class – class for the input
  • required – true or false, whether or not the field is required
  • clear – true or false, applies a clear fix to the field/label
  • label_class – class for the label element
  • options – for select boxes, array of options (key => value pairs)

More information on custom WooCommerce checkout fields.

2. Add the validation because it’s a required field. You might also want to validate field format or data type (number, integer, text, etc):

function custom_field_validate() {
   if (!$_POST['peanut_allergy']) { 
	wc_add_notice(__('Please indicate whether you are allergic to peanuts.') , 'error'); 
   }
}
add_action('woocommerce_after_checkout_validation', 'custom_field_validate');

 

3. Save the custom field when order is processed:

function save_peanut( $order_id ) {
    if ( !empty( $_POST['peanut_allergy'] ) ) {
        update_post_meta( $order_id, 'Peanut Allergy', $_POST['peanut_allergy']);
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'save_peanut' );

 

4. Show custom field in the Order Edit/View Admin Screen:

function display_peanut_allergy($order){
   echo'<p>'.__('Peanut Allergy').': ';
   $allergic = get_post_meta( $order->ID, 'Peanut Allergy', true );
   if ($allergic==1) { echo "YES";} else {echo "NO";}
   echo '</p>';
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_peanut_allergy', 10, 1 );

 

It took me a while to piece all of this together from code snippets around the web, so I hope it helps you. Happy coding!

_____________

Are you a WordPress developer that needs a little help? Contact me – I love troubleshooting.

Post Views: 5,247

Similar Posts