在WooCommerce加入客製化使用者欄位

前言

由於業主有增加WooCommerce客製化使用者欄位的需求,所以這篇文章想分享一些客製化使用者欄位經歷。因為預期會有許多後續寄送收據、報帳與聯絡需要,業主想在使用者註冊時就先填好資料,或者使用社群網站 (Facebook or Google) 一鍵登入後能繼續填寫客製化欄位,所以在註冊表單、編輯個人帳號、購物車結帳前,後台查詢訂單這四處要加上客制化欄位。

搜尋參考資料有找到一位WooCommerce plugin開發者寫的詳細教學文章,英文文件但值得一看,以下參考他的文章增加業主所需的客製欄位。code的部分要打包成外掛Plugin或者是MU Plugin (Must Use Plugin)都可以。

在WooCommerce加入客製化使用者欄位

定義客製化欄位

要加入客製化欄位得先知道要放哪些欄位、類別跟必塡/選填,所以得先定義這些欄位。

 

這邊的例子是建立名字(文字欄位),身份與類別兩個下拉式選單:
type是欄位類別可以選:

  • Text 文字
  • Textarea 文字區塊
  • Select 下拉式選單
  • Country 國家
  • Checkbox 單勾選
  • Number 數字
  • Password 密碼
  • Email
  • Tel 電話

原文教學內還有教怎麼做單選的radio button與多勾選。

掛上欄位

定義好欄位,使用原文的驗證與更新functions,掛到對應的action hooks:’woocommerce_register_form’, ‘woocommerce_edit_account_form’,如名稱,分別是掛到註冊表單與個人資訊表單就可以用了。

 

更新驗證表單資料 & 訂單成立後更新資料

驗證與更新這邊沒有修改內容就不多說,倒是訂單結帳前也有欄位要填,所以在訂單成立之後得更新資料,因為原本的儲存function是以user為主,所以我另外改了一個以訂單為輸入的function,把資訊填在user/order的meta data,其實寫在user的metadata就好了,只是想說後台是讀取訂單資訊就寫在訂單內了,可以少一次query (誤)。

 

以First Name欄位替代First Name + Last Name欄位

這個部分忘記是參考哪位前輩寫的文章,總之是簡化姓名欄位為一個。

 

結論

照著開頭那篇文章可以好好的客製化需要的欄位,搭配WooCommerce文件與討論,就可以完成此客製化功能。
大概會像這樣:

[ux_slider]

[ux_image id=”311″ image_size=”medium” width=”30″]

[ux_image id=”309″ image_size=”medium” width=”50″]

[ux_image id=”341″ image_size=”medium” width=”50″]

[/ux_slider]