title: Updating Shipping Rate on checkout page on WooCommerce site
body: <p>We are having a custom code to allow end user select city, date and time of his delivery. The delivery rate should change according to the city. City select box is on the checkout page.</p>
  
  <p>Changing the city triggers ajax that change successfully the charge for the delivery that displayed under order review section. So far so good.
  Unfortunately, the price does not reach the order after submitting the order. It gets lost somewhere.</p>
  
  <p>A hint may be in the fact that the same city select box is on the product page as well, and if a user does select it when adding to cart, and just then goes to checkout, the delivery rate is displayed and does not got lost when submitting the order.</p>
  
  <p>Is there any refresh needs to be triggered in order for the shipping rate to be updated?</p>
  
  <p><strong>The function that updates the rates (successfully)</strong></p>
  
  <pre><code>function adjust_shipping_rate( $rates ){
      global $woocommerce;
  
          foreach ($rates as $rate) {
              $cost = $rate-&gt;cost;
              $rate-&gt;cost = $_COOKIE['shipping_city_cost'];
          }
          return $rates;
  }
  add_filter( 'woocommerce_package_rates', 'adjust_shipping_rate', 50, 1 );
  </code></pre>
  
  <p><strong>UPDATE 21-05-2017</strong></p>
  
  <p>This is how the cookie is updated: Once the select box is changed, async ajax call is fired and execute the following PHP code.</p>
  
  <pre><code>function get_and_set_shipping_rate(){
      $shipping_city = $_POST['city'];
      $shipping_cost = get_shipping_cost_by_city($shipping_city);
      setcookie('shipping_city_cost', $shipping_cost, time() + (86400 * 30), '/'); 
      $_COOKIE['shipping_city_cost'] = $shipping_cost;
      echo 'Shipping cost updated: '.$shipping_city.' : '.$shipping_cost;
  }
  
  add_action( 'wp_ajax_get_and_set_shipping_rate', 'get_and_set_shipping_rate' );
  add_action( 'wp_ajax_nopriv_get_and_set_shipping_rate', 'get_and_set_shipping_rate' );
  </code></pre>
  
  <p><strong>Here is the ajax call:</strong></p>
  
  <pre><code>jQuery(document).on('change', '#shipping_delivery_city', function(){
       var requested_city = jQuery(this).val();
          var data = {
                  'action': 'get_and_set_shipping_rate',
                  'city': requested_city
              };
  
              jQuery.ajax({
                  type: "POST",
                  url: shipping_dates.ajax_url,
                  data: data,
                  async: false,
                  success: function (response) {
                      console.log(response);
                  }
              });
  });
  </code></pre>