Show a Placeholder on WooCommerce Checkout Billing Email Field if no value is displayed by Default

Question

I have a Wordpress site with a shopping cart using WooCommerce. Everything seems to be working well, minus one small issue - the billing email input field on the checkout page appears to be missing the placeholder text. I've tried to troubleshoot potential plugin conflicts, this did not seem to go anywhere.

I also tried to add the following php code to the child theme's functions.php file:

add_filter( 'woocommerce_checkout_fields' , 'override_billing_checkout_fields', 20, 1 );

function override_billing_checkout_fields( $fields ) {
  $fields['billing']['billing_email']['placeholder'] = 'Your Email Address';
  return $fields;
}

This did not work. I know the code works, I've tested it by using it to change the placeholder text for "first name" field - this worked (I did change it back to the default).

The url to the checkout page that I'm having the issue on is here: https://www.acoustichutch.com/checkout/

How do I get an input field with nothing as a placeholder value by default to show placeholder text?

Any help or point in the right direction would be greatly appreciated.

Answer 1

To make WooCommerce Checkout Billing Email Field Show a Placeholder when fied value is empty by default, try the following:

add_filter( 'woocommerce_checkout_fields' , 'conditional_checkout_billing_email_placeholder', 20, 1 );

function conditional_checkout_billing_email_placeholder( $fields ) {
    $billing_email = WC()->customer->get_billing_email();

    if ( empty($billing_email) ) {
        $fields['billing']['billing_email']['placeholder'] = __('Your Email Address');
    }
    return $fields;
}

Code goes in functions.php file of your child theme (or in a plugin). Tested and works.