0

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.

  • 1
    This is something much more complicated that requires jQuery and Ajax… Also you should rename your field simply sub_area, as Woocommerce prepend "billing_" to it, on billing section and "shipping_" on shipping section… You need to do something like on this answers for example… – LoicTheAztec Apr 28 at 23:28
  • Hello Ajax or on change event on field is already firing as i have update_totals_on_change class on the element. For field name, i already have shipping_ added in field name. th_sub_area is just the HTML ID used in DOM. I need hook or filter that is fired when a field is changed, Thank you – Optimum Creative Apr 29 at 6:46
  • Ok.. Than plz provide guidelines. I have drop down field value in ajax call back. plz help me on how can i pass the value to 'woocommerce_before_calculate_totals' action – Optimum Creative Apr 29 at 10:51
  • You need to use something like in stackoverflow.com/a/48160586/3730754 targeting in jQuery your dropdown on "blur" event to trigger an ajax request… So try yourself, update your question with the code that you tried… – LoicTheAztec Apr 29 at 11:01
  • thank @LoicTheAztec This helped a lot. My work has done.. Thank you – Optimum Creative Apr 29 at 12:35
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;
}
  • Hello rizwan. this approach worked fine for me. Thank you – Optimum Creative May 29 at 6:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.