1

In WooCommerce I'd like to be able to hide the Billing Address fields when Cash on Delivery is chosen since there is no need to fill out the address. But if the customer chooses credit card, the billing address should appear.

I really have no idea where to start with this so I don't have any code.

2 Answers2

2

I was able to expand a little on the code above...

// Make Billing Address not required
add_filter( 'woocommerce_default_address_fields' , 'filter_default_address_fields', 20, 1 );
function filter_default_address_fields( $address_fields ) {
    // Only on checkout page
    if( ! is_checkout() ) return $address_fields;

    // All field keys in this array
    $key_fields = array('country','company','address_1','address_2','city','state','postcode');

    // Loop through each address fields (billing and shipping)
    foreach( $key_fields as $key_field )
        $address_fields[$key_field]['required'] = false;

    return $address_fields;
}

Hide billing address if COD or show if Credit Card

jQuery(function(){
    jQuery( 'body' )
    .on( 'updated_checkout', function() {
          usingGateway();

        jQuery('input[name="payment_method"]').change(function(){
            console.log("payment method changed");
              usingGateway();

        });
    });
});


function usingGateway(){
    console.log(jQuery("input[name='payment_method']:checked").val());
    if(jQuery('form[name="checkout"] input[name="payment_method"]:checked').val() == 'cod'){
        jQuery('.woocommerce-billing-fields #billing_company_field, .woocommerce-billing-fields #billing_country_field, .woocommerce-billing-fields #billing_address_1_field, .woocommerce-billing-fields #billing_address_2_field, .woocommerce-billing-fields #billing_city_field, .woocommerce-billing-fields #billing_state_field, .woocommerce-billing-fields #billing_postcode_field, .woocommerce-shipping-fields').hide();
        //Etc etc
    } else {
                jQuery('.woocommerce-billing-fields #billing_company_field, .woocommerce-billing-fields #billing_country_field, .woocommerce-billing-fields #billing_address_1_field, .woocommerce-billing-fields #billing_address_2_field, .woocommerce-billing-fields #billing_city_field, .woocommerce-billing-fields #billing_state_field, .woocommerce-billing-fields #billing_postcode_field, .woocommerce-shipping-fields').show();
    }
}  
0

Firstly billing address is a required filed for woo commerce so, even though you hide them it will not allow you to checkout. So first you need to make it "not required" it can be done using hooks

Make checkout addresses fields not required in WooCommerce

Then you can run the query

jQuery(function(){
    jQuery( 'body' )
    .on( 'updated_checkout', function() {
          usingGateway();

        jQuery('input[name="payment_method"]').change(function(){
            console.log("payment method changed");
              usingGateway();

        });
    });
});


function usingGateway(){
    console.log(jQuery("input[name='payment_method']:checked").val());
    if(jQuery('form[name="checkout"] input[name="payment_method"]:checked').val() == 'COD'){
        $('.woocommerce-billing-fields').hide();
        //Etc etc
    }
}  
Ram
  • 319
  • 1
  • 2
  • 16