How To Prevent Woocommerce from selecting default payment method on Checkout page?

10 comments

1. 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.

2. 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.

3. There is not a good way of achieving this through a filter, this doesn’t work with latest versions of woocommerce 4.x:

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

   Instead of overwriting Woocommerce core JS files as the other anwers suggest, do this instead:

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

4. Complementing @Tosh answer, but adding the javascript callback so it runs every time checkout updates through 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();
       });
   });
   

   Tested and working.

5. I solved this problem with jQuery. All I do is write a function that is triggered by the scroll gesture after the page has loaded. It really works, anyone can add the following code to the bottom of the footer.php file in the theme files. Also, don’t forget to edit the payment_method_name according to you.

   jQuery(document).ready(function($){
     $(window).scroll(function() {
       if ($(this).scrollTop() > 0) {
         if (!this.done) {
           this.done = true;
           var $paymentCheckboxes = $('.woocommerce-checkout-payment').find('[name="PAYMENT_METHOD_NAME_HERE"]');
           $paymentCheckboxes.removeAttr('checked');
           $('.payment_box').hide();
           $('#PAYMENT_METHOD_NAME_HERE').prop("checked", false);
         }
       }
     });
   });

6. None of these solutions worked well for me.

   My solution was:
   Let WooCommerce behave like it wants to
   I added a payment option (In this case COD) to the top of the list.
   With CSS, I hid the entire <li>

   Then I added validation in ‘woocommerce_after_checkout_validation’.
   If the user chose this one, I simply returned an error of ‘no payment selected’

   Seems to be working just fine.

7. $(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();         
   }
   });
   

8. I used @Viktor Borítás answer and worked fine in WooCommerce 6.0.0.
   To overridde checkout.min.js and make it independent from updates i used the function below in child theme functions.php file.

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

   I needed to change Woocommerce default payment method on Checkout page (nothing else i tried did the job!) so didn’t commented this code:

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

   Instead i changed the value of payment_methods selection to something else.

9. Maybe such a crutch will help someone. In the file payment-method.php add
   <input type="radio" class="input-radio" name="payment_method" style="display:none;" checked>

10. In payment-method.php i simply commented out this part (line 23 as of WooCommerce 4.5.2)

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

    (If you have child theme, place the modified file into wp-content/themes/yourchildtheme/woocommerce/checkout/ directory.)

    and,

    Need to make changes in checkout.min.js (at wp-content/plugins/woocommerce/assets/js/frontend/) too. Commented this out this at line 80 (WooCommerce 4.5.2)

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

    This second file unfortunately can’t be overridden simply by copying it into the child theme folder. This solution isn’t update-proof yet. But maybe an OK base to continue with and make it update-proof on a smart and (as) native (as possible) way. Here are some solutions i found for that.

    p.s: this solution preserves the selected payment method even if customer changes zip code, address data etc.

Comments are closed.