CODEWITHSUNDEEP
wordpresswoocommerce
Michelle
Michelle

Reputation: 549

woocommerce add icon to checkout fields

I want to add a little icon to some of my checkout fields, so that the phone field has a little picture of a phone etc, as per the attached image.

I tried to put this following code into the CSS but it didn't work... should I try it with Fontawesome and if so, what would the code look like? Thanks!!

#billing_phone {
      background-image: url('wp-content/uploads/2018/11/Asset-1.svg');
      background-repeat: no-repeat;
      background-position: left center;
      padding-left: 16px;

enter image description here

Upvotes: 0

Views: 1039

Answers (1)

Brad Holmes
Brad Holmes

Reputation: 497

i would look at using font awesome and tap into the placeholder add this function with your edits inside your functions.php inside your child theme 

add_filter('woocommerce_default_address_fields', 'override_default_address_checkout_fields', 20, 1);
function override_default_address_checkout_fields( $address_fields ) {
    $address_fields['first_name']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    $address_fields['last_name']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    $address_fields['address_1']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    $address_fields['state']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    $address_fields['postcode']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    $address_fields['city']['placeholder'] = 'ADD FONT AWESOME UNICODE HERE';
    return $address_fields;
}

use the font awesome cheatsheet

to get the correct unicode for the icons you would like, all this is assuming you already have font awesome enqueued in your site and you may have to do some styling, ie colors and size

Upvotes: 1

Related Questions