Woocommerce checkout page show shipping address first then billing address?

Question

In checkout page of Woocommerce i need to change functionality of address means first i need shipping address fields then billing address fields.

Billing is shown first and then shipping shown if checkbox checked like below here see image.

Billing address first

now i need to change it like shipping address show first when i check check box it show me billing address. see below image.

Shipping address first

i need this change without changing any woocommerce file means in theme folder also validation and jquery effect is also needed.

can any one plz help me to make it??

advance thanks

code snippets: this is not solution so plz do not write this because it change place not functionality and check box. plz see screenshot that i post.

Billing address first

<?php do_action( 'woocommerce_checkout_billing' ); ?>
<?php do_action( 'woocommerce_checkout_shipping' ); ?>

Shipping address first

<?php do_action( 'woocommerce_checkout_shipping' ); ?>
<?php do_action( 'woocommerce_checkout_billing' ); ?>

still this question is unsolved, jquery is not good solution for this because checkout run as ajax and validation also. if any one have good solution then provide so other can help from here.

Answer 1

If you are using child theme then it could be done easily.

STEPS:

1) Copy form-checkout.php from wp-content->plugins->woocommerce->templates->checkout and paste it inside wp-content\themes\your_theme\woocommerce\myaccount.

2) Change this

<div class="col2-set" id="customer_details">
     <div class="col-1">
          <?php do_action( 'woocommerce_checkout_billing' ); ?>
     </div>

      <div class="col-2">
           <?php do_action( 'woocommerce_checkout_shipping' ); ?>
       </div>
</div>

to

<div class="col2-set" id="customer_details">
     <div class="col-1">
          <?php do_action( 'woocommerce_checkout_shipping' ); ?>    
     </div>

      <div class="col-2">
           <?php do_action( 'woocommerce_checkout_billing' ); ?>               
       </div>
</div>

NOTE: This solution works with only child theme.