2

Woocommerce教學 — WordPress上建立E-commerce (電子商貿)

前文提要:  網頁設計教學 - WordPress架站全攻略2017 (不斷更新…)

在這篇Woocommerce教學,我們會學習到:

- E-commerce(電子商貿)網站簡介
- 進行E-commerce的方法選擇及其利弊
- 利用plugin:Woocommerce令你Wordpress變成一個E-commerce網站
- 利用theme storefront建立一個電子商貿網站

首先,我們要了解甚麼是一個E-commerce(電子商貿)網站。一個E-commerce網站是可以讓其他用家在其網站上買東西,並設有付款渠道,例如PAYPAL,信用卡,或是銀行入數。所謂買東西,可以是一樣實質的貨品,當網主收到錢便會把貨品送到某個指定地址。也可以是一種虛擬的東西,例如一本電子書,讓人下載。或是一個會藉,成為會員後可看到一些特別內容。通常這類型的網站也會設有一個用家註冊系統,令用家在其網站消費得更方便。

因此網站管理員需要有一個系統,去管理貨品,訂單,用户等等。

最後,要建立一個E-commerce網站,以下是兩樣比較需要考慮的事情:

1. 付款渠道

– 經PAYPAL付款
比較正路的方法,既安全,又能讓用家即時付款。而即使用家沒有PAYPAL帳號也不要緊,因為他們可以直接在PAYPAL上用信用卡付款。

所有交易PAYPAL會收取3-6%服務費。而從PAYPAL提取現今到香港本地銀行的話,若果金額大過3000元是免手續費的

– 銀行入數
這個會比較麻煩,你須要人手去確定用家有沒有入數給你。通常的做法是當用家買完東西後會收到一組銀行户口及Order ID,然後用家入數後須影下收據並電郵給你。最後你確認收到錢後,才會通知用家出貨。

2. 送貨方法

如果你是賣一些實質貨品,你必須考慮你的送貨範圍:是全球?還是只是香港?也需考慮送貨成本。是免費?還是因應地方來收費?或是買滿一定金額便免送貨費?

進行E-commerce的方法選擇:

1. 利用公眾平台如AMAZON,YAHOO拍賣,淘寶等等

優點:簡單又容易建立。但最大優點是這些公眾平台已有很好的流量,因此即使你不做宣傳也有人能找上你的貨品
缺點:擴充性和靈活度低,沒有獨立網址,比較難做自身平台以外的宣傳

2. 利用社交專頁如Facebook/ Instagram Page

優點:簡單又容易建立,可透過其社交媒體宣傳
缺點:擴充性和靈活度低,沒有獨立網址,沒有系統及付款渠道。

3. 建立屬於自已的電子商貿網站

優點:靈活度及擴充性無限,獨立網址可令你利用SEO或配合不同平台宣傳
缺點:建立難度較高。需要懂得行銷。

今天我們會教授如何利用WORDPRESS - WOOCOMMERCE, 建立一個E-commerce網站。

利用Wordpress去建立一個電子商貿網站,我們會需要用到一個plugin - Woocommerce。Woocommerce是一個功能非常強大的電子商貿plugin。一個電子商質應要的功能,基本上它也能做到。而且現今市面上也有很多Woocommerce的擴充功能plugin,可說是應有盡有。

實戰 -建立電子商貿網站

我們今天會用到一個免費的theme – storefront。要注意的是我們需要找一些專門支援Woocommerce的theme。現今市面上介面免費又漂亮的Woocommerce theme實在沒有,但沒關係我們只是做練習去學習。大家可以到以下連結下載:

http://www.woothemes.com/storefront/

1. 檢查theme文件。解壓storefront.1.4.6.zip後可看見style.css,證明它是正確的theme文件。
2. 利用wordpress reset 還原Wordpress
3. 上載並activate theme

1安裝完成後會看見以上畫面,請把Woocommerce和Homepage Control這兩個plugin都安裝好。

2安裝woocommerce後它會叫你設置woocommerce,跟著自已所需去設定就好。

3剛剛的Page Setup會自動令你的Wordpress新增4頁:

Cart:就是’購物袋’的頁面,用來暫存用家即將購買的產品
Checkout:讓用家確認購買了的物品並即將付錢的頁面
My Account:讓用家註冊或登入的頁面
Shop: 顯示所有商品的頁面

4我們也要新建一頁作主頁,選擇Homepage作為Page Template。並在Settings->Reading把它設為首頁。根據Documentation,我們可到Appearance->Customize->Homepage Control去設定主頁的外觀。

6設置Menu,把Home和Shop加到Primary Menu

7把My Account加到Secondary Menu。一個電子商貿網站通常都有一個secondary menu,用來放一些頁面如My Account, My Cart等等。

8左面主菜單多了一項叫Products。我們可以在這新增我們要賣的產品。

9往下一點更可以在Product Data-> General 填寫這產品的價錢。

10在Product Data-> Inventory,剔下Manage stock後更可控制產品的存貨。當存貨沒有了其他人便不能購買該產品。

11

你更可以替貨品上載一張主要圖片(Featured Image)和其他圖片(Product Gallery)。

13當然,你也可以替貨品分類。

14

15如果我們到shop那頁,便能看到全部的產品。

16至於sidebar, 我們當然可以到 widgets 中設置。

17

18

我們現在到一些頁面如Cart,My Account,Checkout等等都是有一個Sidebar的。要把他們弄走也不難,到他們的頁面,把Page template從Default Template轉到Full Width便可以了。

19在Page template把Default Template轉到Full Width。

21當有人買東西是,到woocommerce->Orders便可以看到訂單。

24在Woocommerce->Settings你可以設定很多東西。這頁Checkout可以設置付款方法。常用的是Paypal。Paypal可以讓其他用家安全地用信用卡過數給我們。我們只要把用來收錢的paypal帳號填在paypal email上便可。系統會自動處理一切。

其他的付款方法如BACS,Cheque,Cash On Delivery等你可以因應你的情況來開啟/關掉。詳細使用方法你可以到Woocommerce官網細閱。

26Shipping(運費)也是要好好設定的一項。

27當然,這裏還有很多其他的設定,例如Emails可設定當有人購買東西時要傳送甚麼樣子的電郵給他們。大家可慢慢摸索。