在現在幾乎無電不商的趨勢下,電商網站建置 是許多想經營網路商店的人,開始網上生意的第一步。搭配強大的 WooCommerce 開店外掛,簡單設定一下很快就能建置成功。
在台灣電商的結帳頁面,很常看到地址下拉選單,也就是選擇縣市後,系統會自動帶入下面的鄉鎮市給顧客選擇,並且最後帶入郵遞區號。
這是滿貼心的設計,一來可以防止顧客打字打錯,二來可簡化購買流程,對顧客體驗有很好的提升。
這篇文章,我會用簡單的流程帶大家實現「 WooCommerce 縣市欄位下拉選單 」功能,如下。
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!打完收工!
常見問題
RY WC City Select 外掛是什麼?
RY WC City Select 這款外掛,只要安裝後在「 結帳頁面的帳單&運送地址 」、「 會員中心的地址維護頁面 」,就會自動套上縣市、鄉鎮市的下拉選單。
動作流程:在選擇「 縣市 」後,就會自動帶入以下的「 鄉鎮市 」,在選擇「 鄉鎮市 」之後的郵遞區號也會自動帶入號碼,是不是非常方便!
如何客製化結帳表單?
這可以用 WordPress 外掛處理,更多 Checkout Field Editor 外掛教學,就能簡單的新增、編輯、刪除、排序囉!
RY Tools 還有其他的外掛嗎?
有的,除了這篇文章推薦的地址下拉選單,也有金物流串接的外掛,更多 RY WooCommerce Tools 外掛教學。
更多其他 WordPress 相關外掛,也可前往 RY 大的 幻想的商店 支持一下。
聯絡犬哥網站
在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!
接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。
資源一:犬哥網站(專業 WordPress 網頁設計&SEO 行銷公司)
如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&SEO 行銷公司),請專家協助你會更容易!
我們有多年網頁設計、SEO 網站排名經驗,加上上百個高質感作品、SEO 實戰案例,絕對能滿足您的需求!
資源二:WordPress+SEO 超強線上課程
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等豐富內容,一次教會你。
課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?
這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等,大幅提升行銷能力。
帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!