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

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

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

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

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

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


1. RY WC City Select 是什麼?

WooCommerce 結帳地址下拉選單:RY WC City Select 外掛
WooCommerce 結帳地址下拉選單: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 外掛,然後安裝+啟用它即可。

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

前往結帳頁面,觀看成果

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

前往 WordPress 結帳頁面
前往 WordPress 結帳頁面

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

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

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

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

前往 WooCommerce 預設的「 我的帳戶 」頁面
前往 WooCommerce 預設的「 我的帳戶 」頁面

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

前往 WooCommerce 的地址編輯
前往 WooCommerce 的地址編輯

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

WooCommerce 縣市欄位下拉選單:地址下拉選單出現啦!
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!打完收工!

WooCommerce 地址下拉選單,樣式調整完成!
WooCommerce 地址下拉選單,樣式調整完成!

常見問題

RY WC City Select 外掛是什麼?

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

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

如何客製化結帳表單?

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

RY Tools 還有其他的外掛嗎?

有的,除了這篇文章推薦的地址下拉選單,也有金物流串接的外掛,更多 RY WooCommerce Tools 外掛教學

更多其他 WordPress 相關外掛,也可前往 RY 大的 幻想的商店 支持一下。


WordPress 學習資源

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

如果你沒有時間自己架站,或是想委託專人服務,那可以參考我們的 網站建置服務

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能搭配 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 犬哥網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

犬哥網站:wordpress教學社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

6 thoughts on “如何設定 WooCommerce 縣市 / 鄉鎮市的下拉選單?”

  1. 小犬好,感謝wp的架站資源一直的很時用
    目前正在檢查商店訂單流程,想詢問使用RY套用綠界金流,在結帳點選支付方式時,旁邊都會有綠界的ecpay 大大logo。是否有辦法刪除(覺得不是美觀? 感謝您!

    1. 嗨,這部分可能要用 CSS 程式碼隱藏,用 Google 開發者工具,找到相對應的標籤元素,然後加上 display:none; 應該就可以了。

  2. Hi 犬哥您好!
    先跟您說聲謝謝!您提供的教學都相當有用且簡單清楚,對我的架站過程相當有幫助!

    我參考您的教學同時使用了Checkout Field Editor 與RY WC City Select來達成選單選擇城市與鄉鎮的功能。
    在購物車頁面的運費試算功能都正常,進到結帳頁面後,先前選擇的地區也會直接導入。但若這時更改了縣市的選項,則鄉鎮市的選單功能就會失效。
    請問這方面的問題該如何解決呢? 謝謝!

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。

回到頂端