WooCommerce 教程：結算頁面自定義（刪/添）表單元素

在預設的 woocommerce 的結算（checkout）頁面上自定義（刪除/新增）表單元素。

預設的話，WooCommerce 的結算（checkout）頁面上的表單元素（fields）比較繁多，如國家、地址（精確到了省、市、鎮）、姓名、郵編、電話、 email 等等。但在實際專案需求中，可能不想顯示那麼多的 fields；而且從使用者體驗的角度上，fields 應該精簡到只需要最重要的——如果是賣虛擬商品的話尤為如此。 WooCommerce 中定義這些表單元素（fields）的函式是 woocommerce_checkout_fields，那麼我們要自定義，就從這個函式下手，hook 之。

以下根據不同需求寫了三個場景。基本上是從官方檔案中的《Customizing checkout fields using actions and filters 》獲取而來。

需求一：刪除結算頁面上多餘的表單元素（fields）

這個多餘的表單元素指刪除後，只剩下最需要的三個：姓、名、郵箱。這個需求如果單單是做虛擬商品的話就非常有需要。

程式碼如下：

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
  //unset($fields['order']['order_comments']);
  unset( $fields['billing']['billing_country'] );
  //unset( $fields['billing']['billing_first_name'] );
  //unset( $fields['billing']['billing_last_name'] );
  unset( $fields['billing']['billing_company'] );
  unset( $fields['billing']['billing_address_1'] );
  unset( $fields['billing']['billing_address_2'] );
  unset( $fields['billing']['billing_city'] );
  unset( $fields['billing']['billing_state'] );
  unset( $fields['billing']['billing_postcode'] );
  //unset($fields['billing']['billing_email']);
  unset( $fields['billing']['billing_phone'] );
return $fields;
}

相信你也看懂了，billing_first_xxx 就是對應相應的表單元素，如 billing_first_name 就是指姓。注意註釋掉的程式碼，unset 這個動作一執行，那麼相應的表單元素就不會載入到 checkout 頁面。

需求二：設定表單元素的一些顯示樣式

上面的小標題實在是太難表達 Jeff 的意思了，下面直接上例子+程式碼。例如：預設的話，電子郵件（email）的表單是非常短的一個輸入框，如果要變長一點，並不是說透過 css 來的（因為官方已經統一化這些控制元件，如果一改牽一髮動全身）。好在官方對於 text 表單定義了不同的類（class），具體而言，你需要檢視官方檔案，然後捏程式碼應該是這樣的：

// 將預設的郵箱輸入框重置為最大
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
$fields['billing']['billing_email']['class'] = array('form-row-wide');
return $fields;
}

form-row-wide 指另外一種樣式的 text type（通俗來講就是變長的 text input），效果對比就是：

WooCommerce教程：結算頁面自定義（刪/添）表單元素

需求三：新增自定義的表單元素

比如說我想定義一個 text 的輸入框，就可以用下面的程式碼：

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
$fields['billing']['billing_domain_one'] = array(
        'label'         => __('域名授權 1', 'woocommerce'),//名稱
        'placeholder'   => _x('區分有無 www，不含 http://', 'placeholder', 'woocommerce'),//佔位文字
        'required'      => true,//是否必填項
        'class'         => array('form-row-wide'),//類
        'clear'         => true//是否清除浮動
     );
  $fields['billing']['billing_domain_two'] = array(
        'label'         => __('域名授權 2', 'woocommerce'),
        'placeholder'   => _x('區分有無 www，不含 http://', 'placeholder', 'woocommerce'),
        'required'      => true,
        'class'         => array('form-row-wide'),
        'clear'         => true
     );
return $fields;
}

效果如下：

WooCommerce教程：結算頁面自定義（刪/添）表單元素

總結：

整體程式碼託管到 Github Gists 上：https://gist.github.com/Jeff2Ma/95f433269637f5421f12

WooCommerce 教程：結算頁面自定義（刪/添）表單元素