在 Woocommerce 付款方式标题上添加图片

Posted

技术标签:

【中文标题】在 Woocommerce 付款方式标题上添加图片【英文标题】:Add an image on Woocommerce payment method title 【发布时间】:2018-03-31 02:58:40 【问题描述】:

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

【问题讨论】:

【参考方案1】:

您可以在结帐页面中轻松地将图标(图像)添加到支付网关。

但在 Woocommerce 中,此图标位于 标题之后。 要在标题之前更改它,您需要在 line 27 处编辑相关模板 checkout/payment-method.php

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

到这里:

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

并保存……请参阅:How to Override WooCommerce Templates via a Theme……

例如,您需要将主题文件夹中的图片作为“资产”上传。

对于每个网关,您可以启用自定义图像,或返回默认图像,使用挂钩在 woocommerce_gateway_icon 动作挂钩中的自定义函数:

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" ) . '"  />';
    elseif( $gateway_id == 'cheque' )
        $icon = '<img src="' . WC_HTTPS::force_https_url( "$path/cheque.png" ) . '"  />';
    elseif( $gateway_id == 'cod' )
        $icon = '<img src="' . WC_HTTPS::force_https_url( "$path/cod.png" ) . '"  />';
    elseif( $gateway_id == 'ppec_paypal' || 'paypal' )
        return $icon;

    return $icon;

代码进入您的活动子主题(或主题)的 function.php 文件或任何插件文件中。

在 WooCommerce 3 上测试并有效。


如何获取网关 ID: 继续 WC 设置 > 结帐(页面末尾)列在网关 ID 列中

【讨论】:

我无法让它在 WooCommerce v4 中工作。就好像钩子从来没有开过一样。如果我插入了echo 'test'; die();,那么我在任何地方都看不到该消息。 此钩子存在于支付网关get_icon() 方法,请参阅in Here...所以代码仍然适用于上一个 woocommerce 版本...

以上是关于在 Woocommerce 付款方式标题上添加图片的主要内容,如果未能解决你的问题,请参考以下文章

根据 Woocommerce 中的运输方式和付款方式添加费用

如何防止 Woocommerce 在结帐页面上选择默认付款方式?

在 WooCommerce 中隐藏运输和付款方式

根据 Woocommerce 订单状态禁用特定付款方式

在 Woocommerce 上添加单个产品订阅时的付款问题

WooCommerce 中的自定义付款方式