自定义WooCommerce中的“立即支付”按钮，以提升结账体验

2024-03-05 09:05:14

根据支付网关选项自定义 WooCommerce 结账上的“立即支付”按钮

导言

在电子商务领域，结账流程至关重要。客户在完成购买时会面临各种各样的决策，因此提供流畅且无缝的体验至关重要。“立即支付”按钮是结账过程中的一个关键元素，为客户提供了完成订单的明确行动号召（CTA）。

支付网关简介

在深入探讨如何自定义“立即支付”按钮之前，了解支付网关及其在结账流程中的作用非常重要。支付网关是第三方服务，可安全地处理客户付款并促进交易。WooCommerce 支持各种支付网关，包括 PayPal、Stripe 和 Authorize.Net。

自定义按钮文本

有时，根据所选的支付网关自定义“立即支付”按钮的文本非常有必要。例如，你可能希望为不同的支付方式提供不同的 CTA，如“立即使用 Stripe 支付”或“立即使用 PayPal 支付”。

要在 WooCommerce 中实现此功能，需要修改 woocommerce_order_button_text 函数。这个函数允许你根据订单对象和支付方式动态更改按钮文本。以下是修改后的代码示例：

add_filter( 'woocommerce_order_button_text', 'custom_order_button_text', 10, 2 );

function custom_order_button_text( $button_text, $order ) {
    $payment_method = $order->get_payment_method();

    switch ( $payment_method ) {
        case 'stripe':
            $button_text = '立即支付，使用 Stripe';
            break;
        case 'paypal':
            $button_text = '立即支付，使用 PayPal';
            break;
        case 'cod':
            $button_text = '立即支付，货到付款';
            break;
        default:
            $button_text = '立即支付';
    }

    return $button_text;
}

触发结账更新

自定义按钮文本后，你还需要触发 WooCommerce 结账更新，以反映你的更改。这可以通过添加以下代码片段来实现：

add_action( 'wp_footer', 'reload_checkout_on_payment_method_change' );

function reload_checkout_on_payment_method_change() {
    if ( is_checkout() && ! is_admin() ) {
        ?>
        <script>
        (function($) {
            $( 'form.checkout' ).on( 'change', 'input[name^="payment_method"]', function() {
                $( 'body' ).trigger( 'update_checkout' );
            });
        })(jQuery);
        </script>
        <?php
    }
}