如何設定 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教學社團
小犬網站:wordpress教學社團

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

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

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

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端