Quickly Add an Icon To WooCommerce Bank Transfer Payment Method (BACS)

Do you want to add an icon to your WooCommerce checkout page for the Direct Bank Transfer payment method? You can add an icon quickly with the steps on this page.

If you have an actual image that you want to use as an icon, then follow the first example. If you want to use an icon font, then follow the second example.

Example 1: Add An Image As An Icon

Do you have an image that you want to use as an icon for the Direct Bank Transfer payment method? If so, this will show you how to do it quickly and directly in your WooCommerce settings page.

The easiest way to do this is to add the HTML image tag directly in the WooCommerce settings for the BACS title. The Direct Bank Transfer payment method is also known as BACS. Go to WooCommerce –> Settings –> Checkout tab. Click BACS. On this BACS settings page, the Title field should say something like “Direct bank transfer”. Add your image element into the Title field, after “Direct bank transfer”.

For example, change “Direct bank transfer” to:

Direct bank transfer <img src="URL_OF_YOUR_IMAGE" alt="bank transfer icon">

Change URL_OF_YOUR_IMAGE to the URL of your own image icon.

Click “Save changes” at the bottom of the page.

Now, you will see this icon on your Checkout page next to the “Direct bank transfer” payment method.

Example 2: Add a Font Icon

This lets you add a font icon to the Direct Bank Transfer payment method. You can do this easily by adding CSS directly in your WordPress back end.

For example, if you are already using Font Awesome icons, then you can use one of those icons. To add the Font Awesome money icon to the Direct Bank Transfer payment method, use the following CSS.

.woocommerce-checkout-payment .wc_payment_method.payment_method_bacs label:after{
    font-family: FontAwesome;
    content: "f0d6";
    font-style: normal;
    font-weight: 400; 
    float: right;
    vertical-align: middle;
  
}

To use the Font Awesome bank icon, instead, change f0d6 on line 3, to f19c.

What if you’re not using Font Awesome?

Instead of Font Awesome, you may be using another font icon package. You can use your own icon from a custom icon font. To use a different icon font, change ‘FontAwesome’ on line 2, to the name of your icon font. Also, change f0d6 on line 3, to your desired icon’s Unicode. Now

After you add the CSS, you will see this icon on your Checkout page next to the “Direct bank transfer” payment method.

Optional Styling

1. You can change the color of the font icon by inserting this into line 8 of the CSS:

   color: #008000;

   That will make the icon green. You can change #008000 to your desired color code.

2. You can optionally make the icon font larger by inserting this into line 8 of the CSS:

      font-size:24px;
      margin-top:-8px