搭配 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

隨選筆記文

Vue

用Vue CLI 3 + Vuetify 製作說明頁面

Bot Telegram

Telegram Bot學習筆記-5:取得使用者大頭照

Bot Telegram

Telegram Bot學習筆記-2:用google apps script接收/推播訊息

Firebase Google

Firebase Cloud Firestore 常用功能筆記

Front-End

一些有趣的 CSS 選擇器

Front-End

從使用者輸入網址,到瀏覽器呈現出來,經過了哪些過程?

Analytics Google

GA:啟用Web+APP報表

WordPress

如何用 MAMP 在本機安裝 WordPress

Firebase Google

Firebase Authentication 第三方登入 – Google、FB

Front-End

用 Microsoft Clarity 網站分析工具,觀察使用者行為

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

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

Let's Write

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