Add text below the Email spot on Checkout

[odsadmin]

Hey I would like to add a line of text above the email address spot on my checkout page. I would like this font to be in red and fall right above the email address field on the checkout page.

The text would be

Benefits of making an account. Faster Check Out, Receive Shipping Update, Easier Refunds. We do not send out junk mail or sell your customer information.

I would greatly appreciate the help getting this one there. I know you guys have helped me on making changes and adding text to my checkout page. My URL is OutdoorDogSupply.com

[Prasant]

Hello @odsadmin,

Thanks for asking.

You can add following JS code under X > Theme Options > JS:

jQuery(document).ready(function($) {
$('p#billing_phone_field').append('Benefits of making an account. Faster Check Out, Receive Shipping Update, Easier Refunds. We do not send out junk mail or sell your customer information.');
});

Final output should look something like this. https://cl.ly/3d1q0E452p1w

Thanks.

[odsadmin]

Can we make that text red Red?

[jade]

Hi there,

You can do that by adding this CSS in the Global CSS:

p#billing_phone_field {
    color: red;
}

Hope this helps.

[odsadmin]

That made *Phone Red as well. Can we make just this text red?

Also can we put it above Email address. Right now it has Email Address to the right of phone number. I would like it below the phone number box and the text above the Email Address .

[nabeel]

Hi again,

You can replace the previous snippet with the following script:

jQuery(document).ready(function($) {
	$('#billing_email_field').prepend('<span class="red-text">Benefits of making an account. Faster Check Out, Receive Shipping Update, Easier Refunds. We do not send out junk mail or sell your customer information.</span>');
});

Then add the following CSS code in the Theme Options > CSS:

.red-text {
    color: red;
}

Hope this helps!

[odsadmin]

Perfect.
Thank you

Is there anyway to make it both that text and the Email Address box under the phone number?

[jade]

Hi there,

Please add this code in the custom CSS:

#billing_email_field {
    clear: both;
}

---

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

[odsadmin]

You Rock! Thank you so much!

[Prasant]

You are most welcome.