Add custom fields to the checkout

Add new text checkout field

Here is an example of how to add an additional text field ‘new_field’ into the checkout form:

add_filter('babe_checkout_args', 'customtheme_babe_checkout_args', 10, 2);
/**
 * Add checkout text field
 */
function customtheme_babe_checkout_args( $args_meta, $args ) {
    $args_meta['new_field'] = $args['meta']['new_field'] ?? '';
    return $args_meta;
}
////////
add_filter('babe_checkout_field_label', 'customtheme_babe_checkout_field_label', 10, 2);
/**
 * Add checkout field title
 */
function customtheme_babe_checkout_field_label( $field_title, $field_name ) {
    if ($field_name === 'new_field'){
       $field_title = __('Field Title', 'textdomain');
    }
    return $field_title;
}
////////
add_filter('babe_checkout_field_required', 'customtheme_babe_checkout_field_required', 10, 2);
/**
 * Required tag for checkout field. Use it only if you need to make field required
*/
function customtheme_babe_checkout_field_required($required_tag, $field_name){
   if ($field_name === 'new_field'){
      $required_tag = 'required="required"';
   }
   return $required_tag;
}
///////////////////
add_filter('babe_sanitize_checkout_vars', 'customtheme_sanitize_checkout_vars', 10, 2);
/**
 * Add fields to sanitize checkout vars method
 */
function customtheme_sanitize_checkout_vars( $output, $arr ) {

    $output['new_field'] = isset($arr['new_field']) ? sanitize_text_field($arr['new_field']) : '';
    return $output;
}

Add another field types: radio, checkbox and select

The next snippet can be used as an example for custom radio, checkbox and select fields:

function customtheme_get_hotels(){
    return [
        'hotel1' => __('Hotel name 1', 'textdomain'),
        'hotel2' => __('Hotel name 2', 'textdomain'),
        'hotel3' => __('Hotel name 3', 'textdomain'),
        'hotel4' => __('Hotel name 4', 'textdomain'),
        'hotel5' => __('Hotel name 5', 'textdomain'),
    ];
}

function customtheme_get_radios(){
    return [
        'radio1' => __('Radio value 1', 'textdomain'),
        'radio2' => __('Radio value 2', 'textdomain'),
    ];
}

add_filter('babe_checkout_field_label', 'customtheme_babe_checkout_field_label', 10, 2);
function customtheme_babe_checkout_field_label( $field_title, $field_name ) {

    if ( $field_name === 'checkbox' ){
        $field_title = __( 'Checkbox title', 'textdomain' );
    }
    if ( $field_name === 'radio' ){
        $field_title = __( 'Radio title', 'textdomain' );
    }
    if ( $field_name === 'hotel' ){
        $field_title = __( 'Hotel', 'textdomain' );
    }

    return $field_title;
}

add_filter('babe_checkout_after_contact_fields', 'customtheme_add_fields', 10, 2);
function customtheme_add_fields( $output, $args ){

    $hotels = customtheme_get_hotels();
    $radios = customtheme_get_radios();

    $hotels_options = '<option value>'.__( 'Select...', 'textdomain' ).'</option>';
    $hotel = !empty($args['meta']['hotel']) ? $args['meta']['hotel'] : '';

    foreach( $hotels as $hotel_code => $hotel_name){
        $hotels_options .= '<option value="'.esc_attr($hotel_code).'" '.selected($hotel, $hotel_code,false).'>'.esc_html($hotel_name).'</option>';
    }

    $radio_value = !empty($args['meta']['radio']) ? $args['meta']['radio'] : '';

    $checkbox_value = !empty($args['meta']['checkbox']) ? 1 : 0;

    $output .= '<h3>'. __( 'Checkbox and Hotel', 'textdomain' ) .'</h3>';

    $output .= '<div class="address_fields_group input_group">
        <div class="checkout-form-block checkout_select_block">
          <div class="checkout_select_title">
             <div class="checkout_checkbox_wrapper checkout_form_input_field_content">
              <input type="checkbox" class="checkout_form_input_field_checkbox" name="checkbox" id="checkbox" value="1" '. checked($checkbox_value, 1, false) . ' > 
              <label for="checkbox">'. BABE_html::checkout_field_label('checkbox') .'</label>
             </div>
          </div>
       </div>
       
       <div class="checkout-form-block checkout_select_block">
          <div class="checkout_select_title">
             <div class="checkout_select_wrapper checkout_form_input_field_content">
              <label class="checkout_form_input_label">' . BABE_html::checkout_field_label('hotel') . '</label>
              <select class="checkout_select_field select2" name="hotel" id="hotel">'.$hotels_options.'</select>
             </div>
          </div>
       </div>
       
       <div class="checkout-form-block checkout_select_block">
          <div class="checkout_select_title">
             <div class="checkout_radio_wrapper checkout_form_input_field_content">
              <label class="checkout_form_input_label">' . BABE_html::checkout_field_label('radio') . '</label>';

    foreach( $radios as $radio_code => $radio_name){
        $radio_value = empty($radio_value) ? $radio_code : $radio_value;
        $output .= '<div class="checkout_form_input_field_radio_wrapper">
               <input type="radio" class="checkout_form_input_field_radio" id="'.sanitize_key($radio_code).'" name="radio" value="'.esc_attr($radio_code).'" '. checked($radio_value, $radio_code, false) . ' > 
              <label for="'.sanitize_key($radio_code).'">'. esc_html($radio_name) .'</label>
           </div>';
    }

    $output .= '
             </div>
          </div>
       </div>
       
     </div>';

    return $output;
}

add_filter('babe_sanitize_checkout_vars', 'customtheme_sanitize_checkout_vars', 10, 2);
function customtheme_sanitize_checkout_vars( $output, $arr ) {

    $hotels = customtheme_get_hotels();
    $radios = customtheme_get_radios();

    $output['checkbox'] = !empty($arr['checkbox']) ? 1 : 0;
    $output['radio'] = isset($arr['radio'], $radios[$arr['radio']]) ? $arr['radio'] : '';
    $output['hotel'] = isset($arr['hotel'], $hotels[$arr['hotel']]) ? $arr['hotel'] : '';
    return $output;
}

add_filter('babe_order_customer_details_fields', 'customtheme_customer_details_fields', 10, 2);
function customtheme_customer_details_fields($order_meta, $order_id){

    $order_meta['checkbox'] = !empty($order_meta['checkbox']) ? __( 'yes', 'textdomain' ) : __( 'no', 'textdomain' );

    $hotels = customtheme_get_hotels();
    if ( !empty($order_meta['hotel']) && isset($hotels[ $order_meta['hotel'] ]) ){
        $order_meta['hotel'] = $hotels[ $order_meta['hotel'] ];
    }

    $radios = customtheme_get_radios();
    if ( !empty($order_meta['radio']) && isset($radios[ $order_meta['radio'] ]) ){
        $order_meta['radio'] = $radios[ $order_meta['radio'] ];
    }

    return $order_meta;
}

add_action( 'cmb2_admin_init', 'customtheme_order_customer_extra_fields', 20, 1);
function customtheme_order_customer_extra_fields() {

    $hotels = customtheme_get_hotels();
    $radios = customtheme_get_radios();

    $cmb = new_cmb2_box( array(
        'id'            => 'order_customer_extra_fields',
        'title'         => __( 'Extra fields', 'textdomain' ),
        'object_types'  => array( BABE_Post_types::$order_post_type, ), // Post type
        'context'       => 'normal',
        'priority'      => 'high',
        'show_names'    => true,
    ) );

    $cmb->add_field( array(
        'name' => BABE_html::checkout_field_label('checkbox'),
        'id'   => 'checkbox',
        'type'    => 'checkbox',
    ) );

    $cmb->add_field( array(
        'name' => BABE_html::checkout_field_label('radio'),
        'id'   => 'radio',
        'type'    => 'radio',
        'options' => $radios,
    ) );

    $cmb->add_field( array(
        'name' => BABE_html::checkout_field_label('hotel'),
        'id'   => 'hotel',
        'type'    => 'select',
        'show_option_none' => true,
        'options' => $hotels,
    ) );
}

Cookies

This site uses cookies to enhance your user experience and analyse traffic to improve this website. By clicking any link on this page you are giving your consent for us to set cookies. Please, see our Privacy Policy for additional information.
Scroll to top