如何設定 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 網站架設流程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!

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

資源一:犬哥數位(專業 WordPress 網頁設計公司)

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

WordPress 網頁設計公司|犬哥數位

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

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

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

WordPress 模組電子書

資源三:官方教學資源(含 FB 社群解答)

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

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

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

犬哥網站:WordPress 架站 x SEO 優化技巧,一站式學習!

希望這些對你有所幫助,祝一切順利啦!

關於作者

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

犬哥網站

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

在〈如何設定 WooCommerce 縣市 / 鄉鎮市的下拉選單?〉中有 6 則留言

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

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

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

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

  3. 謝謝你的外掛,我想請問一下如何實現中文化?目前下拉都顯示英文的。謝謝

發佈留言

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

返回頂端