search
top

WooCommerce購物流程前後台操作示範

  經過前面幾節的操作設定,相信大家已經讓自己的網站擁有電子商店的功能了。但是如前面一節所說的,之前我們選用的佈景主題和WooCommerce不太相容,所以在排版上沒有那麼漂亮,所以在這一節中,我們另外使用一個架設在WebHostingpad主機上的WordPress網站http://shop.104es.net來做示範,在這個網站中,我們選用WooCommerce推薦的免費佈景主題Shopping來安裝,在排版上和WooCommerce搭配地非常完美,如果你一開始就有打算建立電子商店網站的話,推薦使用喔。Shopping佈景主題如下:

ch06101

  在安裝的時候,因為它是Omega的子佈景主題,所以會順便把Omega這個佈景主題一起安裝上去:

ch06102

  在啟用這個佈景主題之後,它還去檢查WooCommerce是否已安裝,如果沒有的話,會有以下的提醒(上面那一行英文字說的):

ch06103

  只要按下「Begin installing plugin」這個連結安裝WooCommerce,如果看到下面這樣的介面,移到外掛名稱下啟用(Activate)就好了。

ch06104

  再來就像是在之前說明的,要按下「Install WooCommerce Pages」才算是完成完整的安裝動作。另外,再按下「Update Translation」可以更新翻譯檔,讓WooCommerce可以講中文,這個很重要喔。

ch06105

  WooCommerce的頁面安裝完畢之後,可以到頁面介面去看看,如果這些頁面還是英文的話,可以使用快速編輯的方式,把它們都換成中文的:

ch06108

  改成以下這樣:

ch06109

  然後到選單新增介面,建立一個新的主選單main,然後把所有的頁面都放到主選單上,如下所示:

ch06110

  在新增完商品之後,回到網站的首頁,按下「商品目錄(原本的Shop頁面)」就可以看到以下的商品目錄頁面了:

ch06111

  在任一產品的下方按下「加入購物車」按鈕,就會出現如下所示的樣子:

ch06112

  詢問我們是否要檢視購物車。在這裡,我們把這兩種水壼都加入購物車,然後再按下「檢視購物車」按鈕,就會出現如下所示的購物車清單,有注意到吧,所有的介面都是中文介面喔:

ch06113

  在購物車中可以更改數量,如果有設定折價券,也可以在這時候使用。在這個例子中,我們把其中一個水壼的數量改為2支,然後按下更新購物車,會出現如下所示的訊息:

ch06114

  有注意到嗎?原本我們有設定超過600元即可免運費,所以在我們更新數量之後,價格超過600,所以運算就自動出現免費費的選項,而且自動選取喔。接下來就可以按下「前往結帳」按鈕,就會有一個完成的購物項目清單,如下所示:

ch06118

  裡面的資料要填寫正確才能夠下訂單,也可以選擇建立帳號以避免每一次的輸入動作。另外,如果帳單地址和配送地址是一樣的,右邊的勾選要去掉。訂單備註的地方也可以加註想要讓賣家知道的訊息。如下所示:

ch06119

  通通填寫完畢,如果我們選擇使用PayPal付款,在按下「下單購買」按鈕之後就會前往PayPal的結帳畫面了。在這裡我們選用ATM轉帳,然後按下按鈕,如下:

ch06122

  使用ATM轉帳,會先出現上述的摘要,並提供轉帳資訊。以上是客戶端的操作。在客戶下完訂單之後,站長會收到以下的電子郵件通知:

ch06126

  然後客戶自己也會收到一張訂單的收據(需要付款的單據):

ch06127

  電子郵件的標題看起來像是這個樣子:

ch06128

  當站長收到新訂單的電子郵件通知之後,回到WooCommerce的後台,可以看到訂單的摘要如下:

ch06130

  在右邊有一個眼睛符號的按鈕,按下去可以檢視訂單的詳細內容,如下所示:

ch06131

  在右上角有一個處理的動作,可以對訂單做以下的處理:

ch06132

  我們可以在收到顧客的匯款之後,並寄出貨物之後(或是在寄出貨物收到款項之後),依照我們的訂單進度做設定。當設定為「完成訂購」時,顧客就會收到一封如下的通知信:

ch06134

  而站長也可以在WordPress的控制台中看到以下的摘要訊息:

ch06133

  全部都是中文,非常方便。

  以上就是對於WooCommerce的購物流程做一個簡單的介紹,一些細節的設定,讀者們可以自己去修改設定並體會一下WooCommerce的便利性與能耐喔!

(9119)

發表迴響

top
%d 位部落客按了讚: