Add an image on Woocommerce payment method title

Question

In Woocommerce, I plan on adding images before bank name plugin BACS. at now I'm already input bank name and other setting and already try inputting HTML before bank name but it does not work.

Answer 1

You can easily add an icon (an image) to the payment gateways in checkout page.

But in Woocommerce this icon is located after the title. To change it before the title you should need to edit the related template checkout/payment-method.php at line 27 from this:

      <?php echo $gateway->get_title(); ?> <?php echo $gateway->get_icon(); ?>

to this:

      <?php echo $gateway->get_icon(); ?> <?php echo $gateway->get_title(); ?>

and save … Please see: How to Override WooCommerce Templates via a Theme …

You will need to upload the image(s) in a folder in your theme as "assets" for example.

For each gateway you can enable a custom image, or return the default one, using this custom function hooked in woocommerce_gateway_icon action hook:

add_filter( 'woocommerce_gateway_icon', 'custom_payment_gateway_icons', 10, 2 );
function custom_payment_gateway_icons( $icon, $gateway_id ){

    foreach( WC()->payment_gateways->get_available_payment_gateways() as $gateway )
        if( $gateway->id == $gateway_id ){
            $title = $gateway->get_title();
            break;
        }

    // The path (subfolder name(s) in the active theme)
    $path = get_stylesheet_directory_uri(). '/assets';

    // Setting (or not) a custom icon to the payment IDs
    if($gateway_id == 'bacs')
        $icon = '<img src="' . WC_HTTPS::force_https_url( "$path/bacs.png" ) . '" alt="' . esc_attr( $title ) . '" />';
    elseif( $gateway_id == 'cheque' )
        $icon = '<img src="' . WC_HTTPS::force_https_url( "$path/cheque.png" ) . '" alt="' . esc_attr( $title ) . '" />';
    elseif( $gateway_id == 'cod' )
        $icon = '<img src="' . WC_HTTPS::force_https_url( "$path/cod.png" ) . '" alt="' . esc_attr( $title ) . '" />';
    elseif( $gateway_id == 'ppec_paypal' || 'paypal' )
        return $icon;

    return $icon;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Tested on WooCommerce 3 and works.

---

How to get the gateway ID:
Go on WC Settings > Checkout (end of the page) listed in the Gateway ID column