Change order of billing fields on checkout page

  • Resolved zerge

    (@zerge)


    7 years, 7 months ago

    I’m using the WC filter to order billing fields, and it worked fine before (WC 3.0.3) updating to WooCommerce 3.0.4

    It seems the filter works fine, but for unknown reasons it revert back on the fly to the default order.

    
add_filter("woocommerce_checkout_fields", "custom_order_fields");

function custom_order_fields($fields) {
	$order = array(
		"billing_email", 
		"billing_first_name", 
		"billing_last_name",
		"billing_phone", 
		"billing_address_1",  
		"billing_postcode",
		"billing_address_2",
		"billing_country" 
	);

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

	$fields["billing"] = $ordered_fields;

	$fields['billing']['billing_address_1']['placeholder'] = '';
	$fields['billing']['billing_address_2']['placeholder'] = '';
	$fields['billing']['billing_phone']['placeholder'] = '';
	$fields['billing']['billing_address_2']['label'] = __( 'City', 'blank' );
	$fields['billing']['billing_phone']['label'] = __( 'Phone number', 'blank' );

	return $fields;
}

    STEPS TO REPRODUCE THE ISSUE
    WooCommerce 3.0.4 + code above in the functions.php

Viewing 3 replies - 16 through 18 (of 18 total)

  • Just found out I made a booboo. Use uasort instead of usort to keep the associative array.

    So many different answers! I tried many of them. They didn’t work. Here’s what did, and I simply used the examples at https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/ to make them work:

    I wanted to move the email field to the top, and place the phone number field below the name (first name, last name). I also wanted to remove the COMPANY field. Here’s a quick tip: The DEFAULT setup assigns a value to each field. So… FIRST NAME = 10, LAST NAME = 20, and so on. Got it? Good. So if you want to make something appear before the FIRST NAME field, assign it a smaller value.

    Here’s the code I used to effect what I wanted:

    add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
     $fields['billing']['billing_email']['priority'] = 9;
     $fields['billing']['billing_phone']['priority'] = 21;
// Remove company field //
	unset($fields['billing']['billing_company']);
     return $fields;
}

    Simple. Effective. No loops required.

    nicomollet

    (@nicomollet)

    You need uasort function to keep array key association.
    This filter force the reorder of the billing fields.

    
/**
 * Force reorder billing fields by priority
 *
 * @param $fields
 *
 * @return mixed
 */
function reorder_fields($fields) {
	uasort($fields['billing'], function($a, $b) {
		return $a['priority'] <=> $b['priority'];
	});
	return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'reorder_fields', 999, 1 );
    • This reply was modified 6 years ago by nicomollet.
Viewing 3 replies - 16 through 18 (of 18 total)
  • The topic ‘Change order of billing fields on checkout page’ is closed to new replies.