根据 Woocommerce 选择的付款方式，在结帐时更改带有图像的付款按钮

Question

通过这个功能我可以改变支付按钮上的文字。我想插入一张小图片。

add_filter( 'woocommerce_available_payment_gateways', 'woocommerce_available_payment_gateways' );
function woocommerce_available_payment_gateways( $available_gateways ) {
    if (! is_checkout() ) return $available_gateways;  // stop doing anything if we're not on checkout page.
    if (array_key_exists('paypal_express',$available_gateways)) {
        // Gateway ID for Paypal is 'paypal'. 
         $available_gateways['paypal_express']->order_button_text = __( 'PAY', 'woocommerce' );

    }
    return $available_gateways;
}

在此先感谢您的帮助！

Answer 1

因为在前端，按钮文本将通过使用 jQuery 的 .text() 函数来更改，添加 html 之类的 img 标签在这里不起作用。

我建议您使用 javascript 和 jQuery。它应该是这样的：

$( document.body ).on( 'payment_method_selected', function(){
    var selectedPaymentMethod = $( '.woocommerce-checkout input[name="payment_method"]:checked' ).attr( 'id' );
    $( '#place_order' ).find('.payment-icon');
    $( '#place_order' ).prepend('<span class="payment-icon '+ selectedPaymentMethod +'"></span>'); // or any element like from font-awesome.
});
$( document.body ).trigger( 'payment_method_selected' ); // this will trigger on page load, act as initialize the icon.

上面的脚本将添加带有类 payment-icon 的 span 标签和所选付款方式的 ID。然后，您可以使用 css 在此范围内添加您的图标作为背景。

根据 Woocommerce 选择的付款方式，在结帐时更改带有图像的付款按钮

Change Pay button with image on checkout based on Woocommerce chosen payment method

php

wordpress

payment-gateway

woocommerce

hook-woocommerce