Reputation: 69
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.
Upvotes: 4
Views: 12696
Reputation: 254492
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 line27
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
Upvotes: 9