How To Prevent Woocommerce from selecting default

Question

On Checkout page payment methods are presented and the first one is selected by default and automatically. I need to prevent the selection so no payment method is initially selected by WC.

I tried 2 things so far:

1. jQuery from Chrome console:

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

result:

[<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>​]

2. Remove the code from payment-method.php Woocommerce template file:

   checked( $gateway->chosen, false );

Neither is working. How to do it? Any snippet or suggestion for that, please?

EDIT:

Also tried this:

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

Answer 1

I have the same problem and I have solved this way:

1. Override the checkout-js file with my child theme checkout-override-js.

2. Then commented out the following code:

line: 48 : this.init_payment_methods();
line: 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' );
    },

line: 113: wc_checkout_form.init_payment_methods();

This will remove the default payment method selection. You can play with these code to make it to fit with your requirement.

Answer 2

OK, got it working. Here is how:

1. Copy the javascript file from:

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

into:

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

2. Open that newly created file and search for the following code:

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

It Should be around line 298. Go ahead and comment it out.

3. Add this to your functions.php file:

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

Now, the default payment method should not get checked when you refresh the Checkout page.