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

Posted 2023-02-22

【中文标题】如何防止 Woocommerce 在结帐页面上选择默认付款方式？

【英文标题】：How To Prevent Woocommerce from selecting default payment method on Checkout page?

【发布时间】：2015-11-05 04:38:06

【问题描述】：

结帐页面上会显示付款方式，默认情况下会自动选择第一个付款方式。我需要阻止选择，因此 WC 最初没有选择任何付款方式。

到目前为止，我尝试了 2 件事：

来自 Chrome 控制台的 jQuery：

jQuery('.payment_methods input.input-radio').prop('checked', false);

结果：

[<input id=​"payment_method_paypal" type=​"radio" class=​"input-radio" name=​"payment_method" value=​"paypal" data-order_button_text=​"Proceed to PayPal" checked=​"checked">​, 
<input id=​"payment_method_accountfunds" type=​"radio" class=​"input-radio" name=​"payment_method" value=​"accountfunds" data-order_button_text>​]

从payment-method.php Woocommerce模板文件中删除代码：

检查（$gateway->选择，假）；

两者都不起作用。怎么做？请问有什么sn-p或建议吗？

编辑：

也试过这个：

function wpchris_filter_gateways( $gateways )

global $woocommerce;

foreach ($gateways as $gateway) 
    $gateway->chosen = 0;

return $gateways;


add_filter( 'woocommerce_available_payment_gateways', 'wpchris_filter_gateways', 1);

【问题讨论】：

试试removeAttr('checked') ?

也试过了...与上面的结果没有什么不同。

你为什么要这样做？让人们在不选择付款方式的情况下继续操作会不会造成更多问题？

我的客户最初不需要选择任何方法。可能是因为我们正在向其中一种付款方式添加手续费。因此，如果最初没有选择任何方法，那么客户将看到价格从一种付款方式到另一种付款方式的变化。

看起来有些东西正在覆盖我的更改。当我刷新结帐页面时，我看到没有选择任何收音机，然后发生了变化。

【参考方案1】：

好的，开始工作了。方法如下：

从以下位置复制 javascript 文件：

/wp-content/plugins/woocommerce/assets/js/frontend/checkout.js

进入：

/wp-content/themes/Your-Theme/woocommerce/js/checkout.js

打开新创建的文件并搜索以下代码：

    if ($('.woocommerce-checkout').find('input[name=payment_method]:checked').size() === 0) 
        $('.woocommerce-checkout').find('input[name=payment_method]:eq(0)').attr('checked', 'checked');
    

它应该在第 298 行左右。继续将其注释掉。

将此添加到您的functions.php文件中：

    function wpchris_override_woo_checkout_scripts() 
        wp_deregister_script('wc-checkout');
        wp_enqueue_script('wc-checkout', get_stylesheet_directory_uri() . '/woocommerce/js/checkout.js', array('jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n'), null, true);
    
    add_action('wp_enqueue_scripts', 'wpchris_override_woo_checkout_scripts');

    function wpchris_unselect_payment_method() 
        echo "<script>jQuery( '.payment_methods input.input-radio' ).removeProp('checked');</script>";
    
    add_action('woocommerce_review_order_before_submit','wpchris_unselect_payment_method' );

    function wpchris_filter_gateways( $gateways )
        global $woocommerce;

        foreach ($gateways as $gateway) 
            $gateway->chosen = 0;
        

        return $gateways;
    
    add_filter( 'woocommerce_available_payment_gateways', 'wpchris_filter_gateways', 1);

现在，当您刷新“结帐”页面时，不应检查默认付款方式。

【讨论】：

三个cmets。首先：在第 4 行，你说get_stylesheet_directory_uri() . '/woocommerce/js/checkout.json_encode'，我猜你的意思是.js 而不是.json_encode？其次：当您已经设置$gateway->chosen = 0 时，是否还需要取消选择 jQuery？最后：而不是$gateway->chosen = 0;，我建议$gateway->chosen = false; 指示真/假值而不是实际整数（这可能导致对变量chosen 的不同解释）。

【参考方案2】：

我有同样的问题，我已经解决了：

用我的子主题 checkout-override-js 覆盖 checkout-js 文件。

然后注释掉以下代码：

第 48 行：this.init_payment_methods(); 第 58 行：

init_payment_methods: function() 
            var $payment_methods = $( '.woocommerce-checkout' ).find( 'input[name="payment_method"]' );

        // If there is one method, we can hide the radio input
        if ( 1 === $payment_methods.size() ) 
            $payment_methods.eq(0).hide();
        

        // If there are none selected, select the first.
        if ( 0 === $payment_methods.filter( ':checked' ).size() ) 
            $payment_methods.eq(0).attr( 'checked', 'checked' );
        

        // Trigger click event for selected method
        $payment_methods.filter( ':checked' ).eq(0).trigger( 'click' );
    ,

线路：113：wc_checkout_form.init_payment_methods();

这将删除默认的付款方式选择。您可以使用这些代码使其符合您的要求。

【参考方案3】：

没有通过过滤器实现此目的的好方法，这不适用于最新版本的 woocommerce 4.x：

//DEPRECATED. Will not work with woocommerce 4.x and above    
add_filter( 'pre_option_woocommerce_default_gateway' . '__return_false', 99 );

不要像其他人建议的那样覆盖 Woocommerce 核心 JS 文件，而是这样做：

var $paymentCheckboxes = $( ".woocommerce-checkout-payment" ).find( '[name="payment_method"]');
$paymentCheckboxes.attr('checked', false);

【讨论】：

嘿，你会把这段代码放在哪个文件中，在任何自定义 js 中？请添加更多上下文。干杯

嗨@ViktorBorítás，任何被执行的文件都可以工作，只要确保你把它包装成一个 $(document).ready(function() ) 像 svelandia 回答

我按照您的指示尝试了，但对我来说不起作用。也许这取决于我放置它的位置，并且我的扩展仍然被核心 js 代码通过某些内部优先级顺序覆盖？尝试使用干净的镀铬 + 边缘。你测试过这个吗？

更新：现在看来我让它工作了，但前提是我将你的代码包装成一个至少大约 1500 毫秒的 setTimeout() ..（实际上超出了（核心） checkout.min.js 中的 setTimeout 1000 触发）。

【参考方案4】：

补充 @Tosh 答案，但添加 javascript 回调，以便每次通过 ajax 更新结帐时运行。

jQuery(document).ready(function( $ )
    $( document ).on( 'updated_checkout', function() 
        var $paymentCheckboxes = $( ".woocommerce-checkout-payment" ).find( '[name="payment_method"]');
        $paymentCheckboxes.attr('checked', false);
        $('.payment_box').hide();
    );
);

经过测试并且可以正常工作。

【讨论】：

所以这最初确实有效，但是当客户选择一种付款方式时，它不会保持选中状态，这使得无法结帐。

这不是真的。用户执行的最后一步是选择付款方式。只要您不在结帐表单中编辑您的地址，它就会重新被选中。

对不起，我不明白。我在结帐时将其激活，当我选择一种付款方式时，它会打开，但随后会自行取消选择。所以我无法选择结帐的付款方式。

这个 JS 的作用是在每次结帐时订单详情更新时添加一个回调，例如，当您在结帐表单中输入您的地址时它会更新...如果选择付款，此代码有效方法是结帐的最后一步。

@AlexBanks 也许this solution 会为您解决问题。

【参考方案5】：

这些解决方案都不适合我。

我的解决方案是： 让 WooCommerce 表现得像它想要的那样 我在列表顶部添加了一个付款选项（在本例中为 COD）。 使用 CSS，我隐藏了整个 <li>

然后我在“woocommerce_after_checkout_validation”中添加了验证。 如果用户选择了这个，我只是返回了一个“未选择付款”的错误

似乎工作得很好。

【讨论】：

我想建立在这个绝妙的想法之上。我不会重用现有的支付方式，而是创建一个新的支付网关插件，在 process_payment() 方法中我只需要 wc_add_notice('custom error message', 'error')。这将允许通过启用插件在多个商店重用代码。您也不必担心 WooCommerce 更新。

【参考方案6】：

$(document).on('updated_checkout',function() 
$('input[type=radio][name=payment_method]').change(function() 
$('body').addClass('payment_selection_made');
);
if (!$('body').hasClass('payment_selection_made'))      
$('.woocommerce-checkout-payment input[name="payment_method"]').attr('checked', false);
$('.woocommerce-checkout-payment .payment_box').hide();         

);

【参考方案7】：

我使用了@Viktor Borítás 的答案，并且在 WooCommerce 6.0.0 中运行良好。 为了覆盖 checkout.min.js 并使其独立于更新，我在子主题 functions.php 文件中使用了以下函数。

//override WooCommerce Frontend Script (checkout.min.js)
add_action('wp_enqueue_scripts', 'override_woo_frontend_scripts');
function override_woo_frontend_scripts() 
    wp_deregister_script('wc-checkout');
    wp_enqueue_script('wc-checkout', get_stylesheet_directory_uri() . '/woocommerce/js/checkout.min.js', array('jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n'), null, true);

我需要更改结帐页面上的 Woocommerce 默认付款方式（我没有尝试过其他任何方法！）所以没有评论了这段代码：

if ( 0 === $payment_methods.filter( ':checked' ).length ) 
                $payment_methods.eq(0).prop( 'checked', true );

相反，我将 payment_methods selection 的值更改为其他值。

【参考方案8】：

在payment-method.php 中，我只是注释掉了这部分（WooCommerce 4.5.2 的第 23 行）

<?php //checked( $gateway->chosen, true ); ?>

（如果您有子主题，请将修改后的文件放入wp-content/themes/yourchildtheme/woocommerce/checkout/ directory。）

和，

也需要在checkout.min.js（wp-content/plugins/woocommerce/assets/js/frontend/）中进行更改。在第 80 行对此进行了注释（WooCommerce 4.5.2）

/*if ( 0 === $payment_methods.filter( ':checked' ).length ) 
                $payment_methods.eq(0).prop( 'checked', true );*/

不幸的是，不能简单地通过将第二个文件复制到子主题文件夹中来覆盖它。此解决方案还不是防更新的。但也许是一个可以继续使用并使其以智能和（尽可能）本机（尽可能）方式进行更新的基础。 Here are some solutions i found for that.

p.s：即使客户更改邮政编码、地址数据等，此解决方案也会保留所选的付款方式。

【讨论】：

-1 的原因？