如何設定 WooCommerce 縣市 / 鄉鎮市的下拉選單？

Q: RY WC City Select 外掛是什麼？

RY WC City Select 這款外掛，只要安裝後在「 結帳頁面的帳單＆運送地址 」、「 會員中心的地址維護頁面 」，就會自動套上縣市、鄉鎮市的下拉選單。 動作流程： 在選擇「 縣市 」後，就會自動帶入以下的「 鄉鎮市 」，在選擇「 鄉鎮市 」之後的郵遞區號也會自動帶入號碼，是不是非常方便！

Q: 如何客製化結帳表單？

這可以用 WordPress 外掛處理，更多 Checkout Field Editor 外掛教學 ，就能簡單的新增、編輯、刪除、排序囉！

Q: RY Tools 還有其他的外掛嗎？

有的，除了這篇文章推薦的地址下拉選單，也有金物流串接的外掛，更多 RY WooCommerce Tools 外掛教學 。 更多其他 WordPress 相關外掛，也可前往 RY 大的 幻想的商店 支持一下。

在現在幾乎無電不商的趨勢下，電商網站建置是許多想經營網路商店的人，開始網上生意的第一步。搭配強大的 WooCommerce 開店外掛，簡單設定一下很快就能建置成功。

在台灣電商的結帳頁面，很常看到地址下拉選單，也就是選擇縣市後，系統會自動帶入下面的鄉鎮市給顧客選擇，並且最後帶入郵遞區號。

這是滿貼心的設計，一來可以防止顧客打字打錯，二來可簡化購買流程，對顧客體驗有很好的提升。

這篇文章，我會用簡單的流程帶大家實現「 WooCommerce 縣市欄位下拉選單」功能，如下。

1. RY WC City Select 是什麼？
2. 外掛使用教學
3. 客製化結帳表單＋樣式調整
常見問題
聯絡犬哥網站

1. RY WC City Select 是什麼？

*WooCommerce 結帳地址下拉選單：RY WC City Select 外掛*

RY WC City Select 這款外掛，只要安裝後在「結帳頁面的帳單＆運送地址」、「會員中心的地址維護頁面」，就會自動套上縣市、鄉鎮市的下拉選單。更多 RY WC City Select 完整教學。

動作流程：在選擇「縣市」後，就會自動帶入以下的「鄉鎮市」，在選擇「鄉鎮市」之後的郵遞區號也會自動帶入號碼，是不是非常方便！

再度感謝 RY 大開發好用的 WooCommerce 週邊外掛，造福在使用 WordPress 的台灣人。可參考 RY 的另一款 RY WooCommerce Tools 金物流串接。

立即取得 RY WC City Select 外掛

好囉，那我們就趕緊來看怎麼用吧。

2. 外掛使用教學

前往 WordPress 外掛 > 安裝外掛，搜尋 RY WC City Select 外掛，然後安裝＋啟用它即可。

*WooCommerce 縣市欄位下拉選單：RY WC City Select 外掛安裝*

前往結帳頁面，觀看成果

接著，前往 WordPress 前台，隨意選購一個商品並進入結帳頁面。

就會發現結帳表單，多出了地址的下拉選單，是不是很簡單快速。

*WooCommerce 縣市欄位下拉選單：RY WC City Select 地址下拉選單*

前往「我的帳戶」，觀看成果

前往 WooCommerce 預設的「我的帳戶」頁面，也稱為顧客的會員專區。

點擊「地址」選項，並編輯任一個地址。

同樣會看到地址下拉選單（縣市 / 鄉鎮市 / 郵遞區號），已經順利出現啦。這樣顧客就能簡單改地址囉。

3. 客製化結帳表單＋樣式調整

WooCommerce 結帳表單預設值不太符合亞洲的輸入習慣，所以有些欄位可能是多餘的，或是有些站長也可能想調整表格排序。

這時就可參考 Checkout Field Editor 教學，能教你有關結帳表單客製化設計的方法。

在簡單調整欄位＆順序之後，接著可以來處理 RY WC City Select 的下拉選單預設是全寬的展示，我們可把它改為各一半顯示，會變的比較直覺＆美觀。

因為這涉及到 CSS 程式碼的簡單調整，但由於大家使用的主題、外掛都不太一樣，所以比較無法統一教學。

但你可以前往 WordPress 自訂 > 附加的 CSS，並輸入下面的 CSS 程式碼，儲存後再前往前台刷新結帳表單頁面，看是否能生效。

/** 帳單資訊（地址下拉選單）**/
#billing_city_field, #billing_state_field {
  display: inline-block;
  width: 50%;
}

/** 運送到不同地址（地址下拉選單）**/
#shipping_city_field, #shipping_state_field {
  display: inline-block;
  width: 50%;
}

小提醒：
1. 有時候沒生效可能是讀到舊快取問題，可在瀏覽器內把舊快取刪除，或是如果你有用 WordPress 快取外掛，有些有內建快取刪除按鈕，也可用它來刪除。
2. 如果有使用 WordPress 結帳表單設計的外掛，像是 Checkout Field Editor 之類的，有些外掛套用後會把地址欄位的 ID 或是 Classname 更改，會導致上面的程式碼失效。
需確保地址欄位跟上面程式碼的 ID 或是 Classname 名稱相同（舉例：#billing_city_field / #billing_state_field / #shipping_city_field / #shipping_state_field），程式碼才能正常運作唷。

最後看一下顯示的成果。Bingo！打完收工！