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

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

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

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

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

• 1. RY WC City Select 是什麼？
• 2. 外掛使用教學
• 3. 客製化結帳表單＋樣式調整
• 常見問題
• WordPress 學習資源

---

1. RY WC City Select 是什麼？

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

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

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

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

---

2. 外掛使用教學

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

前往結帳頁面，觀看成果

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

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

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

前往 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！打完收工！

---

常見問題

---

WordPress 學習資源

學習 WordPress 網站架設流程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 3 項架站資源，可有效幫助大家處理網站問題。

資源一：犬哥數位（專業 WordPress 網頁設計公司）

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！

資源二：WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種，很多網友私訊我不知道安裝哪一款，才有辦法實現功能。或是已經試了很多款外掛，但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題＆外掛大全（電子書），這些都是我們團隊協助客戶開發案件時，會搭配使用的。一來外掛品質優良，二來功能性也足夠強！

資源三：官方教學資源（含 FB 社群解答）

如果你偏愛自架網站，也歡迎持續關注 犬哥網站 Blog，我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習，也可關注 YouTube 頻道，幫助你更容易進入狀況。

當然，如果你在操作過程中遇到問題，也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ，除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。