Search code examples
phpwordpresswoocommercehook-woocommerce

Display custom field in billing address


I´m currently trying to add a custom field to the default address fields (firstname, lastname, etc...)

The field should be used, to set a salutation for the customer.

For this purpose I used the following filter:

add_filter( 'woocommerce_default_address_fields', 'custom_woocommerce_address_fields' );

function custom_woocommerce_address_fields($fields) {

    $fields['salutation'] = array(
        'label' => __('Anrede', 'woocommerce'), // Add custom field label
        'placeholder' => 'CA12345678', // Add custom field placeholder
        'required' => true, // if field is required or not
        'clear' => false, // add clear or not
        'type' => 'select', // add field type
        'options' => array(
            'Herr' => 'Herr',
            'Frau' => 'Frau',
            'Firma' => 'Firma'
        ),
        'priority' => 1, // add priority
        'class' => array('billing-salutation-input')// add class name
    );

    return $fields;
}

Saving the custom field:

add_action( 'woocommerce_checkout_update_order_meta', 'save_new_checkout_field' );
  
function save_new_checkout_field( $order_id ) { 
    if ( $_POST['billing_salutation'] ) update_post_meta( $order_id, '_salutation', esc_attr( $_POST['billing_salutation'] ) );
}

Problem:

When I look at the order details, the new field won´t show up under the default address fields.

So I used the following code to show the new data.

add_action( 'woocommerce_admin_order_data_after_billing_address', 'show_new_checkout_field_order', 10, 1 );
   
function show_new_checkout_field_order( $order ) {    
   $order_id = $order->get_id();
   
   if ( get_post_meta( $order_id, '_salutation', true ) ) echo '<p><strong>Anrede:</strong> ' . get_post_meta( $order_id, '_salutation', true ) . '</p>';
}

However, the field is always displayed at the bottom and I can't find a way to bring the field to the desired position (image)

enter image description here

Do I have to use a different hook to display the data at the desired location (billing details)?

Or do I have to edit a specifc woocommerce template?


Solution

  • The output is a string, which uses <br/> to separate the order billing address details.

    So there are 2 possible views:

    • company_name<br/>Firstname Lastname<br/>street<br/>1<br/>1000 Location
    • Firstname Lastname<br/>street<br/>1<br/>1000 Location

    There are several possibilities that you can apply to answer your question, but the easiest is to edit the string via the woocommerce_order_get_formatted_billing_address filter hook.

    Note: we are going to check whether there is actually a billing company, and adjust our result based on that.

    Note: adjust $order->get_meta( '_your_meta_key' ); to your needs.

    So you get:

    function str_replace_first( $search, $replace, $subject ) {
        $pos = strpos( $subject, $search );
        if ( $pos !== false ) {
            return substr_replace( $subject, $replace, $pos, strlen( $search ) );
        }
        return $subject;
    }
     
    /**
     * Filter orders formatterd billing address.
     *
     * @since 3.8.0
     * @param string   $address     Formatted billing address string.
     * @param array    $raw_address Raw billing address.
     * @param WC_Order $order       Order data. @since 3.9.0
     */
    function filter_woocommerce_order_get_formatted_billing_address( $address, $raw_address, $order ) { 
        // Get meta
        $value = $order->get_meta( '_your_meta_key' );
        
        // When empty, return 
        if ( empty ( $value ) ) return $address;  
        
        // Get billing company
        $billing_company = $order->get_billing_company();
        
        // Not empty
        if ( ! empty ( $billing_company ) ) {
            $address = str_replace_first( '<br/>', '<br/>' . $value . '<br/>', $address );
        } else {
            $address = $value . '<br/>' . $address;
        }       
    
        return $address;
    }
    add_filter( 'woocommerce_order_get_formatted_billing_address', 'filter_woocommerce_order_get_formatted_billing_address', 10, 3 );
    

    Result:

    • company_name<br/>meta_value<br/>Firstname Lastname<br/>street<br/>1<br/>1000 Location
    • meta_value<br/>Firstname Lastname<br/>street<br/>1<br/>1000 Location

    Used in this answer: https://stackoverflow.com/a/2606638/11987538