在Woocommerce付款方式标题上添加图片 [英] Add an image on Woocommerce payment method title

问题描述

在Woocommerce中，我计划在银行名称插件BACS之前添加图像。现在，我已经输入了银行名称和其他设置，并且已经尝试在银行名称之前输入HTML，但是它不起作用。

解决方案

您可以在结帐页面上轻松地向付款网关添加图标（图像）。

但是在Woocommerce中，该图标位于标题的后。
要在标题之前进行更改，您需要编辑相关模板

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.

解决方案

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

这篇关于在Woocommerce付款方式标题上添加图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！