Woocommerce checkout with edit address layout

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

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!