Woocommerce checkout page show shipping address first then billing address?
Solution 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.
Solution 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.
Solution 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 & Shipping', 'woocommerce' ); ?>
to <?php _e( 'Shipping & 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">
Related videos on Youtube
Mukesh Panchal
I’m a WordPress theme and plugin Developer, a Noteworthy Core Contributor, an entrepreneur, a husband, and a father living in Ahmedabad, India. For ten years I have been building custom WordPress websites for businesses and individuals. I specialize in crafting easy-to-use backend experiences so my clients can easily manage their own websites. I often work with large corporations, universities, advertising agencies, publishers, law firms, and non-profit organizations. Seven times Noteworthy Contributor for WordPress. WordPress 5.1 WordPress 5.2 WordPress 5.3 WordPress 5.4 WordPress 5.5 WordPress 5.7 WordPress 5.8
Updated on March 04, 2021Comments
-
Mukesh Panchal about 3 years
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.
-
Shravan Sharma almost 9 yearsare you using child theme ?
-
Mukesh Panchal almost 9 yearsYes i use child theme
-
Mukesh Panchal almost 9 yearscan anyone help me to solve this?
-
rnevius almost 9 yearsWhat's wrong with overriding templates, and adding your own JS function for the checkbox?
-
Mukesh Panchal almost 9 yearsi told that i need to make in theme template plz check question
-
Storm Spirit over 5 yearsis this solve already? also try to find same as this.
-
-
Mukesh Panchal almost 9 yearsthis is not a answer it just change place of address. i need check box and all validation with ajax
-
Mukesh Panchal almost 9 yearsthanks for your reply and give time to help i will check it and reply. is form validation is working after use? also checkbox store value of check or no so is it store because when i we click on submit it reload page so is working or not?
-
Marinski almost 3 yearsagree with Mukesh, this does not resolve the issue
-
Joseph L. over 2 yearsThis answer seems to be great. Just a little lost since WooCommerce has updated these files so many times so far that the lines number are not matching anymore. If you could replace where exactly to make the cuts with images instead it would be awesome. Thanks!
-
ddisdevelpgelis over 2 years@JosephL. +1 I agree.