WooCommerce updating the shipping method depending on the billing address field changes

In my online store, there are two standard shipping methods - Flat Rate and Free Delivery. I added a plugin for distance delivery.

Thus, when a customer fills in the City and Address fields when placing an order, new shipping methods must be added. But new deliveries are not visible until I select Flat Rate or Free Delivery.

As I understand it, I do not have automatic updating of shipping methods depending on the filling of the fields.

I found and edited this code:

add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);
function woocommerce_custom_update_checkout() {
    if (is_checkout()) {
    ?>
    <script type="text/javascript">
        jQuery( document ).ready(function( $ ) {            
            $('#billing_address_1').click(function(){
                jQuery('body').trigger('update_checkout', { update_shipping_method: true });
            });

        });
    </script>
    <?php
    }
}

But until I click on the filled field a second time, the delivery method is not updated.

I want to connect with AJAX. How can I edit the code so that the result of using AJAX is visible immediately without clicking on the filled field again?

Solutions

Currently you have to click on the billing_address_1 field in order to trigger the event listener and update your fields, because your code says so!

There are multiple ways to solve the issue. For example, instead of listening for a click event, you could add a different event listener.

To start off, you could listen for an on change event. This will happen when the value of the address field has been changed and the user clicked/tabbed out of the billing_address_1 field:

add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);

function woocommerce_custom_update_checkout()
{
  if (is_checkout()) {
?>
    <script type="text/javascript">

      jQuery(document).ready($ => {

        $('#billing_address_1').on('change', () => {

          $('body').trigger('update_checkout', {

            update_shipping_method: true

          });

        });

      });

    </script>

<?php

  }

}

Another event listener you could use here is input event listener. This will happen every time the value of billing_address_1 field is being changed. This will fire off even with a press of the space key, backspace key etc.

add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);

function woocommerce_custom_update_checkout()
{
  if (is_checkout()) {
?>
    <script type="text/javascript">

      jQuery(document).ready($ => {

        $('#billing_address_1').on('input', () => {

          $('body').trigger('update_checkout', {

            update_shipping_method: true

          });

        });

      });

    </script>

<?php

  }

}

Another event that could be helpful here is on blur event. This event will fire off when the user clicks/tabs out of the billing_address_1 field. The difference between this event and on change event is that when you listen for this event, update will happen even when the value of the billing_address_1 field has not been changed.

add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);

function woocommerce_custom_update_checkout()
{
  if (is_checkout()) {
?>
    <script type="text/javascript">

      jQuery(document).ready($ => {

        $('#billing_address_1').on('blur', () => {

          $('body').trigger('update_checkout', {

            update_shipping_method: true

          });

        });

      });

    </script>

<?php

  }

}

Now depending on how you'd like to structure your code and the logic behind it, you could use these events at the same time:

add_action('wp_footer', 'woocommerce_custom_update_checkout', 50);

function woocommerce_custom_update_checkout()
{
  if (is_checkout()) {
?>
    <script type="text/javascript">

      jQuery(document).ready($ => {

        $('#billing_address_1').on('change input blur', () => {

          $('body').trigger('update_checkout', {

            update_shipping_method: true

          });

        });

      });

    </script>

<?php

  }

}

How can I edit the code so that the result of using AJAX is visible immediately without clicking on the filled field again?

I think the last solution is what you're looking for! Using all of those event listeners together will make sure that your shipping method is getting updated constantly.

Similar questions

Woocommerce shipping method works only with billing address
I've created a very small and simple custom shipping method for WooCommerce, it basically calculates the shipping costs based on city and weight. Everything works fine using a billing address only, but if is select a "Shipping address" the checkout says that "Pick up in store" was selected. The full code is here: https://gist.github.com/albertojm/5...
How to edit Billing Address Label to Shipping Address in the thank you page and customer email?
In my WordPress site after customer place an order a thank you page will be shown This is my thank you page, at the bottom under customer details I want to edit billing address label to Shipping address This is my customer side email in this also at the bottom under customer details I want to change Billing address to Shipping Address I tried editi...
Wordpress: save custom billing field in account Billing address
Using Wordpress/Woocommerce. I have this code which adds a custom billing field in checkout page called: "NIF/CIF". It works fine but its value it not saved in the customer account "Billing Address" data. Once the customer makes a first order all billing address values are saved in his account: Address, State, Country, etc. But my custom field is n...
Add custom billing data to billing formatted address in Woocommerce admin orders
With Woocommerce, I would like see user meta data in admin order edit pages using woocommerce_localisation_address_formats hook. Based on "Woocommerce Edit order on admin dashboard" answer code, that I have lightly changed as follow: Where {billing_nombrecontacto} should be custom data to insert in admin order pages… But it doesn't make anything. T...
WooCommerce : Hide shipping calculator depending on selected shipping method
I'm trying to hide the shipping calculator on my cart page (using jQuery) depending on which shipping method is selected, first on page load, and then when a user selects another method or updates the cart, that would enable / disable new shipping methods but I can't seem to make it work. My Javascript / jQuery is pretty rusty so I don't know what ...
Woocommerce set billing field value equal to other billing field value
I want the billing field 'company email' to be equal to Billing E-mail address. I thought this would work but I only get an empty field:

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.