Customize the Wordpress Woocommerce billing address edit forms

Question

By default, Woocommerce has two types of addresses which are Billing and Delivery address, and these informations can be edited from My Account page, you click the "edit" link, form opens in a new window.

But this is what, I want the account page to look like:

When the user visits the My Account page, I would like to have both [the billing (facturacion) and shipping address (datos envio)] edit forms there on the same page. How can I achieve this?

I want to have both forms in the same page instead in two different ones.

I have been trying to "separate" both forms and have them one next to the other in the same page instead of having them in two different page/instances.

The file form-edit-address contains the forms.

This is what I have tried:

in the begining of the code it reads

$page_title = ( $load_address === 'billing' ) ? __( 'Billing Address', 'woocommerce' );

I removed the shipping bit. but breaks all. clearly here is where i have to chop a bit to render billing or shipping forms, my experience is limited with php so I have been trying all sorts of combinations like walking blind. Can somebody help me understand this code to customize it?

This is the untouched code:

<?php
/**
 * Edit address form
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.1.0
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $woocommerce, $current_user;

$page_title = ( $load_address === 'billing' ) ? __( 'Billing Address', 'woocommerce' ) : __( 'Shipping Address', 'woocommerce' );

get_currentuserinfo();
?>

<?php wc_print_notices(); ?>

<?php if ( ! $load_address ) : ?>

    <?php wc_get_template( 'myaccount/my-address.php' ); ?>

<?php else : ?>

    <form method="post">

        <h3><?php echo apply_filters( 'woocommerce_my_account_edit_address_title', $page_title ); ?></h3>

        <?php foreach ( $address as $key => $field ) : ?>

            <?php woocommerce_form_field( $key, $field, ! empty( $_POST[ $key ] ) ? wc_clean( $_POST[ $key ] ) : $field['value'] ); ?>

        <?php endforeach; ?>

        <p>
            <input type="submit" class="button big" name="save_address" value="<?php _e( 'Save Address', 'woocommerce' ); ?>" />
            <?php wp_nonce_field( 'woocommerce-edit_address' ); ?>
            <input type="hidden" name="action" value="edit_address" />
        </p>

    </form>

<?php endif; ?>

Answer 1

Here is how you can do it.

<?php
// get the user meta
$userMeta = get_user_meta(get_current_user_id());

// get the form fields
$countries = new WC_Countries();
$billing_fields = $countries->get_address_fields( '', 'billing_' );
$shipping_fields = $countries->get_address_fields( '', 'shipping_' );
?>

<!-- billing form -->
<?php
$load_address = 'billing';
$page_title   = __( 'Billing Address', 'woocommerce' );
?>
<form action="/my-account/edit-address/billing/" class="edit-account" method="post">

    <h2><?php echo apply_filters( 'woocommerce_my_account_edit_address_title', $page_title ); ?></h2>

    <?php do_action( "woocommerce_before_edit_address_form_{$load_address}" ); ?>

    <?php foreach ( $billing_fields as $key => $field ) : ?>

        <?php woocommerce_form_field( $key, $field, $userMeta[$key][0] ); ?>

    <?php endforeach; ?>

    <?php do_action( "woocommerce_after_edit_address_form_{$load_address}" ); ?>

    <p>
        <input type="submit" class="button" name="save_address" value="<?php esc_attr_e( 'Save Address', 'woocommerce' ); ?>" />
        <?php wp_nonce_field( 'woocommerce-edit_address' ); ?>
        <input type="hidden" name="action" value="edit_address" />
    </p>

</form>

<!-- shipping form -->
<?php
$load_address = 'shipping';
$page_title   = __( 'Shipping Address', 'woocommerce' );
?>
<form action="/my-account/edit-address/shipping/" class="edit-account" method="post">

    <h2><?php echo apply_filters( 'woocommerce_my_account_edit_address_title', $page_title ); ?></h2>

    <?php do_action( "woocommerce_before_edit_address_form_{$load_address}" ); ?>

    <?php foreach ( $shipping_fields as $key => $field ) : ?>

        <?php woocommerce_form_field( $key, $field, $userMeta[$key][0] ); ?>

    <?php endforeach; ?>

    <?php do_action( "woocommerce_after_edit_address_form_{$load_address}" ); ?>

    <p>
        <input type="submit" class="button" name="save_address" value="<?php esc_attr_e( 'Save Address', 'woocommerce' ); ?>" />
        <?php wp_nonce_field( 'woocommerce-edit_address' ); ?>
        <input type="hidden" name="action" value="edit_address" />
    </p>

</form>