Add an image on Woocommerce payment method title

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