How do I add HTML to the "billing_email" field at WooCommerce checkout?

Question

I would like to add a line of text below the billing_email field input box. The details are as follows.

Original HTML output.

<p class="form-row form-row-wide validate-required validate-email" id="billing_email_field" data-priority="110">
    <label for="billing_email" class="">Email address&nbsp;<abbr class="required" title="required">*</abbr></label>
    <span class="woocommerce-input-wrapper">
        <input type="email" class="input-text " name="billing_email" id="billing_email" placeholder="" value="" autocomplete="email username">
    </span>
</p>

Modified HTML output.

<p class="form-row form-row-wide validate-required validate-email" id="billing_email_field" data-priority="110">
    <label for="billing_email" class="">Email address&nbsp;<abbr class="required" title="required">*</abbr></label>
    <span class="woocommerce-input-wrapper">
        <input type="email" class="input-text " name="billing_email" id="billing_email" placeholder="" value="" autocomplete="email username">
    </span>
    <br>
    <span>Please enter the correct email address so that you can receive our emails.</span>
</p>

I tried to check the WooCommerce help documentation - Customizing checkout fields using actions and filters, but it was too difficult for me, so I am asking for help here.

Any help would be appreciated!

7uc1f3r · Accepted Answer · 2021-04-22T10:50:16.480

To make a change specifically and only for the billing_email field, you can use the 'woocommerce_form_field_' . $args['type'], filter hook. Where $args['type'] can be replaced with type email

$field contains all HTML from <p> to the closing </p>. However, because you want to add new HTML between the existing code, instead of rewriting the entire field, you can use str_replace

So you get:

function filter_woocommerce_form_field_email( $field, $key, $args, $value ) {   
    // Billing email
    if ( $key === 'billing_email') {
        // Replace existing html with new ones
        $field = str_replace( '</span>', '</span><br><span>Please enter the correct email address so that you can receive our emails.</span>', $field );
    }
    
    return $field;
} 
add_filter( 'woocommerce_form_field_email', 'filter_woocommerce_form_field_email', 10, 4 );

How do I add HTML to the "billing_email" field at WooCommerce checkout?

1 Answers1