When you land on the WooCommerce Checkout page, one payment option (radio button) will be selected by default. this is defined based on the last payment method (logged in customer), or the payment gateway sorting (logged out customer).
Often it happens, however, that customers forget to change their payment selection, and therefore end up checking out with the wrong payment option. Which means, more admin work.
With this simple snippet, we will inject some JS in the Woo Checkout page, so that on load, all payment method radio inputs will be unchecked. Super easy!
PHP Snippet: Remove Default Payment Gateway On WooCommerce Classic Checkout Page Load
The purpose of the function is to uncheck the default payment method and hide the corresponding payment method description box if there is more than one payment option available.
In summary, when the WooCommerce checkout page is loaded or updated, this code checks the number of available payment options. If there is more than one option, it unchecks any currently checked payment method and hides the corresponding payment method description box. This can be useful to prevent a default payment method from being pre-selected when there are multiple payment options available during the checkout process.
/**
* @snippet No Default Payment @ Woo Checkout
* @tutorial https://businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 9
* @community Join https://businessbloomer.com/club/
*/
add_action( 'woocommerce_before_checkout_form', 'bbloomer_uncheck_default_payment_gateway' );
function bbloomer_uncheck_default_payment_gateway() {
wc_enqueue_js( "
// FLAG TO TRACK IF WE'VE ALREADY RUN ON INITIAL LOAD
var initialLoadComplete = false;
// ONLY RUN ON CHECKOUT PAGE LOAD
$( document.body ).on( 'updated_checkout', function() {
// SKIP IF WE'VE ALREADY RUN ON INITIAL LOAD
if ( initialLoadComplete ) return false;
// ONLY RUN IF MORE THAN 1 PAYMENT OPTION
if ( $( '.woocommerce-checkout' ).find( 'input[name=\'payment_method\']' ).length === 1 ) {
initialLoadComplete = true;
return false;
}
// UNCHECK CHECKED PAYMENT METHOD
$('input[name=\'payment_method\']').prop('checked', false);
// CLOSE CHECKED PAYMENT DESCRIPTION BOX
$('div.payment_box').hide();
// MARK INITIAL LOAD AS COMPLETE
initialLoadComplete = true;
});
" );
}
Hi! The code works when the checkout page is first displayed as no payment method is selected by default. However, the moment the user types in their delivery address, shipping method updates and, immediately, the first payment option is automatically selected, totally reversing the effect of your snippet. Any idea on what to do? Thanks.
Gotcha. Took me a while, but maybe I’ve got a solution: no payment method should be automatically selected, unless you manually select it. Until then it won’t have a selection. Before I update this snippet, can you maybe help me with testing? Here’s the code:
add_action( 'woocommerce_before_checkout_form', 'bbloomer_uncheck_default_payment_gateway' ); function bbloomer_uncheck_default_payment_gateway() { wc_enqueue_js( " var userHasChosenPayment = false; // Detect manual payment method click $( document ).on( 'change', 'input[name=\"payment_method\"]', function() { userHasChosenPayment = true; }); $( document.body ).on( 'updated_checkout', function() { if ( ! userHasChosenPayment ) { if ( $( 'input[name=\"payment_method\"]' ).length > 1 ) { $( 'input[name=\"payment_method\"]' ).prop( 'checked', false ); $( 'div.payment_box' ).hide(); } } }); "); }First of all, thank you so much for all your amazing WooCommerce customizations — your snippets have helped me and countless others streamline our stores!
I tested your “No Default Payment @ Woo Checkout” snippet and noticed an issue: the code keeps unchecking the selected payment method every time the checkout updates via AJAX — for example, when a user selects a payment method. This happens because the updated_checkout event also fires when a payment method is chosen, not just on page load.
As a result, users can’t actually select a payment method, since it keeps getting automatically unchecked.
You’re 100% right! I’ve now edited the snippet, can you give it another go and let me know please?
Yes! It works now, thanks a lot for the quick fix.
I did notice a small issue though: when I first land on the checkout page, the default payment method is still briefly shown and then gets unselected (which I assume is expected behavior).
However, the fees associated with that pre-selected payment method still get applied — even though the payment method itself is later unselected by the snippet. It’s almost like WooCommerce is calculating fees before the uncheck script runs.
At first I thought this might be a limitation in WooCommerce, but I’ve seen some sites that don’t show a default payment method at all — not even briefly — and don’t apply any fees until a payment method is actually selected. So I think it might be possible to refine the snippet further to match that behavior.
Just wanted to share in case it helps! Let me know if I can test anything further.
Thank you Youssef. Can you please test this new version and see if it makes any difference: https://www.businessbloomer.com/woocommerce-no-default-payment-checkout-page/#comment-1025236