搭配 WooCommerce 的 2 個好用外掛:客製訂單、客製報表

/

本篇要解決的問題

最近臨時幫朋友用 WooCommerce 架了一個小型的購物網站。由於是第一次用 WooCommerce,覺得雖然原有的功能可以解決大部份的需求,但如果要符合台灣的習慣,有些功能是原本沒有的,比如:地址的部份只用一欄而不是國外的好幾欄。

本篇就是幫朋友架站時,找到能解決這些問題的二個套件。

主要解決的問題有:

  1. 在下訂單的表單可以客製,而不是只能用原本的那些欄位。
  2. 可以客製下載的報表欄位,只下載我們想要看的,比方一張報表裡有編號、有收件地址、有品項、有數量、有金額。

客製訂單:Checkout Field Editor for WooCommerce

WooCommerce 的預設結帳單,說實話不太好用,長這樣:

WooCommerce 預設結帳表單
WooCommerce 預設結帳表單

基本上,從名字分成名字、姓氏,就不是台灣消費者的填寫習慣。

再看到填寫地址的部份拆成了 4 個 input,就,完全的,不知道該怎麼填寫 XD,這不是台灣的習慣啊啊啊啊啊!(為什麼啊字還要多到掉行啊)

另外,如果我們還需要其它的欄位呢?

比方需要把電話分成手機、室話?

只用預設的表單就遇到這些使用上的問題。

後來花了一點時間,找到了一個好用的套件:Checkout Field Editor for WooCommerce

安裝完後,在選單「WooCommerce」的部份就會出現一個「Checkout Form」:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

選單中出現 Checkout Form
選單中出現 Checkout Form

隱藏指定欄位

他的介面是英文的,但如果常看HTML,尤其是 form 那部份,會還蠻適應的:

Checkout Field Editor for WooCommerce 後台介面
Checkout Field Editor for WooCommerce 後台介面

一進到後台看到的這些欄位,就是 WooCommerce 結帳單預設的欄位,如果想要讓指定的欄位不出現,就勾選那欄,然後點上方的「Disable」,那個欄位就不會出現在結帳表單中。

比方我們想要把「名字」、「姓氏」這格只留下「名字」就好,那就勾選「billing_last_name」那欄,再按下「Disable」,按下「Save changes」,那欄就會帶有透明度,代表不會出現在頁面上:

Disable 指定欄位
Disable 指定欄位

當然,也可以直接選擇「Remove」去刪掉這些欄位,但如果某一天又需要再用到的話,就得憑記憶去把它建立回來,所以這邊比較建議是用 Disable,如果覺得會干擾閱讀就把這些 Disable 的欄位都往下拖,拖到表單底部。

三種區塊設定

結帳表單分為三塊:購買人、收件人、備註。

我們一般網購,也常常會有購買人跟收件人是不同的情況,因此表單上也會分開來處理。

Checkout Field Editor for WooCommerce 把這三塊拆成三份,在這邊:

可修改 購買人、收件人、備註
可修改 購買人、收件人、備註

Billing Fields:購買人的表單。

Shipping Fields:收件人的表單。

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

Additional Fields:備註。

記得三個表都進去看一下,購買人、收件人的欄位能一致比較好,使用者填單時才不會錯亂。


客製報表:Advanced Order Export For WooCommerce

Advanced Order Export For WooCommerce 是個好外掛,它解決一個很大的需求,就是想要下載客製報表的部份。

安裝完後,選單中會出現一個「Export Orders」,就是這個外掛的功能:

選單出現 Export Orders
選單出現 Export Orders

它的介面也是英文的,而且第一次使用時會花一些時間理解。

Advanced Order Export For WooCommerce 後台介面
Advanced Order Export For WooCommerce 後台介面

光看到可以有多種檔案格式下載就要推薦了,WooCommerce 原有的是 CSV 檔,但用過 CSV 檔的人就知道,中文的很常開起來變亂碼 = =。

Augustus 比較會用到的就是上圖標紅框的部份,可以設定我們要的表格上有哪些欄位,點開後會看到這樣:

Set up fields to export 展開
Set up fields to export 展開

左邊是會匯出的欄位,右邊是總共有哪些欄位可以加進去,直接把右邊的項目拖拉到左邊,就可以放進去。

左邊匯出時的欄位標題可以修改,所以可以改成中文。

這邊簡單說明一下:

Billing,是指「購買者」。

Shipping,是指「收件者」。

一開始看見同樣是「Email」,會出現二個,一個帶 Billing,另一個帶 Shipping,還搞混了一下。

預設匯出來的欄位,是一個產品會產生一行,像這樣:

預設報表排列方式
預設報表排列方式

但可以看到,訂單編號「389545」是一張單裡有二件商品,卻把它拆成二行,不好閱讀也容易誤會。

只需要在「Fill order columns for」這一項改勾成「1st row only」就可以解決了:

勾選 1st row only
勾選 1st row only

匯出的報表就會是這樣:

1st row only 的產出報表
1st row only 的產出報表

一個缺點

目前使用 Advanced Order Export For WooCommerce 覺得很尬以,但有一個缺點,就是客製報表只能客製一張,沒辦法存成多張使用。

比方我們建了一個以客戶為主要維度的表,要改用成以產品為主的表時,原本花了許多時間建立起來的客戶表就會被打掉重練。


以上二個外掛,就是針對 WooCommerce 購買、報表上的好用功能。

其實還有一些是用過也覺得不錯的,像是會員、安全性,但因為性質不同,就先不寫在這篇。

Summary
搭配 WooCommerce 的 2 個好用外掛:客製訂單、客製報表
Article Name
搭配 WooCommerce 的 2 個好用外掛:客製訂單、客製報表
Description
本篇大綱:本篇要解決的問題。客製訂單:Checkout Field Editor for WooCommerce。客製報表:Advanced Order Export For WooCommerce。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Google Maps

Google Maps API 學習筆記 – 6:畫新冠肺炎分佈圖

PWA

PWA 學習筆記 – 4:manifest.json

API

Instagram 基本顯示 API :抓取公開 IG 資料、相片、影片

Front-End

IntersectionObserver:上篇-基本介紹及使用

Vue

Nuxt.js 引用 Firebase SDK

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:下篇 – 三大步驟

Apps Script Google

Google Apps Script 讀寫 Cloud Firestore 資料

Firebase Google

Firebase Dynamic Links API 做一個自己的縮網址生成器

Front-End

像 Medium 的漸近式圖片加載

API Front-End

WebSocket 基本介紹及使用筆記

訂閱
通知
guest
2 Comments
最舊
最新
Inline Feedbacks
看所有留言
Jennie
Jennie
5 月 之前

哈囉哈囉
想請問怎麼解決下載CSV打開是亂碼的問題呢?
感謝

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.