Woocommerce Question posted in
The official Woocommerce documentation can be found here.

WooCommerce hide billing address if Cash on Delivery Chosen

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 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
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search