1. 首頁
  2. »
  3. 網站架設
  4. »
  5. WordPress
  6. »
  7. [外掛] Woocommerce 自訂結帳表單欄位,讓表單符合台灣的使用習慣
WordPress 網站架設

[外掛] Woocommerce 自訂結帳表單欄位,讓表單符合台灣的使用習慣

2020/10/12

梅問題-[外掛] Woocommerce 自訂結帳表單,讓表單符合台灣的使用習慣
  Woocommerce 雖然說架設很方便也很快速,但礙於是由老外所開發,所以有些操作習慣會與台灣有些不同,而最常見的就是結帳表單的欄位,由於台灣並非像國外那麼的複雑,因此只需要一個簡易的地址欄位就夠用了,再加上一般寄送只需姓名、地址、電話,所以就可將一些不必要的欄位給隱藏起來,而早期梅干都用偷吃步的方法,直接在欄位塞入空白字串,再用CSS將不必要的欄位隱藏起來,但這方法並不是那麼的完美。

所以梅干最近就花了點時間,找到一隻相當好用的Woocommerce自訂表單外掛,不但可以自行調整要顯示的欄位外,甚至也可以增加所需的欄位,相當的簡易好上手,因此有在使用Woocommerce的朋友,也為結帳表單中的欄位,感到困擾的朋友,這隻外掛不妨可試試看囉!


Checkout Field Editor
外掛名稱:Checkout Field Editor
適用環境:WordPress Woocommerce
外掛下載:https://wordpress.org/plugins/woo-checkout-field-editor-pro/

Step1
首先,先進到WordPress後台,再到外掛面板的右上方的搜尋框中,輸入「Checkout Field Editor」關鍵字,找到後再按立即安裝與啟用。
梅問題-[外掛] Woocommerce 自訂結帳表單,讓表單符合台灣的使用習慣
Step2
當啟用完畢後,在Woocommerce的選項下,會看到Checkout Form的選項,點一下就會入自訂表單欄位的畫面。
梅問題-[外掛] Woocommerce 自訂結帳表單,讓表單符合台灣的使用習慣
Step3
接著先將不要顯示的欄位給勾起來,再按下方的「Disable」鈕。
梅問題-[外掛] Woocommerce 自訂結帳表單,讓表單符合台灣的使用習慣
Step4
當出現灰色字,表示該欄位已被隱藏,同時可利用左邊的控制圖示,拖曳並改變表單排序。
梅問題-[外掛] Woocommerce 自訂結帳表單,讓表單符合台灣的使用習慣
Step5
都調整好欄位後,先將欄位儲存起來。
梅問題-[外掛] Woocommerce 自訂結帳表單,讓表單符合台灣的使用習慣
Step6
當儲存好後,再點欄位後方的Edit鈕,就可個別的設定欄位名稱、提示詞,或是否為必填。
梅問題-[外掛] Woocommerce 自訂結帳表單,讓表單符合台灣的使用習慣
Step7
都設定好後,再到前端頁面來測試看看,當進入結帳頁面時,就會看到表單欄位,變成剛剛所設定的欄位。
梅問題-[外掛] Woocommerce 自訂結帳表單,讓表單符合台灣的使用習慣
Step8
當使用者填寫完畢後,在Woocommerce的訂單下,也會看到相關的資訊,如此一來結帳表單的欄位,不再落落長啦!
梅問題-[外掛] Woocommerce 自訂結帳表單,讓表單符合台灣的使用習慣