如何設定 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 學習資源

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

接下來，額外分享 3 項實用資源，可有效幫助大家做學習。

資源一：WP 高手架站課（線上課程）

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗，從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等 .. 豐富內容，一次教會你。

課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！

點擊下面了解課程，立馬擁有自己的品牌網站，並增加網路曝光度！

資源二：SEO 排名飆升課（線上課程）

網站建立完畢後，但卻沒有流量怎麼辦？或是只能靠花錢投廣告才會有訂單？

這門 SEO 排名飆升課，教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..，大幅提升行銷能力。

點擊下面了解課程，帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！

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

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

資源四：更多犬哥教學資源

如果你在操作過程中遇到問題，可以加入 犬哥研討社（目前有超過 9000+ 團員）。除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。

如果你想學更多網頁設計、數位行銷知識，可關注 YouTube 頻道，或是歡迎追蹤 犬哥網站 IG。