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:
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>]
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);
OK, got it working. Here is how:
- Copy the javascript file from:
/wp-content/plugins/woocommerce/assets/js/frontend/checkout.js
into:
/wp-content/themes/Your-Theme/woocommerce/js/checkout.js
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.
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.
I have the same problem and I have solved this way:
Override the checkout-js file with my child theme checkout-override-js.
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.