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.

Answer 2

Your requirement was unique,challenging and tricky too. So tried a code to achieve the purpose.

To achieve this kind of functionality have done all the coding in jQuery so make sure you try the same in console first and then after sucessful working of the same add the code in any js which loads on checkout page or add your on js for checkout page.

jQuery('.shipping_address').css('display','block');

var bigHtml = jQuery(".woocommerce-billing-fields").children().not("h3, .create-account").detach();
var smallHtml = jQuery('.shipping_address').detach();
jQuery('.woocommerce-billing-fields').append(smallHtml);
jQuery('#order_comments_field').before(bigHtml);

jQuery('.woocommerce-billing-fields h3').text('Shipping Details');
jQuery('h3#ship-to-different-address').replaceWith('<h3 id="ship-to-billing-different-address"><label for="ship-to-billing-different-address-checkbox" class="checkbox">Ship to billing address?</label><input id="ship-to-billing-different-address-checkbox" class="input-checkbox" name="ship_to_different_billing_address" value="1" type="checkbox"></h3>');
jQuery(".woocommerce-shipping-fields").children().not("h3,#order_comments_field").hide();

jQuery("#ship-to-billing-different-address-checkbox").click(function(event) {
    if (jQuery(this).is(":checked"))
        jQuery(".woocommerce-shipping-fields").children().not("h3,#order_comments_field").show();
    else
        jQuery(".woocommerce-shipping-fields").children().not("h3,#order_comments_field").hide();
});

I hope my time and work sent in this issue works and fulfills you requirements.

Answer 3

If you already know how to use the woocommerce templates then the easiest way to make this happen without having to rework all the backend code and not having to rewrite jquery is by making copies of three woocommerce templates for modification. This is for modifications to the default woocommerce templates.

checkout > form-checkout.php

checkout > form-billing.php

checkout > form-shipping.php

Changes to make on each template:

checkout > form-checkout.php

move <?php do_action( 'woocommerce_checkout_billing' ); ?> on line 40 to line 44 and move <?php do_action( 'woocommerce_checkout_shipping' ); ?> on line 44 to line 40.

Now on the other two templates there will be some code swapping.

from checkout > form-billing.php

on line 29 change <?php _e( 'Billing &amp; Shipping', 'woocommerce' ); ?> to <?php _e( 'Shipping &amp; Billing', 'woocommerce' ); ?>

on line 33 change <?php _e( 'Billing details', 'woocommerce' ); ?> to <?php _e( 'Shipping details', 'woocommerce' ); ?>

This is where the swapping of code comes in:

now cut lines 27 through 35 and paste it into checkout > form-shipping.php on line 25. Do not loose your place on lines on checkout > form-shipping.php you will need to cut lines 25 through 33 and paste it into checkout > form-billing.php on line 27.

NOTE: this exchange of code on both templates

should be above this <?php do_action( 'woocommerce_before_checkout_billing_form', $checkout ); ?> on checkout > form-billing.php template and above <?php do_action( 'woocommerce_before_checkout_shipping_form', $checkout ); ?> on checkout > form-shipping.php template.

Now from checkout > form-billing.php cut lines 55 through 82 and paste in checkout > form-shipping.php on line 77.

Now from checkout > form-shipping.php cut lines 52 through 54 and paste in checkout > form-billing.php on line 53. This must be between what is on line 52 and 53 of the default template.

Final step would be to change the text in the input for the checkbox that should now be on checkout > form-billing.php line 31 if you followed this strictly.

You can copy and replace line 31 with the following:

<input id="ship-to-different-address-checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" <?php checked( apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 ), 1 ); ?> type="checkbox" name="ship_to_different_address" value="1" /> <span><?php _e( 'Bill to a different address?', 'woocommerce' ); ?></span>

Last note about the woocommerce jquery that makes the fields appear from the checkbox

The jquery is working with the following element which should now be on checkout > form-billing.php line 35. <div class="shipping_address">

Answer 4

if anyone is interested

in main.js in your theme ex: Leto: main.js (js/main.js)

//copying the shipping to billing

jQuery(document).on('change', '#copy_to_billing', function() {
    if(this.checked) {
        jQuery("#billing_first_name").val(jQuery("#shipping_first_name").val());
        jQuery("#billing_last_name").val(jQuery("#shipping_last_name").val());
        jQuery("#billing_address_1").val(jQuery("#shipping_address_1").val());
        jQuery("#billing_address_2").val(jQuery("#shipping_address_2").val());
        jQuery("#billing_city").val(jQuery("#shipping_city").val());
        jQuery("#billing_state").val(jQuery("#shipping_state").val()).change();
        //alert(jQuery("#shipping_state").val());
        //alert(jQuery("#shipping_state :selected").text());
        jQuery("#billing_postcode").val(jQuery("#shipping_postcode").val());
        jQuery("#billing_country").val(jQuery("#shipping_country").val());
        jQuery("#billing_company").val(jQuery("#shipping_company").val());
     }
});

and in form-shipping.php (in your theme)

<h3 id="ship_to_billing">
    <label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
        <input id="copy_to_billing" type ="checkbox" name="copy_to_billing" value ="1" class="copy_billing woocommerce-form__input woocommerce-form__input-checkbox input-checkbox"><span><?php esc_html_e( 'Billing address is same as shipping (be sure to enter email and phone)', 'woocommerce' ); ?></span>
    </label>
</h3>

to have checkbox in copy shipping address to billing address