woo 的帳單欄位是可以自定屬性的,請將底下的程式碼,加入你的佈景 functions.php 裡面即可。

woo-customer

說明

$key 表示欄位名稱,想要更換順序時,直接調整即可。
$field 是 input 的 class 的值,想要自定 style 就加入相關的 css 名稱,想要參入多個請以空格區隔。

程式碼

function reorder_billing_fields($fields) {
    $order = array(
        "billing_first_name"    => "form-row-first class_fname", 
        "billing_last_name"     => "form-row-last class_lname", 
        "billing_company"       => "form-row-wide", 
        "billing_country"       => "form-row-first",
        "billing_postcode"      => "form-row-last",        
        "billing_address_1"     => "form-row-wide", 
        "billing_address_2"     => "form-row-wide", 
        "billing_email"         => "form-row-wide", 
        "billing_phone"         => "form-row-wide"
    );
    foreach($order as $key => $field)
    {
      $fields["billing"][$key]['class'] = array($field);
      $ordered_fields[$key] = $fields["billing"][$key];        
    }

    $fields["billing"] = $ordered_fields;
    return $fields;
}
add_filter( "woocommerce_checkout_fields", "reorder_billing_fields");

補充其他欄位名稱

[‘billing’][‘billing_first_name’]
[‘billing’][‘billing_last_name’]
[‘billing’][‘billing_company’]
[‘billing’][‘billing_address_1’]
[‘billing’][‘billing_address_2’]
[‘billing’][‘billing_city’]
[‘billing’][‘billing_postcode’]
[‘billing’][‘billing_country’]
[‘billing’][‘billing_state’]
[‘billing’][‘billing_email’]
[‘billing’][‘billing_phone’]
[‘shipping’][‘shipping_first_name’]
[‘shipping’][‘shipping_last_name’]
[‘shipping’][‘shipping_company’]
[‘shipping’][‘shipping_address_1’]
[‘shipping’][‘shipping_address_2’]
[‘shipping’][‘shipping_city’]
[‘shipping’][‘shipping_postcode’]
[‘shipping’][‘shipping_country’]
[‘shipping’][‘shipping_state’]
[‘account’][‘account_username’]
[‘account’][‘account_password’]
[‘account’][‘account_password-2’]
[‘order’][‘order_comments’]