最近有位朋友問我，能不能在結帳的表單中，把縣市的欄位改成下拉選單，於是我翻了一下 WooCommerce 的官方文件之後，發現關於縣市的欄位，其實是能夠自訂改為下拉選單，所以和大家分享一下設定的方法。
步驟
- 開啟主題中的
functions.php - 將下列的程式片段碼複制貼入後存檔
- 之後在結帳時選擇台灣，自動就會把縣市的欄位轉變為下拉選單
修改之後的縣市欄位如下
自訂欄位順序
既然都提到欄位的設定了，就順便說明一下如何快速調整欄位的順序設定，而且如果是利用語法調整的話，還能夠少安裝一個設定欄位的外掛。
步驟
- 首先也是先開啟主題中的
functions.php - 將下列的程式片段碼貼入後存檔
排序方式
如果要把公司的欄位移到最下方，就只要把 $fields2['company'] = $fields['company']; 這段剪下，再把它移到最下方，但切記不管如何調整順序，移動的語法都一定要保持在這段 return $fields2; 的上方。
調整範例
$fields2['phone'] = $fields['phone']; $fields2['company'] = $fields['company']; return $fields2; // 別掉到我底下XD
刪除欄位
去年我在這篇自訂收件欄位的文章中，介紹了如何去除不要的欄位，但現在我們也能利用這個片段程式碼，把不需要的欄位給一併刪除，方法很簡單，在不要的欄位前加上註解就行了。
註解範例
例如要把公司的欄位刪除，就在該段的語法之前加上 //
//$fields2['company'] = $fields['company'];
欄位大小
結帳欄位在 WooCommerce 的預設之下，有左、右以及全寬欄位之分，所以當順序調整完之後，可能還需再調整大小才能讓表單整齊對稱。因為欄位左右的位置，全是由 CSS 的元素所控制，所以只要改變 CSS 之後，就能夠變換調整。
全寬語法範例
在這裡我用鄉鎮市的欄位當範例，它在預設的表單中是一個全寬的欄位，控制的元素是 form-row-wide
$fields2['city']['class'] = array('form-row-wide');
左欄語法範例
左邊欄位的控制的元素是 form-row-first
$fields2['city']['class'] = array('form-row-first');
右欄語法範例
右邊欄位的控制的元素是 form-row-last
$fields2['city']['class'] = array('form-row-last');
總結
最後我把上述的所有相關的設定範例做合併之後，得到一個完全自訂的結帳欄位。
整理之後的程式片段碼如下
或許並不是每個人都熱衷於修改程式碼，所以我把這篇有談到的範例全都整理好，並且寫成了一個小外掛，但它沒有後台的設定選項，安裝後啟動就能套用，若有需要自訂的地方，請在照著本篇文章自行修改。
這個超方便的耶，感謝
–
有件事情請教，安裝並使用後，
後臺出現的縣市別卻只出現 TW01
XD
我該如何調整才能讓後台直接出現 所選的縣市名稱呢?
–
我若是直接將這些語法貼在
class-wc-countries
是否可行呢
再麻煩了~感謝
直接貼到
class-wc-countries裡可能會有問題，因為目前這個方法是用add_filter加入，WooThemes 官方也是建議用這個方法新增，另外不建議加任何自訂的 code 到 WC 的核心檔案。以下是加載後的截圖:
您好，那目前訂單顯示的這個縣市，顯示 這樣，有機會能調整嗎 @@
請問你的 WooCommerce 的版本是 ?
您好，目前版本是2.3.11 (wordpress版本是4.2.3)
看起來應該是存檔的問題，讀不到中文字造成的。
我覺得幫助很大，但使用這段程式碼之後，有一個小問題。
帳單資訊這邊是沒問題，但如果他勾選了「配送到不同地址」
下面複製出的一段會有問題，請問這個我可以從哪邊修改？
因為正常情況下，Ship to a different address 裡是沒有
Email Address和Phone這兩個欄位，所以只要把$fields2['email'] = $fields['email'];和$fields2['phone'] = $fields['phone'];這兩行註解或刪掉就行。修改後的片段碼如下:
add_filter(‘woocommerce_default_address_fields’, ‘cwp_custom_address_fields’);
function cwp_custom_address_fields($fields) {
$fields2[‘first_name’] = $fields[‘first_name’];
$fields2[‘last_name’] = $fields[‘last_name’];
$fields2[‘state’] = $fields[‘state’];
$fields2[‘state’][‘class’] = array(‘form-row-first’);
$fields2[‘city’] = $fields[‘city’];
$fields2[‘city’][‘class’] = array(‘form-row-last’);
$fields2[‘postcode’] = $fields[‘postcode’];
$fields2[‘postcode’][‘class’] = array(‘form-row-first’);
$fields2[‘address_1’] = $fields[‘address_1’];
$fields2[‘address_1’][‘class’] = array(‘form-row-last’);
//$fields2[’email’] = $fields[’email’];
//$fields2[‘phone’] = $fields[‘phone’];
//$fields2[‘country’] = $fields[‘country’];
//$fields2[‘company’] = $fields[‘company’];
//$fields2[‘address_2’] = $fields[‘address_2’];
return $fields2;
}
幫助真的很大，感謝!
另外想請教，如何將縣鎮市也改成下拉式?
因為這牽扯到先前選的縣市，不知有沒有辦法連接起來?
謝謝~!
如果縣鎮市也要下拉的話，首先需要用語法將縣市的欄位的會出見的地區再判別相對應的資料，不然如果只加入縣鎮市下拉選項的話，若選台北市時卻還能選到屏東鎮。
若您的商店需要增加自動判定欄位功能的話，歡迎聯絡我們，謝謝
如果要做鄉鎮市的下拉表單可以用二微陣列嗎？
使用後縣市名稱都是亂碼
試試改成下列這樣:
‘基隆市’ => ‘基隆市’,
‘台北市’ => ‘台北市’,
‘新北市’ => ‘新北市’,
‘宜蘭縣’ => ‘宜蘭縣’,
‘桃園市’ => ‘桃園市’,
‘新竹市’ => ‘新竹市’,
‘新竹縣’ => ‘新竹縣’,
‘苗栗縣’ => ‘苗栗縣’,
‘台中市’ => ‘台中市’,
‘彰化縣’ => ‘彰化縣’,
‘南投縣’ => ‘南投縣’,
‘雲林縣’ => ‘雲林縣’,
‘嘉義市’ => ‘嘉義市’,
‘嘉義縣’ => ‘嘉義縣’,
‘台南市’ => ‘台南市’,
‘高雄市’ => ‘高雄市’,
‘屏東縣’ => ‘屏東縣’,
‘花蓮縣’ => ‘花蓮縣’,
‘台東縣’ => ‘台東縣’,
‘澎湖’ => ‘澎湖’,
‘金門’ => ‘金門’,
‘馬祖’ => ‘馬祖’,
‘離島地區’ => ‘離島地區’,
還是一樣耶~難道是因為主題的關係? 我是使用preciso
和主題無關，可能是存檔格式的關係。
請問那有辦法嗎?~~
很棒！
有個小問題，請問前面在講左右欄位的控制是 ‘form-row-left’ 及 ‘form-row-right’
但後面範例似乎都變成了 ‘form-row-first’ 及 ‘form-row-last’
是否有差別？
謝謝！
終於有人發現 bug 了，加分加分，是用
form-row-first和form-row-last才對。手動排序寄刪除不必要欄位後，
更換運送國家時自動更改運費計算方式得功能變得無法使用了……
請確定沒有刪除運費計算所需的欄位。
欄位還在[‘country’]，
正常下拉式重複選擇香港或台灣會不斷顯示不一樣的運費規則及金額，
手動排序後更換國家不會改變運費計價…
方便留網址嗎 ?
https://uploads.disquscdn.com/images/f7c63ba175e43e67a0306548109e85561795bff69df1cde65122da9e583a1776.png https://uploads.disquscdn.com/images/af60ba2b5bdfa8fc7a5620a00588d655de4ee4e9bf7bf4898afeb658efb884d9.png
我使用上面的原始碼修改過後，
發現帳單地址的部分修改成功，
但是運送地址的部分只有textbox，上方的文字消失了
請問這是什麼問題呢？