15

I'm creating a madlib style checkout form using WooTheme's Customizing checkout fields using actions and filters.

Billing fields in the checkout template form-billing.phpare displayed with this call:

<?php foreach ($checkout->checkout_fields['billing'] as $key => $field) : ?>
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
<?php endforeach; ?>

How can change the order the fields appear?

The current (default) field order is:
first name
last name
company (hidden for me)
town/city
zipcode
country
state
email
phone

Default order:
screenshot

I want the fields to be in a more natural order for Americans (where I live), so:
first name
last name
company (hidden for me)
town/city
state
zipcode
country
email
phone

How can I best do this?

30

Same can be done through functions.php in your (child) theme:

add_filter("woocommerce_checkout_fields", "order_fields");

function order_fields($fields) {

    $order = array(
        "billing_first_name", 
        "billing_last_name", 
        "billing_company", 
        "billing_address_1", 
        "billing_address_2", 
        "billing_postcode", 
        "billing_country", 
        "billing_email", 
        "billing_phone"

    );
    foreach($order as $field)
    {
        $ordered_fields[$field] = $fields["billing"][$field];
    }

    $fields["billing"] = $ordered_fields;
    return $fields;

}
| improve this answer | |
  • Best answer as it uses the wp/wc best practice with filtering the data before it reaches the template so no template file has to be overridden. – Larzan Aug 22 '16 at 15:19
  • did not work for me – Yahya Hussein Jul 12 '17 at 2:33
  • This use to work but no longer does. I think it's because the checkout JS dynamically alters the order. – codekipple Jul 28 '17 at 15:43
  • 4
    The current way to do it is to assign a priority:- $fields['billing']['billing_country']['priority'] = 10; $fields['billing']['billing_phone']['priority'] = 20; See here https://wordpress.org/support/topic/change-order-of-billing-fields-on-checkout-page/ – codekipple Jul 28 '17 at 15:47
5

Thanks to Dbranes for the answer.

Replace:

<?php foreach ($checkout->checkout_fields['billing'] as $key => $field) : ?>
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
<?php endforeach; ?>

With:

<?php 
// order the keys for your custom ordering or delete the ones you don't need
$mybillingfields=array(
    "billing_first_name",
    "billing_last_name",
    "billing_company",
    "billing_address_1",
    "billing_address_2",
    "billing_city",
    "billing_state",
    "billing_postcode",
    "billing_country",
    "billing_email",
    "billing_phone",
);
foreach ($mybillingfields as $key) : ?>
<?php woocommerce_form_field( $key, $checkout->checkout_fields['billing'][$key], $checkout->get_value( $key ) ); ?>
<?php endforeach; ?>
| improve this answer | |
  • 2
    this code is from an internal Woocommerce function. using the first answer's code [a filter] would be much better. – Adeerlike Nov 5 '15 at 16:59
  • For me it doesn't work. The best way is to use the "priority" of each field, something like this: $fields['billing']['billing_country']['priority'] = 10; $fields['billing']['billing_phone']['priority'] = 20; Maybe it is because of new versions of Woocommerce, but I don't know. – ruhanbidart Apr 16 '18 at 22:14
2

You can make a copy into your theme and edit the template that renders the checkout form.

Adapted from the plugin documentation:

Example
To overide the admin order notification, copy: woocommerce/templates/checkout/form-checkout.php
to
yourtheme/woocommerce/checkout/form-checkout.php

[update]

In this file, just before the fields being printed, there's this action hook: do_action('woocommerce_before_checkout_billing_form', $checkout);.

So, it's just a matter of adding this action in the theme's functions.php or in a custom plugin and reordering the fields as the OP shows in his Answer. No need of overriding the template, or yes if further customizations are needed.

| improve this answer | |
  • The template you mentioned only allows you to move <?php do_action('woocommerce_checkout_billing'); ?> around wholesale. – m-torin Jan 6 '13 at 13:30
  • I should've mention that I didn't checked the actual plugin files. Answer updated and expanded thanks to your answer. – brasofilo Jan 6 '13 at 13:54

Not the answer you're looking for? Browse other questions tagged or ask your own question.