【问题标题】:Change Pay button with image on checkout based on Woocommerce chosen payment method根据 Woocommerce 选择的付款方式,在结帐时更改带有图像的付款按钮
【发布时间】:2020-05-28 15:57:30
【问题描述】:

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

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;
}

提前感谢您的帮助!

【问题讨论】:

    标签: php wordpress woocommerce payment-gateway hook-woocommerce


    【解决方案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.
    

    上面的脚本将添加一个span 标记,其中包含payment-icon 类和所选付款方式的ID。然后,您可以使用 css 将您的图标添加为此跨度中的背景。

    【讨论】:

    • 谢谢先生。雷格尔。我了解函数和变量是如何工作的,但我不了解如何将它们插入或集成到我的函数中,再次感谢您的帮助...
    猜你喜欢
    • 2018-08-30
    • 2018-06-06
    • 2017-12-12
    • 1970-01-01
    • 1970-01-01
    • 2018-01-26
    • 1970-01-01
    • 2019-08-29
    相关资源
    最近更新 更多