W whoops.tw
諮詢服務
WooCommerce

WooCommerce 縣市下拉選單設定教學：用 RY WC City Select 優化結帳流程

用 RY WC City Select 這款免費 WooCommerce 外掛，安裝啟用後就會自動把結帳頁與會員中心的地址欄位，換成縣市、鄉鎮市、郵遞區號三層連動下拉選單，全程不用…

用 RY WC City Select 這款免費 WooCommerce 外掛，安裝啟用後就會自動把結帳頁與會員中心的地址欄位，換成縣市、鄉鎮市、郵遞區號三層連動下拉選單，全程不用寫程式。截至 2026 年 6 月,這款外掛在 WordPress.org 外掛庫仍是免費取得,累計安裝次數已超過五萬次。真正的門檻落在欄位排序、CSS 顯示,以及被快取或欄位 ID 覆蓋時的排錯。

重點先看: RY WC City Select 裝完即用,涵蓋結帳與會員中心兩處地址,三層連動自動帶入郵遞區號。多數人卡住的環節來自裝了 Checkout Field Editor 之後地址欄位 ID 被改掉,導致下拉與 CSS 一起失效。

為什麼結帳頁需要縣市下拉選單

地址欄位做成下拉選單,是因為本地地址是縣市、鄉鎮市、郵遞區號三層結構,讓顧客用打字的容易拼錯或漏填郵遞區號,下拉選單能連動帶入、降低手誤風險並縮短結帳時間,直接減少地址錯誤導致的退件與客服成本。WooCommerce 預設地址欄位是純文字輸入,沒有為這種三段式地址做任何設計。

而 WooCommerce 正是這個預設會影響到最多站長的平台。根據 W3Techs 的調查,WooCommerce 占所有網站的 8.2%,更占了所有電商系統的 48.6%,等於接近一半的電商網站都吃這組預設的純文字地址欄位 [來源:W3Techs〈Usage Statistics and Market Share of WooCommerce〉 https://w3techs.com/technologies/details/cm-woocommerce 2026-06-29]。也就是說,這個三層連動下拉缺口的影響面非常廣,並非少數站的問題。

退件單最常看到的兩個原因,一個是地址少一個鄉鎮市、一個是郵遞區號填錯。顧客把「台」寫成「臺」,或把中正區寫成中正路,物流端一刷就卡住。改成用選的取代手打,這些問題會少一大半。下拉式還有一個隱形好處:選了縣市自動帶出鄉鎮市,選了鄉鎮市自動帶出郵遞區號,這是連動欄位,不是三個獨立欄位各自孤零零地等輸入。

結帳流程每少一個手打欄位,放棄率就低一點。對行動版結帳的影響尤其明顯,因為手機上輸入地址、切換鍵盤找數字,是整段流程裡摩擦力最高的動作。做購物網站的站長多半把心力放在商品頁和金流,結帳表單的細節常常被擺在最後,但它直接決定訂單能不能正確出貨。對剛起步的人,一篇WooCommerce 架站完整指南通常會先講商品和金流,地址欄位這種收尾細節記得補上。

這背後有數據撐著。2026 年第一季,行動裝置(不含平板)占全球網站流量的 52.27%,也就是說你的結帳頁有超過一半的人是用手機在填 [來源:Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉 https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]。在手機上把地址做成下拉而非手打,等於直接對這 52.27% 的流量降低摩擦力,退件與放棄率都會跟著往下走。

更進一步拆解,地址錯誤的成本其實是分層的。最表面是退件的物流費,再往下一層是客服回信改單的人力,最深的一層是顧客等不到貨之後對品牌的信任折損。很多站長把地址欄位當成「能填就好」,算的是第一層的物流費,卻漏算了後面兩層。把欄位做成三層連動下拉,等於一次性處理掉三層成本,這也是為什麼它常被列在結帳優化清單的第一項。

欄位形式打字錯誤風險郵遞區號帶入結帳耗時
純文字輸入(預設)高,常拼錯鄉鎮市需顧客自填較長
三層連動下拉低,只能選既定值自動帶入較短

常見的地址錯誤類型可以整理成一張對照,幫你在排錯時快速對號入座:郵遞區號與鄉鎮市對不起來、縣市名稱混用正體與異體寫法、鄉鎮市名稱張冠李戴、地址漏填鄉鎮市直接寫路名。這些錯誤有一個共同特徵,就是都來自「人工輸入」。換成下拉之後,前三類幾乎歸零,因為選項是固定的、正確的、一致的,第四類也會因為連動機制而被迫選完才能往下走。理解錯誤來源,才知道這個外掛真正的價值是從根上切斷錯誤發生的條件,功能炫不炫反而是次要考量。

RY WC City Select 是什麼、憑什麼選它

RY WC City Select 是 RY 大為 WordPress 社群開發的免費外掛,啟用之後會接管結帳頁與會員中心的地址欄位,直接用縣市、鄉鎮市、郵遞區號三層連動下拉取代原本的純文字輸入,不用寫程式、也不用自己整理鄉鎮市清單。外掛本身沒有設定頁,啟用即套用,縣市與鄉鎮市資料內建,不必手填任何一筆。

選它的理由很實際:它是原生方案,涵蓋範圍最廣。裝完之後,結帳頁的帳單地址、運送地址,以及會員中心的地址維護頁,三個地方一次到位。這比你自己寫 select 接 AJAX、再維護一份鄉鎮市 JSON 省下太多事。換個角度想,會重複造輪子的人,多半是不知道已經有人造好了一個免費的輪子。

它與 RY WooCommerce Tools 同一作者,後者做的是金物流串接,涵蓋綠界、藍新等本地常用管道。兩者一起用,生態一致、相容性高,出問題時不用在不同作者的外掛之間來回猜。想做完整的 WooCommerce 結帳表單客製化,這套工具鏈是常見組合。

評估一款結帳類外掛值不值得用,可以從五個維度看:維護是否持續(版本更新頻率)、是否與最新 WooCommerce 相容、是否開源可審計、是否需要額外付費解鎖核心功能、出問題時找不找得到作者。RY 系列外掛在這五項上的表現相對穩定,作者長期維護、更新跟得上 WooCommerce 主版本,這是免費外掛裡少見的長期承諾。對依賴結帳流程營運的電商站,這種長期維護性比一時的功能花俏更重要。

三層連動下拉背後的資料結構原理

要真正理解這款外掛在做什麼,得先看它背後的資料結構。縣市、鄉鎮市、郵遞區號其實是一組樹狀對應關係:每個縣市底下掛著若干鄉鎮市,每個鄉鎮市對應一組郵遞區號(少數大鄉鎮市會對應到多組)。外掛把這棵樹整包內建,顧客選了某個縣市,前端 JavaScript 就把那個縣市底下的鄉鎮市清單塞進第二層下拉;選了鄉鎮市,再把對應的郵遞區號填進第三個欄位。

這套連動靠的是 WooCommerce 結帳欄位的標準屬性:type、class、wrapper_class、以及最重要的 priority(決定欄位出現順序)。RY WC City Select 把 state、city、postcode 這三個原生欄位的 type 改成 select,再用 JavaScript 把三者的選項串起來。理解這一點很重要,因為日後只要這三個欄位的 type 或 priority 被別的外掛改動,連動就會斷。它依附在 WooCommerce 欄位系統之上,本質是一層客製化,並非能脫離原生欄位獨立運作的元件。

另一個關鍵是資料的命名一致性。結帳頁有帳單(billing)與運送(shipping)兩組地址,會員中心還有一組,加起來是三組並存的欄位。RY 系列對這三組都用同一套縣市鄉鎮命名邏輯,所以同一份下拉資料可以套到三個地方,不需要各自維護。這也是為什麼它跟同作者的金物流外掛搭配特別順:金流端要讀的縣市鄉鎮值,跟下拉給的值是同一套命名,不會出現「下拉選的是新北市、金流端卻收到 Taipei」這種錯位。對需要做運費自動計算或稅金設定的站,這份命名一致性是隱形的根基。

有了這個原理圖,排錯時就有方向。連動失效,八成是某一層的 select 被改成別的 type,或 priority 被打亂導致下拉順序錯位;下拉出現但郵遞區號沒帶入,可能是 JavaScript 沒載入(被快取或主題移除);下拉出現但金流端讀不到對的值,多半是命名被改寫。把問題對應到資料流的位置,比盲目調 CSS 快得多。

RY WC City Select 適合誰、不適合誰

這款外掛並非所有站都該裝。用一張決策矩陣幫你快速判斷:橫軸是「你的出貨範圍」,縱軸是「你對結帳客製化的需求程度」。本地出貨、結帳客製需求低的站,裝它最划算,開箱即用就解決地址問題;本地出貨但結帳客製需求高的站,裝它之後要搭配 Checkout Field Editor 並小心欄位 ID;跨境出貨(同時賣本地與海外)的站要特別注意,這款外掛預設接管的是本地格式,海外地址可能需要保留純文字欄位,這時要測試多國結帳情境是否衝突。

站點類型是否建議原因
純本地出貨、剛起步強烈建議零設定解決地址錯誤
本地出貨、重度客製結帳建議,留意 ID與欄位編輯外掛共存需控管欄位 ID
本地加跨境雙線視情況需驗證海外地址欄位不受影響
純跨境、不在本地出貨不建議本地三層格式對海外結帳無價值
已用其他縣市外掛擇一兩者會搶欄位控制權造成衝突

不適合的情境也要講清楚。第一,你的站純做跨境、完全不在本地出貨,本地三層格式對海外結帳毫無幫助,裝了反而讓海外顧客看到不相干的縣市下拉。第二,你已經用了別款縣市連動外掛,兩者會搶 state 與 city 欄位的控制權,下場是下拉互相覆蓋。第三,你的站把結帳頁整個用 page builder 重畫,繞過了 WooCommerce 原生欄位系統,這時外掛的 hook 根本接不上,裝了也沒作用。這三種情況裝它等於白費力氣,先釐清出貨與結帳架構再決定。

安裝與啟用的步驟

到 WordPress 後台「外掛、安裝外掛」搜尋 RY WC City Select,安裝後啟用即可,不需要任何設定頁面;啟用後直接到前台跑一次結帳流程就能驗證下拉選單是否出現。整段過程不會碰到一行 PHP。

  1. 登入 WordPress 後台,左側選單進入「外掛 → 安裝外掛」。
  2. 搜尋框輸入「RY WC City Select」,找到外掛後點「立即安裝」。
  3. 安裝完成後點「啟用」,外掛沒有獨立設定頁,啟用即生效。
  4. 到前台任選一個商品加入購物車,進結帳頁檢視地址欄位。
  5. 若後台搜不到,可從 WordPress.org 外掛頁下載 zip,再用「上傳外掛」安裝。

這裡順手提一個小細節:安裝前先確認WordPress 外掛安裝的環境與權限沒問題,尤其接案改的站常常被限制只能用上傳 zip。裝好之後,如果你剛開始架 WooCommerce,建議連同 RY WooCommerce Tools 一起裝,免得日後接金流時還要再回來處理相容性。整個 WordPress 購物網站架設流程裡,地址下拉這一步其實只佔很小一段。

有人會問:為什麼不直接用 Checkout Field Editor 做下拉就好?那類外掛能新增欄位,但它的下拉是靜態清單,不會自動帶鄉鎮市與郵遞區號。三層連動的資料來源是 RY WC City Select 內建的,這正是它的核心價值。

裝完之後有一個常被忽略的版本觀念。外掛裡的鄉鎮市清單是隨版本一起更新的,行政區如果經歷整併(例如鄉升格為鎮、里鄰重劃),要等外掛出新版才會跟著更新。長期經營的站,建議每隔一段時間到後台「外掛」頁面看一下這款外掛有沒有待更新,順手更新能確保下拉資料跟上現況。這對出貨準確度的影響是潛移默化的,長期下來差很多。

驗證下拉選單出現在哪些頁面

下拉選單會出現在兩個地方:結帳頁的帳單與運送地址欄位,以及「我的帳戶」會員中心的地址維護頁;兩邊都應該看到縣市、鄉鎮市、郵遞區號的連動下拉。若只有結帳頁有,代表會員中心頁面可能被主題或快取擋掉,要回頭檢查。

  • 前台加商品到購物車,進結帳頁,檢視帳單與運送地址欄位是否變成下拉。
  • 進 WooCommerce 預設「我的帳戶」頁,點 地址 再點 編輯地址,看這邊有沒有連動。
  • 兩邊的連動邏輯要一致:選縣市帶出鄉鎮市,選鄉鎮市帶出郵遞區號。
  • 測試時用無痕視窗或先清快取,免得看到舊表單誤判外掛沒作用。

這裡有個常被忽略的坑:很多站長只測結帳頁,就放心了。但會員中心的地址編輯頁,才是顧客日後改地址的地方。如果那邊沒有連動下拉,顧客改地址時還是會打錯郵遞區號,退件照樣發生。裝完外掛後,這兩個頁面都該各跑一次,順便用不同的會員角色登入測,因為有些主題會針對登入狀態載入不同範本。配合 會員登入註冊系統一起看,才知道哪個頁面被改寫。

若會員中心頁面沒出現下拉,先別急著說外掛壞了。檢查你的主題有沒有覆寫 form-edit-address.php 這個範本,或是有沒有裝結帳前強制登入之類影響會員流程的外掛,也有人串 LINE 登入造成範本被替換。這幾種情況都會讓外掛的 hook 接不上,下拉自然不出來。

把驗證拆成一個完整的測試矩陣,能避免漏掉邊界情境。帳單地址欄位要測、運送地址欄位要測、會員中心的地址編輯頁要測,三個位置缺一不可。再加上「登入狀態」與「未登入訪客結帳」兩種身分,以及桌面與行動版兩種裝置,組合起來就是一套 12 格的測試表。實務上不必每格都跑,但至少要覆蓋「結帳頁帳單、結帳頁運送、會員中心地址」這三個核心位置,再挑行動版跑一次,因為手機上下拉的觸控體驗跟桌面完全不同,容易出現點不到、跑版的狀況。

結帳表單欄位順序與客製化

下拉選單出現了,但欄位順序很亂、還有多餘欄位,這時要用結帳表單客製化外掛調整。WooCommerce 預設欄位順序不符合輸入習慣,要新增、刪除或重排欄位,用 Checkout Field Editor 之類的外掛即可,不需要改範本檔。

預設順序到底哪裡怪?舉例來說,WooCommerce 把「地址第二行」放在「城市」前面,本地人根本用不到地址第二行,但縣市、鄉鎮市卻被擠到後面。顧客填到一半找不到自己要的欄位,跳出率就升高。退一步看,這是 WooCommerce 為英文地址設計的副產品,我們要做的是把它調成本地習慣。

客製方式難度適合情境風險
Checkout Field Editor 外掛低排序、刪欄位、改標籤可能改掉欄位 ID
functions.php 寫程式中進階客製、條件欄位改版需自行維護
直接改範本檔高完全不建議主題更新被覆蓋

調整時有一個動作絕對要做:記下地址欄位的 field ID。這幾個 ID 是 #billing_state_field、#billing_city_field、#shipping_state_field、#shipping_city_field,可在 WooCommerce 官方結帳欄位文件查到對應說明。後面要調 CSS、要排錯,全靠這幾個名字。調整前先截一張圖存證,萬一被改掉也比對得出來。若是多語站,搭配 Loco Translate 中文化時也要注意欄位標籤別被覆蓋。

調整後務必回到前台重新檢查下拉選單還在不在運作。一個常見的雷是:用 Checkout Field Editor 把縣市欄位改名又改 class,下拉瞬間消失,因為 RY WC City Select 是認 ID 去套下拉的,ID 變了它就認不出來。後來把欄位 ID 改回原本的名稱,下拉立刻回來。調順序可以,改 ID 要三思。

本地地址欄位的理想排序,有一套通用的邏輯可以依循:姓氏、名字、公司(選填)、國家、縣市、鄉鎮市、郵遞區號、地址、電話。背後的原則是「由大到小、由必填到選填」,顧客的心智模型本來就是先國家再縣市、再鄉鎮、再門牌。把這個順序套進 priority 值(數字越小越前面),就能讓結帳表單符合本地人的填寫直覺。與其讓顧客在英文邏輯的欄位順序裡找路,不如把欄位排成他們本來就會填的樣子。

進階一點,還能用 Checkout Field Editor 做條件欄位:只有當顧客選了「公司行號」身分才顯示統編欄位、只有選了某種配送方式才顯示指定時段欄位。這類條件欄位搭配三層連動下拉一起用,能讓結帳表單同時兼顧「輸入正確」與「只問該問的」。做結帳表單客製化時,把這個原則放在心上:每一個欄位都要有它存在的理由,沒有理由的欄位就是摩擦力的來源。

如果你正在規劃整個開店流程,建議把欄位客製和地址下拉放在同一個階段做,免得後來動到欄位結構又得重測一次連動。搭配 金流物流設定一起測,能一次把結帳鏈條走完,也能順手檢查 商品類型建立後,結帳欄位是否仍照預期顯示。

下拉選單顯示樣式調整:CSS 並排

預設每個欄位各佔一整行,視覺上很鬆散,透過 WordPress「外觀、自訂、附加的 CSS」針對地址欄位的 field ID 設定寬度與並排,就能把縣市與鄉鎮市欄位改成各半顯示。前提是欄位的 ID 與 class 沒被其他外掛改掉,否則 CSS 寫了也對不上。

進入點是「外觀 → 自訂 → 附加的 CSS」,不用改主題檔案,這是 WordPress 內建的自訂附加 CSS入口,改完立即預覽。鎖定對象就是前面記下的那幾個地址欄位 ID。下面是一段示意 CSS,重點是思路不是叫你照抄:

#billing_state_field,
#shipping_state_field { width: 48%; float: left; }
#billing_city_field,
#shipping_city_field { width: 48%; float: right; }
.woocommerce-billing-fields.form-row:after,
.woocommerce-shipping-fields.form-row:after { content:''; display:table; clear:both; }

用 width 與 float 把欄位並排,儲存後清快取再到結帳頁確認。喜歡 flex 的人可以把 form-row 換成 flex 容器,原理一樣。話說回來,這段 CSS 沒有放諸四海皆準的版本,不同主題 class 命名不同,Flatsome、Astra、Storefront 的欄位結構都不一樣,你得依自己主題微調。

常見的失效原因清單:

  • 欄位 ID 被結帳客製外掛改掉,CSS 選擇器抓不到。
  • 主題的 form-row 用了不同的 class 包裝,float 失效。
  • 行動版斷點沒處理,窄螢幕下兩欄擠成一團。
  • 快取外掛還在送舊 CSS,改了等於沒改。

行動版的部分尤其要小心。桌面上並排好看,到了手機上兩個各 48% 的欄位會擠在一起難以點選。建議加 media query,在窄螢幕時改回單欄全寬,這也是 RWD 購物網站設計的基本功。如果對 CSS 不熟,可以先看一篇CSS Box Model 觀念或 CSS 入門語法再動手,會少走很多冤枉路。

並排之外,還可以進一步微調下拉框的視覺細節。把 select 的外觀統一成跟其他輸入框一致的高度、邊框、圓角,能讓整張表單看起來是同一套設計語言,而不是下拉突兀地跳出來。統一 select 樣式在不同瀏覽器的呈現差異很大,Safari 與 Chrome 對原生 select 的處理就不同,這也是為什麼很多站會用 appearance:none 把原生樣式清掉再自繪箭頭。這層功夫屬於進階,初學者先把並排與行動版斷點顧好就夠用。

改完一定要清快取再驗證。固定會做三件事:瀏覽器硬重整、清網站快取外掛、清 CDN。三道都過,看到的才是真的結果。想知道快取到底怎麼運作,可以參考快取是什麼與清除設定這篇的說明。

沒生效怎麼辦:快取與欄位 ID 排錯

沒生效幾乎只有兩個原因:一是瀏覽器或快取外掛讀到舊版本,二是結帳表單客製化外掛把地址欄位的 ID 或 class 改掉了,導致外掛抓不到欄位、CSS 也對不上。先清快取,再用瀏覽器開發者工具檢查欄位 ID 是否還是原本的名稱,九成的問題都能在這兩步解決。

  1. 先把三層快取都清掉:瀏覽器硬重整(Ctrl 或 Cmd 加 Shift 加 R)、網站快取外掛的清除鍵、CDN 快取。
  2. 按 F12 開發者工具,點到地址欄位,看 id 與 class 是不是還掛著 billing_state_field 這類原名。
  3. 回想失效時間點:若是裝 Checkout Field Editor 之後才壞,多半是它動了 ID,把 ID 還原或讓 CSS 改對新 ID。
  4. 確認 RY WC City Select 仍在啟用狀態,而且沒被其他地址類外掛搶走欄位。

排錯的習慣是先清快取再看 ID。原因很簡單:清快取不用動腦,三十秒搞定,八成的人到這一步就好了。剩下兩成才需要開發者工具深挖。這個順序省時間,別一上來就翻 PHP。真的要深入,可以暫時停用所有 WooCommerce 相關外掛,只留 RY WC City Select,一個個開回來,就能定位是哪個外掛衝突。

有一種情況特別難抓:欄位 ID 沒變,但 class 被加了後綴。這時下拉本身還在,CSS 卻套不上,看起來像樣式失效。用開發者工具點開欄位,看 class 是不是多了像 wcfe- 之類的前綴,那就是 Checkout Field Editor 的手筆。把 CSS 選擇器改成對應的新 class 就能恢復並排。

把排錯整理成一份症狀對照表,遇到問題直接查表比臨場推理快。症狀一「下拉完全不見」:八成是欄位 ID 被改、外掛被停用、或 hook 被主題擋掉。症狀二「下拉在但郵遞區號沒帶入」:多半是 JavaScript 沒載入,檢查快取是否移除了結帳頁的 inline script。症狀三「下拉在但金流端收到錯的值」:命名一致性被破壞,核對下拉給的縣市值與金流外掛預期的格式。症狀四「桌面正常、手機跑版」:media query 沒設,回到 CSS 並排章節補行動版斷點。症狀五「只有會員中心沒下拉」:主題覆寫了 form-edit-address.php,或會員流程外掛衝突。症狀六「下拉順序錯亂」:priority 被改,核對欄位的 priority 值。

排錯有一個根本原則值得記住:一次只動一個變數。同時改 CSS、改外掛、清快取,問題好了也不知道是哪個動作救的,問題沒好也不知道從哪裡繼續。把動作拆開、每改一個就回前台驗證一次,這種笨方法反而最快定位問題。對排錯沒頭緒的人,這個原則比任何技巧都管用。

如果你懷疑是快取外掛的問題,可以參考WordPress 快取外掛比較或WP Rocket 設定教學,裡面會提到結帳頁這類動態表單通常要排除快取,否則會快取到舊欄位結構。整體網站速度也可以照網站速度優化技巧檢視一次。

排錯到最後如果還是不行,回到一個根本問題:你的站是不是用了太重的佈景主題或裝了太多會改寫結帳的外掛?與其在開店後無止境調 CSS,更實在的做法是開店階段就先把結帳表單的架構定下來,後續維護會輕鬆很多。順手把 網址與永久連結也檢查過,結帳頁的短網址對轉換也有幫助。

結帳頁與整體速度的連動關係

地址下拉雖然只是結帳頁的一小塊,但它牽動的是整張結帳頁的載入與互動效能。下拉的連動靠 JavaScript,如果這段腳本被快取外掛延遲載入或移除,連動就斷;反過來說,如果結帳頁塞太多動態效果,這段腳本也會被拖慢,導致顧客選了縣市卻等了兩秒才看到鄉鎮市。結帳頁的速度與下拉的正確性是綁在一起的,不能分開優化。

速度對結帳轉換的影響有公開數據佐證。Vodafone 的案例顯示,LCP 改善 31% 之後,銷售增加了 8% [來源:web.dev〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。Rakuten 24 投入 Core Web Vitals 優化之後,每位訪客的營收提升 53.37%,轉換率提升 33.13% [來源:web.dev〈Why does speed matter?〉 https://web.dev/articles/why-speed-matters 2026]。這兩組數字講的是整體網站速度,但結帳頁是轉換漏斗的最後一哩,速度對它的影響會被放大。把下拉腳本保留在該在的位置、別讓快取亂動結帳頁的動態內容,就是讓這段最後一哩保持順暢的基本功。

實務上,結帳頁在快取設定裡通常要被列為例外,不該被全頁快取。理由很直接:結帳頁有顧客專屬的購物車內容、運費試算、欄位預填,快取下去等於把 A 顧客的狀態送給 B 顧客看。多數快取外掛預設會偵測並排除結帳頁,但有些站會手動調過設定把結帳頁也快取,這時下拉腳本就會跟著出問題。確認結帳頁不在快取範圍內,是排錯之外另一個值得定期檢查的項目。

進階應用與替代方案

裝好下拉只是起點,真正把它用好還能延伸到幾個方向。第一是搭配運費自動計算,讓不同鄉鎮市直接對應不同運費區,連動下拉選的值就是運費判斷依據。第二是結合稅金設定,用縣市欄位決定是否課稅,下拉的精確值讓稅務不會算錯。

運費區的搭配有一個小觀念要建立。WooCommerce 的運費區(Shipping Zone)是靠國家與州/省來劃分的,本地情境下這個「州/省」對應的就是縣市欄位。把每個縣市歸到對的運費區,顧客選了縣市之後,系統就自動套用該區的運費規則。這時三層連動下拉的精確值,直接餵進運費判斷邏輯,免去人工對照表的誤差。對做離島加收、偏遠地區加收的站,這個搭配幾乎是必備。

第三是出貨流程。地址欄位下拉後,匯出的訂單出貨單列印與LINE 推播通知都能拿到結構化資料,物流串接更穩。這也是為什麼很多做綠界金物流串接的站長,會堅持用 RY 的工具鏈:欄位值乾淨、金流串接穩,兩邊是同一套命名邏輯。如果你的站還在用 PayPal 收款也能並存,地址下拉與金流無關。

至於替代方案,若你嫌 RY WC City Select 的縣市資料來源不夠新(例如行政區整併後的鄉鎮市),可以考慮付費的 YITH 外掛或自行用 functions.php 維護資料。但對絕大多數站長,RY 這款免費方案已經夠用,自己維護鄉鎮市清單的成本遠高於它的價值。

方案費用連動層級維護成本
RY WC City Select免費縣市、鄉鎮市、郵遞區號低,免設定
Checkout Field Editor 自建付費僅靜態清單高,需自維資料
functions.php 客製免費任意最高,需寫程式

與其他結帳優化外掛的搭配

地址下拉很少單獨存在,它通常是結帳優化的一環,旁邊還掛著其他外掛。理解它跟誰搭得好、跟誰會打架,能少踩很多坑。相容性高的搭檔是同作者的金物流外掛,命名與 hook 一致;風險較高的搭檔是任何會改寫 state、city、postcode 欄位的外掛,這類外掛會直接搶欄位控制權,造成連動失效。

搭配外掛類型相容性注意事項
RY WooCommerce Tools(金物流)高同作者,命名一致
Checkout Field Editor(欄位編輯)中勿改地址欄位 ID,留意 class 前綴
直接結帳/快速結帳外掛視實作若繞過原生結帳頁,hook 可能接不上
多步驟結帳外掛視實作需測試下拉在每一步驟是否都在
其他縣市連動外掛低兩者搶欄位,擇一使用

判斷一款外掛會不會跟地址下拉打架,有一個快速的檢查法:看它的功能說明是否提到「修改結帳欄位」「客製化 checkout fields」「改變 shipping address」。會動到這些的外掛,都有潛在衝突風險。安裝前先到它的說明頁或 changelog 搜尋 checkout、address、state 這幾個關鍵字,有提到就要有心理準備做相容性測試。寧可裝之前多花五分鐘查,也不要裝完之後花五小時排錯。

還有一點容易被忽略:外掛能幫你把下拉做起來,但顧客體驗的提升要靠整段結帳流程的設計。搭配優惠券與免運費設定、進階促銷折扣、社群登入,把結帳的摩擦力降到最低,下拉選單的價值才會真正發揮。結帳頁本身的 SEO 也能透過商品頁 SEO 優化的觀念延伸,讓流量進得來也留得住。

結帳頁 UX 排查清單

把前面所有觀念收攏成一份可逐項打勾的清單,從上架前到營運中都能用。這份清單的設計原則是:每一項都有一個明確的「通過條件」,不是模糊的「檢查一下」,而是具體到能直接判斷過或不過。照著走一遍,能系統性地把結帳頁的常見破洞補起來。

  • 結帳頁帳單地址欄位已出現三層連動下拉,選縣市帶出鄉鎮市、選鄉鎮市帶出郵遞區號。
  • 運送地址欄位同樣有連動下拉,且行為與帳單地址一致。
  • 會員中心「編輯地址」頁也有連動下拉,顧客日後改地址不會退單。
  • 行動版結帳頁的下拉可正常觸控點選,並排欄位在窄螢幕自動轉為單欄。
  • 地址欄位的 field ID 保持原名(billing_state_field 等),未被其他外掛改寫。
  • 結帳頁已排除全頁快取,動態欄位與下拉腳本能正確載入。
  • 欄位順序符合本地習慣:國家、縣市、鄉鎮市、郵遞區號、地址,沒有多餘的英文地址欄位擋在前。
  • 已用不同會員角色測過,登入與訪客兩種身分都能正常結帳。
  • 運費區已依縣市正確劃分,離島或偏遠地區的加收規則能自動套用。
  • 訂單匯出與物流串接收到的縣市鄉鎮值,與下拉給的值命名一致。

這份清單不是一次性的上架檢查,營運中每隔一段時間也值得重跑一次。原因是結帳頁會隨著外掛更新、主題更新、新增金物流而不斷變動,今天通的項目明天可能因為某次更新而失效。把這份清單當成結帳頁的健康檢查表,定期走一遍,能在顧客反映退件之前就先發現問題。

常見問題 FAQ

RY WC City Select 是免費的嗎?

免費。它收錄在 WordPress.org 外掛庫,直接搜尋安裝即可,不依賴任何付費訂閱,啟用即套用三層連動下拉。

需要寫程式才能用嗎?

不用。安裝啟用後地址欄位會自動接上三層連動下拉,完全不碰 PHP。只有要改下拉的縣市資料來源時,才需要動程式或請原作者協助。

可以跟金物流外掛一起用嗎?

可以。它與同作者的 RY WooCommerce Tools 相容性高,金物流串接與地址下拉能並存,因為兩者由同一人維護,命名與 hook 邏輯一致。

裝了之後下拉為什麼沒出現?

先清快取(瀏覽器、網站快取外掛、CDN),再用 F12 開發者工具檢查地址欄位的 id 是否還是 billing_state_field 等原名。若裝了 Checkout Field Editor 改掉 ID,把 ID 改回即可。

會員中心的地址下拉怎麼啟用?

不用額外啟用,外掛啟用後會同時套用到「我的帳戶」的地址編輯頁。若該頁沒出現下拉,檢查主題是否覆寫 form-edit-address.php 範本,或有沒有會員流程外掛衝突。

下拉框能改成並排顯示嗎?

可以。到「外觀 → 自訂 → 附加的 CSS」,針對 billing_state_field、billing_city_field 等欄位 ID 設定寬度與 float 或 flex 即可。不同主題 class 不同,CSS 需依主題微調。

結帳欄位順序可以調整嗎?

可以,用 Checkout Field Editor 之類的外掛拖曳排序即可,不要直接改 WooCommerce 範本以免被覆蓋。調整後務必回前台確認下拉連動仍正常。

RY Tools 還有哪些外掛?

同作者另有 RY WooCommerce Tools,主打綠界、藍新等本地金物流串接,常與地址下拉搭配使用,構成本地 WooCommerce 開店的常見工具鏈。

跨境電商站也適合裝這款外掛嗎?

視出貨結構而定。純本地出貨的站最適合,裝了直接受益;同時做本地與海外的雙線站要先測試海外地址欄位是否受到影響,因為外掛預設接管的是本地三層格式;純跨境、完全不在本地出貨的站則無必要,本地縣市下拉對海外結帳沒有價值。

下拉的鄉鎮市資料過時了怎麼辦?

外掛的縣市鄉鎮清單是隨版本一起更新的,行政區若有整併要等外掛出新版。到後台「外掛」頁面定期檢查是否有待更新版本,更新即可拿到最新資料。急需修正也可自行用 functions.php 覆寫,但要承擔自行維護的成本。

下拉選了縣市卻沒帶出鄉鎮市是什麼原因?

這通常是連動的 JavaScript 沒正常載入,常見於結帳頁被快取外掛延遲或移除了 inline 腳本。先確認結帳頁已排除全頁快取,再檢查瀏覽器開發者工具的 Console 是否有報錯。若腳本載入正常仍無連動,檢查欄位 ID 是否被改成外掛認不出的名稱。

把結帳地址做成三層連動下拉,真正省下的不是裝外掛那五分鐘,而是後續每一筆訂單少一次退件、少一通客服。把結帳表單客製化、CSS 並排、快取與欄位 ID 排錯這三件事一次走順,這個外掛的價值才算發揮完整。要延伸,可以再接著處理訂單信件設計、會員購物金、願望清單,把整段購物體驗補齊。對型錄站還能加 型錄模式或 詢價表單,讓網站更貼近實際商業流程。

相關文章