How to update shipping cost in cart dynamically (ajax) based on a custom field in WooCommerce

WooCommerce by default offers only a few basic options to decide the way shipping cost is calculated. In lot of cases these options may not be sufficient and you may require to create additional checkout fields based on which shipping cost calculations are to be done Here are a few scenarios Distance based shipping costs. In some countries e.g. district/territory field is required to decide shipping cost. For some peculiar products you may want the buyer to agree to some terms before the purchase can be made and extra cost added accordingly. Extra handling cost based on the type of packing selected Here are the steps to achieve such requirements Step 1: Create the necessary extra checkout fields e.g. district . Step 2: Create JQuery file to send the parameter as a checout parameter so that the necessary calculations can be made based on the custom checkout field update [crayon-599c7a501f503397048458/] Step 3: Peform calculation based on the custom checkout field and add the value to the session variable [crayon-599c7a501f50f991110457/] Step 4: Retreive the...
Read More

How to add custom checkout fields to WooCommerce order

Follow below steps to add custom checkout fields to WooCommerce. Scenario: We want to create a new address field named as territory. It will be a drop down field and will be used to decide the shipping cost. Create the new field/s on the checkout page [crayon-599c7a501fe5d775556049/] To create a similar field in shipping address, $fields array would need to be duplicated mentioning ['shipping'] instead of ['billing'] Now let us understand the parameters used in the above code Hook: Creating a new field uses woocommerce_checkout_fields hook type: Since this an drop down field the type of the field is select. If you want a mobile number field it could be a text field required: specify whether the field is compulsory or not. In our case we are calculating the shipping cost based on this field so it is compulsory. class:  form-row-wide: The new field will occupy the entire div width for the billing section form-row-first: The new field will appear in the first half area of the row (like the first name field) form-row-last:...
Read More