Change Order of Address Fields in WooCommerce Checkout

How to change order of checkout fields in woocommerce; Reorder woocommerce checkout fields; Woocommerce change address field order; Move checkout fields woocommerce; Woocommerce checkout fields order change; Customize checkout field order woocommerce; Woocommerce rearrange checkout fields; Change position of checkout fields in woocommerce; Woocommerce modify checkout field order; How to reorder address fields in woocommerce checkout;

Explanation

Want to change the order of address fields on your WooCommerce checkout page? This snippet helps you do just that!

What It Does:

  • Rearranges the order of billing and shipping fields during checkout.
  • Uses a filter to modify how fields appear to your customers.

How It Works:

  • The code taps into WooCommerce's checkout fields using a filter.
  • It specifies the order of each field for both billing and shipping sections.
  • You can adjust the order by rearranging the lines within the $fields['billing'] and $fields['shipping'] arrays.

Why Use It:

  • Customize the checkout experience to better suit your business needs.
  • Make the checkout process more intuitive for your customers.

Simply adjust the order of the fields in the arrays to match your desired layout, and you're good to go!

Code

<?php
/**
 * Reorder WooCommerce checkout fields.
 *
 * This function changes the order of the address fields in the WooCommerce checkout page.
 * It uses the 'woocommerce_checkout_fields' filter to modify the fields' order.
 *
 * @param array $fields The existing checkout fields.
 * @return array Modified checkout fields with reordered address fields.
 */
function wp_dudecom_reorder_woocommerce_checkout_fields( $fields ) {
    // Reorder billing fields
    $fields['billing'] = array(
        'billing_first_name' => $fields['billing']['billing_first_name'],
        'billing_last_name'  => $fields['billing']['billing_last_name'],
        'billing_company'    => $fields['billing']['billing_company'],
        'billing_country'    => $fields['billing']['billing_country'],
        'billing_address_1'  => $fields['billing']['billing_address_1'],
        'billing_address_2'  => $fields['billing']['billing_address_2'],
        'billing_city'       => $fields['billing']['billing_city'],
        'billing_state'      => $fields['billing']['billing_state'],
        'billing_postcode'   => $fields['billing']['billing_postcode'],
        'billing_phone'      => $fields['billing']['billing_phone'],
        'billing_email'      => $fields['billing']['billing_email'],
    );

    // Reorder shipping fields
    $fields['shipping'] = array(
        'shipping_first_name' => $fields['shipping']['shipping_first_name'],
        'shipping_last_name'  => $fields['shipping']['shipping_last_name'],
        'shipping_company'    => $fields['shipping']['shipping_company'],
        'shipping_country'    => $fields['shipping']['shipping_country'],
        'shipping_address_1'  => $fields['shipping']['shipping_address_1'],
        'shipping_address_2'  => $fields['shipping']['shipping_address_2'],
        'shipping_city'       => $fields['shipping']['shipping_city'],
        'shipping_state'      => $fields['shipping']['shipping_state'],
        'shipping_postcode'   => $fields['shipping']['shipping_postcode'],
    );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wp_dudecom_reorder_woocommerce_checkout_fields' );
?>

Instructions

File Location: Add the code to your theme's functions.php file or a custom plugin file.

Prerequisites:

  • Ensure WooCommerce is installed and activated on your WordPress site.

Implementation Steps:

  1. Access Your WordPress Dashboard: Log in to your WordPress admin panel.
  2. Navigate to Theme Editor: Go to Appearance > Theme Editor. If you prefer using a custom plugin, navigate to Plugins > Editor and select your custom plugin.
  3. Open functions.php: In the Theme Editor, locate and open the functions.php file of your active theme. If using a plugin, open the main plugin file.
  4. Insert the Code: Copy and paste the provided code snippet into the functions.php file or your plugin file. Ensure it is placed before the closing ?> tag if it exists.
  5. Save Changes: Click the Update File button to save your changes.
  6. Test the Checkout Page: Visit your WooCommerce checkout page to verify that the address fields are reordered as specified in the code.

If you encounter any issues or need further customization, consider reaching out to wp-dude.com for expert assistance with your WordPress and WooCommerce needs.