Woocommerce checkout with edit address layout

Question

So, when you go to checkout you see all billing fields inputs but I want to remove all them and display a card based like on My Account / Edit Address with the Edit button. It this possible?

Basically I need to eject that card on the billing fields place. Any advise?

I am already using "Hide billing address from checkout page but keep the information" answer code.

Answer 1

Here is a slightly improved version including shipping address, jQuery to show the Edit Form and some styling to make it look like a card. Thank you for this code.

It would be great if the user could click Edit, change some info and hit Save to dismiss the form and reload the card contents. Any ideas on how to achieve this?

add_action( 'woocommerce_before_checkout_billing_form', 'example_billing_card', 10, 1 ); 
function example_billing_card() {

if (is_user_logged_in()){
    $customer_id = get_current_user_id();
    $address = get_user_meta( $customer_id, 'billing_address_1', true );
    if (!empty($address)){          
        echo '<style>.woocommerce-billing-fields__field-wrapper {display: none !important;}</style>';
        echo '<a href="#" id="example-billing-edit" class="edit">'. __( 'Edit', 'woocommerce' ).'</a>
        <div class="example-checkout-billing">
            <address>'.
        get_user_meta( $customer_id, 'billing_first_name', true ).' '.
        get_user_meta( $customer_id, 'billing_last_name', true ).' '.
        get_user_meta( $customer_id, 'billing_phone', true ).'<br>'.
        get_user_meta( $customer_id, 'billing_address_1', true ).' '.
        get_user_meta( $customer_id, 'billing_address_2', true ).'<br>'.
        get_user_meta( $customer_id, 'billing_postcode', true ).' '.
        get_user_meta( $customer_id, 'billing_city', true ).' '.
        get_user_meta( $customer_id, 'billing_state', true ).' '.
        get_user_meta( $customer_id, 'billing_country', true )
            .'</address>
        </div>';
    }
}}; 
add_action( 'woocommerce_before_checkout_shipping_form', 'example_shipping_card', 10, 1 );
function example_shipping_card() {

if (is_user_logged_in()){
    $customer_id = get_current_user_id();
    $address = get_user_meta( $customer_id, 'shipping_address_1', true );
    if (!empty($address)){          
        echo '<style>.woocommerce-shipping-fields__field-wrapper {display: none !important;}</style>';
        echo '<h3>Shipping details</h3><a href="#" id="example-shipping-edit" class="edit">'. __( 'Edit', 'woocommerce' ).'</a>
        <div class="example-checkout-shipping">
            <address>'.
        get_user_meta( $customer_id, 'shipping_first_name', true ).' '.
        get_user_meta( $customer_id, 'shipping_last_name', true ).'<br>'.
        get_user_meta( $customer_id, 'shipping_address_1', true ).' '.
        get_user_meta( $customer_id, 'shipping_address_2', true ).'<br>'.
        get_user_meta( $customer_id, 'shipping_postcode', true ).' '.
        get_user_meta( $customer_id, 'shipping_city', true ).' '.
        get_user_meta( $customer_id, 'shipping_state', true ).' '.
        get_user_meta( $customer_id, 'shipping_country', true )
            .'</address>
        </div>';
    }
}};
add_action( 'wp_head', 'checkout_example_js_css', 900 );
function checkout_example_js_css(){
if ( is_checkout() ){
    ?>
<script>
jQuery(document).ready(function(){
jQuery('#example-billing-edit').on('click', function(event) {        
    jQuery('.woocommerce-billing-fields__field-wrapper').toggleClass('show');
    jQuery('.example-checkout-billing').toggle('show');
    jQuery('#example-billing-edit').toggle('show');
});
});
jQuery(document).ready(function(){
jQuery('#example-shipping-edit').on('click', function(event) {        
    jQuery('.woocommerce-shipping-fields__field-wrapper').toggleClass('show');
    jQuery('.example-checkout-shipping').toggle('show');
    jQuery('#example-shipping-edit').toggle('hide');
});
});
</script>
<style> .example-checkout-billing, .example-checkout-shipping {
        background: var(--ast-global-color-6);
        padding: 16px;
        border-radius: 8px;
        display: inline-block;
    }
    #example-billing-edit,
    #example-shipping-edit {
        display: block;
    }
    .woocommerce-billing-fields__field-wrapper.show,
    .woocommerce-shipping-fields__field-wrapper.show {
        display: flex !important;
    }
    h3#ship-to-different-address {
        display:none;
    }
    address {
        margin: 0;
    }

</style>
    <?php
}
}

Answer 2

I'm prefer change in template myaccount/my-address.php like this:

<address>
        <?php if($address) : ?>
            <?php
                echo ($name === 'billing') ? (
                    get_user_meta( $customer_id, 'billing_first_name', true ).' '. get_user_meta( $customer_id, 'billing_last_name', true ) .'<br>'.
                    get_user_meta( $customer_id, 'billing_postcode', true ).'<br>'.
                    get_user_meta( $customer_id, 'billing_state', true ).'<br>'.
                    get_user_meta( $customer_id, 'billing_city', true ).'<br>'.
                    get_user_meta( $customer_id, 'billing_address_1', true ).'<br>'.
                    get_user_meta( $customer_id, 'billing_address_2', true )
                ) : (
                    get_user_meta( $customer_id, 'shipping_first_name', true ).' '. get_user_meta( $customer_id, 'shipping_last_name', true ) .'<br>'.
                    get_user_meta( $customer_id, 'shipping_postcode', true ).'<br>'.
                    get_user_meta( $customer_id, 'shipping_state', true ).'<br>'.
                    get_user_meta( $customer_id, 'shipping_city', true ).'<br>'.
                    get_user_meta( $customer_id, 'shipping_address_1', true ).'<br>'.
                    get_user_meta( $customer_id, 'shipping_address_2', true )
                )
                ;
                // echo $address ? wp_kses_post( $address ) : esc_html_e( 'You have not set up this type of address yet.', 'woocommerce' );
            endif;
        ?>
    </address>

Answer 3

So,

I've used the code I placed on my question and added this too on my functions.php file:

function action_woocommerce_after_checkout_billing_form( $wccs_custom_checkout_field_pro ) {

    if (is_user_logged_in()){
        $customer_id = get_current_user_id();
        $address = get_user_meta( $customer_id, 'billing_address_1', true );
        if (!empty($address)){          
            echo '<style>.woocommerce-billing-fields__field-wrapper {display: none;}</style>';
            echo '<div class="checkoutaddress">
                    <a href="#" class="edit">'. __( 'Edit', 'woocommerce' ).'</a>
                    <h3>'. __( 'Billing address', 'woocommerce' ) .'</h3>
                <address>'.
            get_user_meta( $customer_id, 'billing_first_name', true ).' '.
            get_user_meta( $customer_id, 'billing_last_name', true )    .'<br>'.
            get_user_meta( $customer_id, 'billing_phone', true ).'<br>'.
            $address.'<br>'.
            get_user_meta( $customer_id, 'billing_postcode', true ).' '.
            get_user_meta( $customer_id, 'billing_city', true ).'<br>'.
            get_user_meta( $customer_id, 'billing_state', true )
                .'</address>
            </div>';
        }
    }

}; 
add_action( 'woocommerce_after_checkout_billing_form', 'action_woocommerce_after_checkout_billing_form', 10, 1 );

It will check if the user is logged (otherwise shows fields) and after that check, checks if the billing address is filled (otherwise shows fields too)

Hope this helps someone. It's not a great solution but it works!