Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How to customize checkout woocommerce fields?

I need to change the sorting of the checkout fields.

Added filter woocommerce_checkot_fields, but does not work.

add_filter( 'woocommerce_checkout_fields', 'custom_order_checkout_fields' );
function custom_order_checkout_fields( $checkout_fields ) {
    $checkout_fields['billing']['billing_first_name']['priority'] = 10;
    $checkout_fields['billing']['billing_company']['priority'] = 20;
    $checkout_fields['billing']['billing_email']['priority'] = 30;
    $checkout_fields['billing']['billing_phone']['priority'] = 40;
    $checkout_fields['billing']['billing_country']['priority'] = 50;
    $checkout_fields['billing']['billing_postcode']['priority'] = 60;
    $checkout_fields['billing']['billing_city']['priority'] = 70;
    $checkout_fields['billing']['billing_address_1']['priority'] = 80;

    return $checkout_fields;
}

woocommerce_form_field_args adds classes only to the label and input. I need to wrap the required fields inside the container.
There are various plugins, but I would like to know the solution through hooks.

Tags:

2

Answers


  1. 0

    You can achieve this using css like below :- 

    .woocommerce-billing-fields__field-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.woocommerce form .form-row {
  display: inline-block;
}
.woocommerce form .form-row input.input-text {
  max-width: 252px;
}
#billing_first_name_field {
  order: 1;
}
#billing_last_name_field {
 order: 2;
}
#billing_company_field {
  order: 3;
}
#billing_country_field {
  order: 4;
}
#billing_address_1_field {
  order: 5;
}
#billing_address_2_field {
  order: 6;
  width: 100%;
}
#billing_city_field {
  order: 7;
}
#billing_postcode_field {
  order: 8;
}
#billing_state_field {
  order: 9;
  width:100%;
}
#billing_phone_field {
  order: 10;
}
#billing_email_field {
  order: 11;
}
    Login or Signup to reply.
  2. 0

    Your code worked fine with me, but incase you want to remove and set the fields as yours, you can unset the array and re-set it with the same sort, check this:

    add_filter( 'woocommerce_checkout_fields', 'custom_order_checkout_fields' );
function custom_order_checkout_fields( $checkout_fields ) {
        $billing = $checkout_fields['billing'];
        unset($checkout_fields['billing']);
        $checkout_fields['billing'] = array();
        $checkout_fields['billing']['billing_first_name'] = $billing['billing_first_name'];
        $checkout_fields['billing']['billing_company'] = $billing['billing_company'];
        $checkout_fields['billing']['billing_email'] = $billing['billing_email'];
        $checkout_fields['billing']['billing_phone'] = $billing['billing_phone'];
        $checkout_fields['billing']['billing_country'] = $billing['billing_country'];
        $checkout_fields['billing']['billing_postcode'] = $billing['billing_postcode'];
        $checkout_fields['billing']['billing_city'] = $billing['billing_city'];
        $checkout_fields['billing']['billing_address_1'] = $billing['billing_address_1'];
        return $checkout_fields;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search