WooCommerce 預訂商品教學 –  Pre-Orders 外掛加入預訂服務

WooCommerce 預訂商品教學 –  Pre-Orders 外掛加入預訂服務 內容綱要:

1. WooCommerce 商品預訂功能外掛設定步驟

2. WooCommerce 預訂操作流程與訂單管理

WooCommerce 預訂商品教學 主要是在說明如何為線上銷售商品加入預訂、預購功能,使用的是 WooCommerce 官方開發的外掛 – Pre-Orders ,之所以會推薦使用付費外掛,是因為 Pre-Orders 與 WooCommerce 有相當不錯的程式相容性,穩定性也比較好,而且在未來 WooCommerce 更新時,Pre-Orders 也會跟隨同步,對電商網站而言訂單管理部分是不允許出錯的,因此鵠學苑會建議使用付費外掛來做訂單預購的功能。

本篇教學中將說明如何設定 WooCommerce Pre-Orders 外掛,並且會有完整的預購商品下訂單的操作流程,只要比對設定項目與流程內容,相信能很快對如何為商品加入預訂的操作方法有全面性的了解。

( 注意事項:鵠學苑沒有為 Pre-Order 外掛背書,與 WooCommerce 也沒有合作關係,任何鵠學苑讀者購買此外掛我們都不會獲得佣金或費用,純粹推薦分享而已喔!)

WooCommerce 下載點:https://tw.wordpress.org/plugins/woocommerce/

WooCommerce  Pre-Orders 說明文件:https://docs.woocommerce.com/document/pre-orders/#section-6

WooCommerce Pre-Orders 介紹與購買:https://woocommerce.com/products/woocommerce-pre-orders/

• WooCommerce Pre-Orders 外掛設定方式  

第一步:下圖是 WooCommerce 官網對 Pre-Orders 外掛的介紹與購買頁面,可以點擊上方提供的連結進入。

WooCommerce 預訂商品教學

 

第二步:下載 WooCommerce Pre-Orders  安裝並啟用後,在設定中可以找到 Pre-Orders 設定項目。

WooCommerce 預訂商品教學

 

第三步:下圖中圈選的欄位分別是設定預購商品頁面中的按鈕及說明文字,較快的設定方式可以參考第二張圖片內容,由上至下對應的是預訂商品、立即預訂、預購截止時間、預購期間,當然這些文字是筆者在製作網站時所選出較為適合的說明方法,各位可以按照自己喜好做變動。

在 Product Message 中欄位所顯示的 {availability_date} 代表的是預購截止日期,格式為 年-月-日,是由外掛函數所控制,請不要刪除或更改。

WooCommerce 預訂商品教學

WooCommerce 預訂商品教學

 

第四步:會、下圖中所設定的是購物車與結帳頁面顯示的說明文字,同樣請參考第二張圖,{order_total} 代表是單一預購商品所需支付的總金額。

WooCommerce 預訂商品教學

WooCommerce 預訂商品教學

 

第五步: Shop Loop Product Message  欄位設定的文字就是顯在商店頁面的商品彙整中,只有設定可預購的商品才會顯示,如下圖所示。

WooCommerce 預訂商品教學

 

下圖是設定 Single Product Page Message 的文字,會顯示在單一預購商品頁面中。

WooCommerce 預訂商品教學

 

第六步:接者說明單一商品設定預購功能,進入單一商品編輯頁面中商品資料的區域,首先必須設定商品庫存,第一存貨數量為零,第二允許無庫存下單,這其實是邏輯性的基本條件,只有沒庫存的商品才會用到預購功能。

WooCommerce 預訂商品教學

 

完成後到 Pre-Order 頁籤中,勾選第一項與允許此商品預購,第二項設定商品到貨時間,第三項如果商品代購有費用可以填入,第四項中 Upon Release 是設定預購商品到貨後顧客才需付款,Uponfront 是商品預購時就要先結清款項。完成後記得更新商品。

WooCommerce 預訂商品教學

 

• 商品預訂流程測試及後台訂單管理說明

第一步:第二小節將介紹預購商品流程,在剛剛設定可預購的商品中點選預訂商品,補充說明,按鈕文字是在第一小節第三步驟中 Add to Cart Button Text 欄位中編輯的。

WooCommerce 預訂商品教學

 

第二步:在購物車介面中會顯示預購截止時間,也可以變更為預購商品到貨時間。下方總計的位置會有預購時間到期後需支付的款項。

WooCommerce 預訂商品教學

 

第三步:筆者在此商品中設定交易方式為到貨後付款,因此在結帳頁面的商品說明區域會有延後付款的說明。

WooCommerce 預訂商品教學

 

第四步:當顧客下單後,會跳轉到下圖畫面,會有關於預購商品的說明。因為筆者是使用購物網站範例,也就是沒有正式對外營業的 Demo 網站,因此沒有設定付款方式,如果說網站有設定線上轉帳或者貨到付款等,在結帳頁面中就會出現選項,而不會像下圖中只有延後付款的字樣。如何設定 WooCommerce 付款方式?請參考:WooCommerce 教學(付款、帳號)- 付款方式、帳戶操作、隱私權設定

WooCommerce 預訂商品教學

 

第五步:下圖是顧客下單之後會收到的電子郵件通知信,同樣會有預購商品的詳細說明,預購商品電子郵件的設定與一般商品是不一樣的,位置是在 WooCommerce 設定中的電子郵件,會有 Pre-ordered 專屬電子郵件設定項目,操作方式可參考:WooCommerce 教學(電子郵件設定) – 通知設定與進階選項

WooCommerce 預訂商品教學

 

第六步:在 WooCommerce 子選單中會有專屬預購商品的選項,進入後看到顯示綠色的項目就表示此預購訂單已成立,在 Order 選項中可以進入到此筆訂單的內容。

WooCommerce 預訂商品教學

 

第七步:會在 Action 頁籤中可以做發送電子郵件、更改預購商品交貨日期等動作,以下介紹:

  • E-mail:向所有顧客告知預購商品目前到貨狀況,或者商品資訊變更等,操作方式為選擇預購商品,輸入訊息,就能一次發送給所有預訂選定商品的顧客。
  • Change Release Date:變更預購商品到貨日期,可以決定是否要以電子郵件通知所有購買此商品的顧客。
  • Complete:完成所有預購商品的訂單,如果是以線上刷卡付費的客戶將會向銀行請款,同樣可以選擇是否通知顧客商品已到貨。
  • Cancel:如果預購商品無法出貨,可以在此統一取消預購訂單並通知所有顧客。

WooCommerce 預訂商品教學

 

第八步:在訂單頁面中,預購商品的狀態會有 Pre Ordered (已預購) 的標示。

WooCommerce 預訂商品教學

結語:

WooCommerce Pre-Order 外掛真的是一項筆者相當推薦啟用的附加程式,就筆者建立購物網站的經驗,第三方的 WooCommerce 外掛很少能做到將所有設定選項與操作說明做得如此完整,只需要設定幾個項目,就能夠完成商品預購功能的變更,而且在電子郵件以及商品訂單中又能獨立顯示預購商品區域,讓網站管理員不需要花費時間自行篩選或者設定電子郵件內容,就筆者實測狀況而言,Pre-Order 是真的有達到付費外掛的水準,建議各位可以參考使用喔!(

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

WooCommerce 教學相關文章:

WooCommerce 加入願望清單 外掛教學 – 多元化產品比較功能

WooCommerce 帳戶社交登入外掛 – Social Login 快速註冊會員

WooCommerce 自訂商品頁籤 教學 ,加入更多商品詳細資訊

WooCommerce 自訂結帳表單 – Checkout Field Editor 外掛教學

WooCommerce 密碼強度 設定外掛教學 − 加快網站註冊流程

WooCommerce 教學(商品設定) – 商店頁面、庫存管理及可下載商品

網站架設知識推薦閱讀:

Site Kit WordPress Plugin – Google SEO 整合工具外掛介紹

Google 搜尋 新增簡易指令:before: & after 快速篩選搜尋結果

WordPress 市佔率再創新高,2019 年成長至 33.4%!

分享在 facebook
Facebook
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top