1

I would like to include a placeholder in the woocommerce login form.

Looking at this for a starting point: woocommerce add placeholder text to edit account form:

add_filter( 'woocommerce_form_field_args', 'custom_form_field_args',      10, 3 );
function custom_form_field_args( $args, $key, $value ) { 
   if ( $args['id'] == 'username' ) {
      $args['placeholder'] = 'My placeholder text';
   }

   return $args;
};

Not working as it is. Open to any suggestions.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
Scott
  • 55
  • 3
  • 6
  • I decided to copy the form_login template to my child theme and edit it. But remain interested in the solution to my question. – Scott Aug 07 '19 at 00:05

1 Answers1

1

As the login fields are hard coded in myaccount/form-login.php template file, the only way to add placeholder(s) to those fields, requires overriding the related template via the active child theme (or active theme)

Once you have copied the myaccount/form-login.php template file located in WooCommerce plugin under the "templates" folder to (as explained on the template):

<?php
/**
 * Login Form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/myaccount/form-login.php.

Open/Edit form-login.php copied file, and add to all desired <input> html tags:

placeholder="placeholder text"

Like for example replacing from line 38 to 45 with the following:

        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="username"><?php esc_html_e( 'Username or email address', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
            <input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username" placeholder="<?ph esc_html_e("Here type your Username (or email address)"); ?>" autocomplete="username" value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( wp_unslash( $_POST['username'] ) ) : ''; ?>" /><?php // @codingStandardsIgnoreLine ?>
        </p>
        <p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
            <label for="password"><?php esc_html_e( 'Password', 'woocommerce' ); ?>&nbsp;<span class="required">*</span></label>
            <input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" placeholder="<?ph esc_html_e(""Here type your password"); ?>" autocomplete="current-password" />
        </p>

Then save… You will get something like:

enter image description here

Related threads:

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • thanks for your answer. so what is the use of $fields['account']['account_username']['placeholder'] = __( 'Email*', 'woocommerce' ); $fields['account']['account_password']['placeholder'] = __( 'Password*', 'woocommerce' ); – Louis Jul 24 '20 at 13:57
  • another thing: can you edit your answer so the placeholder text is translatable ? – Louis Jul 24 '20 at 13:59
  • 1
    Done… The hook `woocommerce_checkout_fields` is for "accoun"t **checkout** fields, when on WooCommerce settings on "account and privacy" section for "Allow customers to create an account during checkout" option is enabled, so in checkout under the billing form, a checkbox "Create an account?" is displayed (if you are not logged in). Then if you check it, 2 fields are displayed for username and password. – LoicTheAztec Jul 24 '20 at 14:38
  • tu es une machine ! – Louis Aug 01 '20 at 15:16
  • hahaha ! @loictheaztec tu peux me filer un coup de main sur https://stackoverflow.com/questions/63206857/changing-shipping-method-doesnt-update-total-cart-price-in-checkout-page ? – Louis Aug 01 '20 at 15:22
  • @Louis Essaye de faire un genre d'exemple reproductible avec du code dans ta question. – LoicTheAztec Aug 01 '20 at 15:31