wordpress woocommerce - show and modify account fields on checkout page

Question

I understand that you can add custom fields on the checkout page of WooCommerce, but what I want to show before the billing details are the account fields, which are already existing as written in the documentation . These fields are named:

• account_username
• account_password
• account_password-2

But they are not shown by default. I only managed to make them visible by putting them at the top of the list in the function for reordering the billing fields like this in my theme's function.php like this

add_filter("woocommerce_checkout_fields", "order_fields");

function order_fields($fields) {

    $order = array(
        "account_username",
        "account_password",
        "account_password-2",
        "billing_first_name",
        "billing_last_name",
        // other billing fields go here
    );

    foreach($order as $field)
    {
        $ordered_fields[$field] = $fields["billing"][$field];
    }

    $fields["billing"] = $ordered_fields;
    return $fields;

}

This works fine with the functionality of creating an account while checking out, but I am having troubles with modifying its label and placeholder. This is what I tried to do:

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

function custom_override_checkout_fields( $fields ) {

    $fields['account']['account_username']['label'] = '* Username: ';
    $fields['account']['account_username']['placeholder'] = 'Enter username here...';

}

But it wouldn't let me change the labels and placeholder of the fields so I was thinking that maybe it has something to do with how I am displaying it and/or how I am modifying them.

Ideas, anyone? Thanks in advance.

Answer 1

I've found the answer to this, so if anyone has the same problem, this is the best solution. Instead of trying to make the accounts fields visible, in my case it's more efficient to manually output the fields I need since I won't be needing most of the default fields anyway.

What I did was override the form-billing.php template. I removed the loop for the fields which is this part:

<?php foreach ( $checkout->checkout_fields['billing'] as $key => $field ) : ?>

    <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

<?php endforeach; ?>

And replaced it with this to individually add them to the page:

<?php
    woocommerce_form_field( 'billing_first_name', $checkout->checkout_fields['billing']['billing_first_name'], $checkout->get_value( 'billing_first_name') );
    woocommerce_form_field( 'billing_email', $checkout->checkout_fields['billing']['billing_email'], $checkout->get_value( 'billing_email') );
    woocommerce_form_field( 'account_username', $checkout->checkout_fields['account']['account_username'], $checkout->get_value( 'account_username') );
    woocommerce_form_field( 'account_password', $checkout->checkout_fields['account']['account_password'], $checkout->get_value( 'account_password') );
    woocommerce_form_field( 'account_password-2', $checkout->checkout_fields['account']['account_password-2'], $checkout->get_value( 'account_password-2') );
    //...other fields that I need
?>

From there, the modifications for the label, placeholder, etc. works just fine. Hope it works for other people with the same issues too. Cheers! :)