如何 устранить 重复的“-OR-”分隔符在 WooCommerce 的 Stripe 快捷结帐中？
2024-06-14 17:22:17
在 WooCommerce 上使用 Stripe 时 устранить Google Pay/Apple Pay 中重复的“-OR-”分隔符
简介
如果你使用 Stripe 的快捷结帐功能和 WooCommerce 作为你的电子商务平台，你可能会遇到一个问题：当你在结帐流程的自定义步骤中移动快捷结帐按钮时，“-OR-”分隔符会出现两次。本文将讨论这个问题，并提供两种解决方法，以消除重复的分隔符。
问题
默认情况下，Stripe 的快捷结帐按钮显示在结帐流程的“客户详细信息”步骤之前。为了更好地将其与你的多步骤结帐流程整合，你可以使用 PHP 在 functions.php 文件中移动按钮。以下是用于自定义放置的 PHP 代码：
// 移动 Stripe Apple/Google Pay 按钮
function move_stripe_payment_request_button() {
if (class_exists('WC_Stripe_Payment_Request')) {
remove_action('woocommerce_checkout_before_customer_details', array(WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_html'), 1);
remove_action('woocommerce_checkout_before_customer_details', array(WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_separator_html'), 2);
add_action('woocommerce_review_order_before_payment', array(WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_html'), 1);
add_action('woocommerce_review_order_before_payment', array(WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_separator_html'), 2);
}
}
add_action('init', 'move_stripe_payment_request_button');
此代码将按钮重新定位到“订单审查”步骤之前。但是，这会导致另一个问题：分隔符“-OR-”被复制，如下面的屏幕截图所示。
解决方法
要解决此问题，有两种主要方法：
方法 1：使用 CSS 和 JavaScript
使用 CSS 和 JavaScript 在页面加载后隐藏重复的分隔符，该方法具体如下：
- 添加以下 CSS 代码以隐藏第二个分隔符：
.wc-stripe-payment-request-container:nth-of-type(2) {
display: none;
}
- 添加以下 JavaScript 代码以动态删除第二个分隔符：
(function ($) {
$(document).ready(function () {
$('.wc-stripe-payment-request-container:nth-of-type(2)').remove();
});
})(jQuery);
方法 2：调整挂钩优先级和操作
调整 add_action() 函数中的优先级以管理执行顺序并修改添加或删除操作的方式，具体如下：
- 修改用于添加第二个分隔符的
add_action()函数，如下所示：
add_action('woocommerce_review_order_before_payment', array(WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_separator_html'), 9);
将优先级从 2 更改为 9，使其在用于添加按钮的函数之后执行。
- 修改用于移除第一个分隔符的
remove_action()函数，如下所示：
remove_action('woocommerce_checkout_before_customer_details', array(WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_separator_html'), 1);
将优先级从 1 更改为 0，使其在用于添加按钮的函数之前执行。
结论
通过使用上述方法之一，你可以消除 WooCommerce 上 Stripe 的 Google Pay/Apple Pay 支付选项中重复的“-OR-”分隔符。根据你的特定设置，选择最适合你的方法。
常见问题解答
-
为什么会出现重复的分隔符？
当将 Stripe 的快捷结帐按钮移动到“订单审查”步骤之前时，默认放置按钮的分隔符也随之移动。但是，原始的分隔符仍保留在“客户详细信息”步骤中，导致重复。 -
哪个解决方法更好？
两种解决方法都有效。CSS 和 JavaScript 方法需要添加额外的代码，但它可以更灵活地调整样式。调整挂钩优先级和操作的方法更简单，但它依赖于特定的函数顺序。 -
为什么使用 CSS 和 JavaScript 方法时重复的分隔符仍然可见？
确保在你的主题或子主题的 style.css 文件中包含了 CSS 代码，并且已经正确地注册了 JavaScript 代码。 -
为什么使用调整挂钩优先级和操作的方法时重复的分隔符仍然可见？
确保已正确修改了优先级并删除了额外的分隔符函数。 -
是否还有其他方法可以解决这个问题？
有，你可以考虑使用自定义结帐模板或创建自定义结帐页面来完全控制结帐流程的布局和内容。
