Custom checkout field validation on Woocommerce

Question

My code:

add_action( 'woocommerce_before_checkout_form', 'fruit_field' );

function fruit_field( $checkout ) {

  woocommerce_form_field( 'fruit', array(
      'type'          => 'select',
      'required'      => true,
      'options'       => array(
        'apple'       => __('Apple'),
        'banana'      => __('Banana'),
        'watermelon'  => __('Watermelon'),
        'other'       => __('Other'),
      ),
      'class'         => array('my-class'),
      'label'         => __('Best fruit?'),
      ), $checkout->get_value( 'fruit' ));
}

And the validation:

add_action('woocommerce_checkout_process', 'process_checkout');

function process_checkout() {
  if ($_POST['fruit'] === null) {
    wc_add_notice( __( 'No fruits?' ), 'error' );
  }
}

After submitting the form, it always displays my custom error "No fruits?", no matter what was selected. Is $_POST['fruit'] somehow not available in the process_checkout function?

@Robert It always displays my custom error "No fruits?". I have updated the question. Thanks — user10686399

LoicTheAztec LoicTheAztec · Accepted Answer · 2018-11-21T21:37:04

You can not use custom checkout fields in woocommerce_before_checkout_form hook as your field is outside the checkout form, and it is not posted on submit.

Instead you should use woocommerce_checkout_before_customer_details action hook instead:

add_action( 'woocommerce_checkout_before_customer_details', 'fruit_custom_checkout_field' );
function fruit_custom_checkout_field() {

    woocommerce_form_field( '_fruit', array(
        'type'     => 'select',
        'label'    => __('Best fruit?'),
        'class'    => array('my-fruit'),
        'required' => true,
        'options'  => array(
            ''          => __('Chose a fruit'),
            'Apple'      => __('Apple'),
            'Banana'     => __('Banana'),
            'Watermelon' => __('Watermelon'),
            'Other'      => __('Other'),
        ),
    ), WC()->checkout->get_value('_fruit') );
}

add_action('woocommerce_checkout_process', 'process_fruit_custom_checkout_field');
function process_fruit_custom_checkout_field() {
    if (isset($_POST['_fruit']) && empty($_POST['_fruit']) ) {
        wc_add_notice( __( 'please choose a "fruits"' ), 'error' );
    }
}

// Save the custom checkout field in the order meta
add_action( 'woocommerce_checkout_create_order', 'save_fruit_custom_field_as_meta_data', 10, 2 );
function save_fruit_custom_field_as_meta_data( $order, $data ) {
    if (isset($_POST['_fruit']) && ! empty($_POST['_fruit']) ) {
        $order->update_meta_data('_custom_field', esc_attr( $_POST['_fruit'] ) );
    }
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

Custom checkout field validation on Woocommerce

1 Answers