What Hook/Action is performed when a field in checkout form is changed in WooCommerce

Question

I have added a custom field in WooCommerce checkout like below:

function oc_add_checkout_fields( $fields ) {
    $fields['shipping_sub_area'] = array(
        'label'    => __( 'Sub Area' ),
        'type'     => 'select',
        'class'    => array( 'form-row-wide', 'update_totals_on_change' ),
        'priority' => 68,
        'required' => true,
        'id'       => 'th_sub_area',
        'options'  => array(
            ''        =>'Select',
            'Clifton' => 'Clifton1', 
            'DHA'     => 'DHA1',
        ),
        'custom_attributes' => array(),
        'validate'          => array(),
        'default'           => '',
    );

    return $fields;
}
add_filter( 'woocommerce_default_address_fields', 'oc_add_checkout_fields' );

When this field is changed, a pre loader is shown on the your order section in checkout form. I want to perform following: If selected value in above field is Clifton1 then add shipping charges 100 to the cart else add shipping charges 300 to the cart,

I have tried different hooks and actions but I am unable to get the value of custom added field inside the hook. For example I have used following filter:

function filter_woocommerce_cart_shipping_packages( $array ) { 
    // make filter magic happen here... 
    //die('I am hre');
    echo '<pre>';
    print_r($array);
    return $array; 
}; 

// add the filter 
add_filter( 'woocommerce_cart_shipping_packages', 'filter_woocommerce_cart_shipping_packages', 10, 1 ); 

In $array, I am getting:

[destination] => Array
    (
        [country] => PK
        [state] => TA
        [postcode] => 
        [city] => fds
        [address] => fsdf
        [address_1] => fsdf
        [address_2] => fsd
    )

But I am not getting value of shipping_sub_area or th_sub_area.

Answer 1

You will need to use ajax to set values in WooCommerce session variables first. Once your values are set in wc()->session, then you can access them anywhere within the WooCommerce hooks or actions.

See below code example:

/*Ajax Call Back*/
add_action( 'wp_ajax_my_action', 'my_action_callback' );

$shipping_charges;
function my_action_callback() {
    $shipping_charges =  $_POST['shipping_charges'];
    WC()->session->set("th_shipping_charges", $shipping_charges );
}

/*Ajax code to get values from the form and post to Wordpress backend*/

add_action( 'wp_footer', 'my_footer_code' );

function my_footer_code() { 
$html='
    jQuery("#th_sub_area").change(function(){
    var shipping_charges;
        var selected_sub_area = jQuery("#th_sub_area").find(":selected").val();
        if(selected_sub_area='DHA'){
               var shipping_charges= 150; 
        }

       / In front end of WordPress we have to define ajaxurl /  
       var ajaxurl = "'.admin_url('admin-ajax.php').'";

       var data = {
         "action": "my_action",
       "shipping_charges" : shipping_charges,
                };

                jQuery.post(ajaxurl, data, function(response) {
                    jQuery("body").trigger("update_checkout");
                });
    });
';
echo $html;
}