Add a checkbox to show/hide checkout fields and display the values ​in WooCommerce backend

Question

I am stuck with the following. Based on Add a checkbox to show / hide checkout fields in Woocommerce answer code i've added a checkbox that show/hides three inputs at checkout.

For that I've used Jquery and hooked into WooCommerce checkout fields, I got that part working. What I can not get to achieve is displaying those fields on WooCommerce backend.

I've added them to the order dashboard trying to hook into woocommerce_admin_order_data_after_billing_address, but I just get <p> element string with no content.

Example: Ettevõtte aadress: (empty)

I read many posts and WooCommerce documentation but I can't seem to find the error on this.

Any advice?

---

My code attempt:

add_action( 'woocommerce_before_checkout_form', 'conditionally_show_hide_checkout_field' );
function conditionally_show_hide_checkout_field() {
    ?>
    <style>
    p#new_billing_field_field.on { display:none !important; }
    p#new_billing_field2_field.on { display:none !important; }
    p#new_billing_field3_field.on { display:none !important; }

    </style>

    <script type="text/javascript">
    jQuery(function($){
        var a = 'input#checkbox_trigger',   b = '#new_billing_field_field,#new_billing_field2_field,#new_billing_field3_field '

        $(a).change(function(){
            if ( $(this).prop('checked') === true && $(b).hasClass('on') ) {
                $(b).show(function(){
                    $(b).css({'display':'none'}).removeClass('on').show();
                });
            }
            else if ( $(this).prop('checked') !== true && ! $(b).hasClass('on') ) {
                $(b).fadeOut(function(){
                    $(b).addClass('on')
                });
                $(b+' input').val('');
            }
        });
    });
    </script>
    <?php
}

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_fields' );
function add_custom_checkout_fields( $fields ) {


    
    $fields['billing']['checkbox_trigger'] = array(
        'type'      => 'checkbox',
        'label'     => __('Ostan ettevõttena', 'woocommerce'),
        'class'     => array('form-row-wide'),
        'clear'     => true
    );

    $fields['billing']['new_billing_field'] = array(
        'label'     => __('Ettevõtte nimi', 'woocommerce'),
        'placeholder'   => _x('Ettevõtte nimi', 'placeholder', 'woocommerce'),
        'class'     => array('form-row-wide on'),
        'clear'     => true
    );
      $fields['billing']['new_billing_field2'] = array(
        'label'     => __('Ettevõtte registrikood ', 'woocommerce'),
        'placeholder'   => _x('Ettevõtte registrikood ', 'placeholder', 'woocommerce'),
        'class'     => array('form-row-wide on'),
        'clear'     => true
    );
      $fields['billing']['new_billing_field3'] = array(
        'label'     => __('Ettevõtte aadress', 'woocommerce'),
        'placeholder'   => _x('Ettevõtte aadress', 'placeholder', 'woocommerce'),
        'class'     => array('form-row-wide on'),
        'clear'     => true
    );
  
    

    
    return $fields;
}




/**
 * Display field value on the order edit page
 */
 
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Ostan ettevõttena').':</strong> ' . get_post_meta( $order->get_id(), '_new_billing_field', true ) . '</p>';
     echo '<p><strong>'.__('Ettevõtte aadress').':</strong> ' . get_post_meta( $order->get_id(), '_new_billing_field3', true ) . '</p>';
       echo '<p><strong>'.__('Ettevõtte registrikood').':</strong> ' . get_post_meta( $order->get_id(), '_new_billing_field2', true ) . '</p>';
}

Answer 1

Besides the fact that you use new_billing_field and _new_billing_field interchangeably (note the underscore), do you not have code to effectively save the values ​​from the fields, before you can display them in other locations.

So you get:

function action_woocommerce_before_checkout_form() {
    ?>
    <style>
    p#new_billing_field_field.on { display:none !important; }
    p#new_billing_field2_field.on { display:none !important; }
    p#new_billing_field3_field.on { display:none !important; }
    </style>

    <script type="text/javascript">
    jQuery(function($){
        var a = 'input#checkbox_trigger';
        var b = '#new_billing_field_field,#new_billing_field2_field,#new_billing_field3_field';

        $(a).change(function() {
            if ( $(this).prop('checked') === true && $(b).hasClass('on') ) {
                $(b).show(function(){
                    $(b).css({'display':'none'}).removeClass('on').show();
                });
            }
            else if ( $(this).prop('checked') !== true && ! $(b).hasClass('on') ) {
                $(b).fadeOut(function(){
                    $(b).addClass('on')
                });
                $(b+' input').val('');
            }
        });
    });
    </script>
    <?php
}
add_action( 'woocommerce_before_checkout_form', 'action_woocommerce_before_checkout_form' );

function filter_woocommerce_checkout_fields( $fields ) {
    $fields['billing']['checkbox_trigger'] = array(
        'type'          => 'checkbox',
        'label'         => __( 'Ostan ettevõttena', 'woocommerce' ),
        'class'         => array( 'form-row-wide' ),
        'clear'         => true
    );

    $fields['billing']['new_billing_field'] = array(
        'label'         => __( 'Ettevõtte nimi', 'woocommerce' ),
        'placeholder'   => _x( 'Ettevõtte nimi', 'placeholder', 'woocommerce' ),
        'class'         => array( 'form-row-wide on' ),
        'clear'         => true
    );
    
    $fields['billing']['new_billing_field2'] = array(
        'label'         => __( 'Ettevõtte registrikood ', 'woocommerce' ),
        'placeholder'   => _x( 'Ettevõtte registrikood ', 'placeholder', 'woocommerce' ),
        'class'         => array( 'form-row-wide on' ),
        'clear'         => true
    );
      $fields['billing']['new_billing_field3'] = array(
        'label'         => __( 'Ettevõtte aadress', 'woocommerce' ),
        'placeholder'   => _x( 'Ettevõtte aadress', 'placeholder', 'woocommerce' ),
        'class'         => array( 'form-row-wide on' ),
        'clear'         => true
    );
    
    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'filter_woocommerce_checkout_fields', 10, 1 );

// Save fields
function action_woocommerce_checkout_create_order( $order, $data ) {
    // Isset and NOT empty, save
    if ( isset( $_POST['new_billing_field'] ) && ! empty( $_POST['new_billing_field'] ) ) {
        // Update meta data
        $order->update_meta_data( '_new_billing_field', sanitize_text_field( $_POST['new_billing_field'] ) );
    }
    
    if ( isset( $_POST['new_billing_field2'] ) && ! empty( $_POST['new_billing_field2'] ) ) {
        // Update meta data
        $order->update_meta_data( '_new_billing_field2', sanitize_text_field( $_POST['new_billing_field2'] ) );
    }
    
    if ( isset( $_POST['new_billing_field3'] ) && ! empty( $_POST['new_billing_field3'] ) ) {
        // Update meta data
        $order->update_meta_data( '_new_billing_field3', sanitize_text_field( $_POST['new_billing_field3'] ) );
    }
}
add_action( 'woocommerce_checkout_create_order', 'action_woocommerce_checkout_create_order', 10, 2 );

// Display field values on admin order pages after billing adress
function action_woocommerce_admin_order_data_after_billing_address( $order ) {  
    // Get meta
    $new_billing_field = $order->get_meta( '_new_billing_field' );
    
    // NOT empty
    if ( ! empty ( $new_billing_field ) ) {
        echo '<p><strong>' . __( 'Ostan ettevõttena', 'woocommerce' ) . ':</strong> ' . $new_billing_field . '</p>';
    }
    
    // Get meta
    $new_billing_field2 = $order->get_meta( '_new_billing_field2' );
    
    // NOT empty
    if ( ! empty ( $new_billing_field2 ) ) {
        echo '<p><strong>' . __( 'Ettevõtte aadress', 'woocommerce' ) . ':</strong> ' . $new_billing_field2 . '</p>';
    }
    
    // Get meta
    $new_billing_field3 = $order->get_meta( '_new_billing_field3' );
    
    // NOT empty
    if ( ! empty ( $new_billing_field3 ) ) {
        echo '<p><strong>' . __( 'Competitor dob day', 'woocommerce' ) . ':</strong> ' . $new_billing_field3 . '</p>';
    }
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'action_woocommerce_admin_order_data_after_billing_address', 10, 1 );