woocommerce add placeholder text to edit account form

Question

I am customizing my storefront child theme and eventually managed to target all woocommerce forms to show placeholder text only EXCEPT for the fields on form-edit-account that will not change no matter what I have tried (a LOT). I thought of copying that template to my child theme with changes but not sure of the correct method. Any help greatly appreciated - I am a copy-paster not a developer though.

Snippet of code used in functions.php file:

    //placeholder text
    add_filter( 'woocommerce_form_field_args', 'custom_form_field_args',      10, 3 );
    function custom_form_field_args( $args, $key, $value ) { 
       if ( $args['id'] == 'billing_first_name' ) {
          $args['placeholder'] = 'FIRST NAME';
       } elseif ( $args['id'] == 'billing_last_name' ) {
           $args['placeholder'] = 'LAST NAME';
       } elseif ( $args['id'] == 'shipping_state' ) {
           $args['placeholder'] = 'State';
       } elseif ( $args['id'] == 'account_first_name' ) {
           $args['placeholder'] = 'FIRST NAME';
       } elseif ( $args['id'] == 'account_last_name' ) {
           $args['placeholder'] = 'LAST NAME';
       } elseif ( $args['id'] == 'account_email' ) {
           $args['placeholder'] = 'email';  
       } elseif ( $args['id'] == 'account_password_current' ) {
           $args['placeholder'] = 'password':
       } elseif ( $args['id'] == 'account_password_1' ) {
           $args['placeholder'] = 'new password';   
       } elseif ( $args['id'] == 'account_password_2' ) {
           $args['placeholder'] = 'confirm password';
       }

       return $args;
    };

and so on though each "shipping", "billing" and "account" id.

The css used to hide the labels

    .woocommerce form .form-row label {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
clip: rect(0,0,0,0);
border: 0;

}

The template can be found here https://github.com/woocommerce/woocommerce/blob/master/templates/myaccount/form-edit-account.php

I tested editing the template directly as follows (just to see if it would work, which it did) but not sure if that's the correct way to write it, and if so, should it just go in my child theme folder? Code as-is:

    <p class="woocommerce-form-row woocommerce-form-row--first form-row form-row-first">
    <label for="account_first_name"><?php esc_html_e( 'First name', 'woocommerce' ); ?> <span class="required">*</span></label>
    <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="account_first_name" id="account_first_name" value="<?php echo esc_attr( $user->first_name ); ?>" />
</p>

I inserted this on the input type line after id but is this the correct method?

    placeholder="First name"

Thank you!

Answer 1

Use following function to copy label in palceholder

function custom_form_field_args( $args, $key, $value ) {
        $args['placeholder'] = $args['label'];
        return $args;
    };
    add_filter( 'woocommerce_form_field_args', 'custom_form_field_args',      10, 3 );

and then if you want hide all label by using this css

.woocommerce form .form-row label {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
    clip: rect(0,0,0,0);
border: 0;
}

Answer 2

You have a syntax error, colon instead of semicolon:

$args['placeholder'] = 'password':

should be:

$args['placeholder'] = 'password';

I am not sure if that would help, though...

Also, consider using switch instead of if loop if you have so many different possibilities, it is much more readable:

<?php

switch( $args['id']) {

  case 'billing_first_name':
    $args['placeholder'] = 'FIRST NAME';
    break;

  case 'billing_last_name':
    $args['placeholder'] = 'LAST NAME';
    break;

  // ...
}

Sorry for not helping, I actually got here looking for the similar answer (setting placeholder on WooCommerce review form fields).