Woocommerce教學低成本, 建立Wordpress網店

這是一篇全面,適合新手學習的Woocommerce教學。

你可以低成本(只需要Server + Domain費用), 就可以透過Wordpress + Woocommerce,去建立網店。

你將會學習:

  • 前期Server設置
  • 使用Wordpress
  • 安裝Woocommerce
  • 設立outgoing email server

你會Step by Step,與我開設一間服裝網店-JACKLORA。

準備好了嗎? 我們開始吧!

基本概念

在你開始學習之前,可以先看看, 是次教學完成品: https://jack-lora.com/

你會Step by Step, 與我一起,去利用Wordpress + Woocommerce,去建立這個網站!

我們先看看一些基礎知識!

什麼是Wordpress?

Wordpress是一個免費開源的內容管理系統,你可以不需要寫code,只需要安裝外掛與主題,也能建立起自己的網站。

什麼是WooCommerce?

WooCommerce是Wordpress上的plugin,幫你的網站加上ecommerce的功能。包括:貨品管理、購物車、網上信用卡等。

除了文字教學, 你也可以參考這教學的影片版:

我們先進入第一章 — 前期設置!

第1章前期工作

前期工作,就是在做網頁之前,你要準備的東西。

不少人覺得前期的設置工作很繁複、十分麻煩,在這個步驟已經卻步。但只要不斷嘗試,你便會慢慢熟習當中的運作!

前期設置工作大致可以分為4個步驟:

  • 租server+安裝wordpress
  • 購買網址
  • 把網址和伺服器連在一起
  • 加上ssl

我們開始吧!

前期工作

前期工作就是去設置好一個可用的Wordpress。一共有4步,我們來看看你大概需要做什麼的吧!

1.租server+安裝wordpress

要運行Wordpress,你需要有一個Server。而你也需要在Server上安裝Wordpress。

2.購買網址

第二步,你需要購買網址。

3.連結網址及server

成功購買網址後,下一步我們就要將網址與server連接在一起。

4.加上ssl

雖然我們已經成功將網址與server連結在一起,但現在我們的網頁仍是不安全的(not secure),因此最後我們要學習如何拿取ssl的certificate。

前期工作 - 詳細步驟

關於前期工作的詳細步驟,你可以參考以下文章。

我提供了2間Cloud Server Provider的設置教學: 分別是Google Cloud及Amazon Lightsail。

Google Cloud頭3個月是免費的, 而Amazon Lightsail長遠去說, 會比較便宜。你可以因應你的情況去選擇。

第2章後期工作

做好前期工作後(就是你已經有一台可用的Wordpress),你可以真的開始做這個網店了。

後期工作可以分為8個步驟:

  • 設定主題(theme)
  • woocommerce plugin的設定
  • 設立outgoing email server
  • 建立要用的頁
  • 設定首頁
  • 建立navigation
  • 整理每一頁的內容
  • 其他設定:title 、logo、footer、顏色

我們開始吧!

1.設定Theme主題

在開始前,大家可到https://mtache.com/ecom免費下載這節教學素材。

有人可能會問,為什麼wordpress可以做出這麼多不同的網站?

Wordpress有很多不同的主題,有些不用付款,有些要付款。透過改變不同的主題,你的網站的外觀甚至功能性都會有所改變。

登入後台

還記得設置Server時,它提供了兩條網址嗎?一條是wordpress網址,另一條則是wordpress後台,我們打開wordpress的後台link。

我們可以copy wordpress後台的賬戶與密碼,進入wordpress後台。

設定主題

那麼怎樣在wordpress上選擇主題?首先,你可以click 外觀(appearance),然後click 佈景主題(theme)。

你便發現裡面有五花八門的主題,你可以選擇你所喜歡的theme呢!

今天,我們所用的主題是twenty twenty theme。你可以按安裝佈景主題(click add new button)。

然後在搜尋欄上打twenty twenty,便能找到這個主題了!

當然,這不是最好的做法,通常我們使用Themeforest(https://themeforest.net)來找一些WooCommerce主題,但這個網站的主題則要收費了。

如果你是一些資深(advanced)一點的wordpress user,你也可以自己建立一個主題。我通常是利用html template + wordpress的方法來做主題,因為這個方法更方便、更快捷。

2.woocommerce plugin的設定

Plugin可以讓wordpress新增一些本來沒有的功能。今天, 我們會用的一個plugin - WooCommerce,讓你的WordPress有e-commerce的功能。

設定語言

在設定WooCommerce前,我們先要設定語言。因為如果要用中文版的WooCommerce,你的WordPress本來也要是中文版才可以。

因此,你可以在設定(settings)選擇一般(general),把網站介面語言(language)由英文轉為繁體中文。

安裝外掛

下一步我們便可以安裝外掛。首先,按外掛,然後選擇安裝外掛,在右邊search woocommerce,然後click立即安裝。

成功安裝後,便要求你輸入商店的資料:包括地址和郵政編號,那麼地址你暫時可以copy我的教學素材:香港銅鑼灣開心道535號開心大廈9樓。

填寫完畢後,click繼續。下一頁,便要求你填寫公司類型,那麼這次我所示範的是製作一間服裝店的網頁,因此這裡你可選擇「時尚、服飾和配件」。

然後click繼續。下一頁來到選擇產品類型,我們填實體產品。

然後click繼續。下一步系統便問「你有多少產品需要展示」,你填1-10就便可以了。「是否在全球銷售」,填否即可。至於宣傳的方式,我們全部都無需選擇。

最後,你要選擇自己喜歡的主題。今天我使用Twenty Twenty theme 作主題。

這樣你就成功安裝了woocommerce plugin了!當然,以上設定在往後的日子仍能修改,所以寫錯了也不用太擔心!接下來,你便可以嘗試新增商品。

建立商品

首先,click「商品」,選擇「所有商品」,然後click「建立商品」。

接下來,你就可以為商品想一個名稱與描述,為它定價,最後設立商品圖片,然後click右上角的「發布」便完成了!

如果你希望增加多於一張相片,你可以選擇「商品圖庫」,甚至可以透過drag and drop改變相片的次序呢!

發布完成後,可以在哪裡看到呢?你可以click「頁面」,然後選擇「全部頁面」,然後click「檢視商店」這一頁,你就可以看到你的產品了!

下一步我們可設定銷售地區,究竟是全球運送還是只限香港購買呢?

設立銷售與運送地區

我們可以選擇woocommerce,然後選擇「設定」,你便找到「銷售與運送地區」的設定。

加入購物車

由於我們這一個theme不是tailor-made for WooCommerce,按了購物車之後,不會自動彈出cart的畫面。因此我們要tick「成功加入後轉至購物車頁面」,然後按儲存。

這樣一來,當我們將商品加入購物車後,畫面便會自動轉去checkout。

設定付款方式(銀行/paypal)

下一步我們可以設定付款的模式。最常見的付款方法有兩種,一種是paypal,另一種方式是銀行。

Paypal:選擇付款,click啟動paypal。然後輸入paypal的電子郵件。如果沒有paypal賬號的話,就要先申請paypal accout了。

沙盒是sandbox,是用來測試該賬號能否付款,由於我以前用sandbox可能可以付款,但live的時候卻收不到款項。因此,我建議大家不要使用paypal沙盒做測試,大家還是直接用live來試吧!

然後,Click「啟用電子郵件通知」,並輸入自己的電子郵件。

銀行轉賬:選擇「付款」,click「啟動銀行轉賬」,輸入標題及描述,最後輸入賬號詳細資料(如:賬號名稱、賬戶號碼和銀行名稱等)

下一步,我們便可以設立outgoing email server了。

3.設立outgoing email server

正常情況下,顧客購買了一些商品後,會收到email確認付款成功。因此,我們要建立outgoing email server。怎樣設定呢?

刪除 Built With WooCommerce

首先,我們選擇電子郵件,找到頁尾文字。為了避免讓其他人知道我們是用WooCommerce,我們刪除built with woocommerce。然後click儲存修改。

防止email 傳送至spam box

為了避免Email進入spam box,我們利用第三方的email server來send email,顧客便能收到郵件。那第三方的email server是如何建立的呢?

首先,我們需要安裝外掛,我們按「外掛」,選擇「安裝外掛」,下載 WP Mail SMTP by WPForms。

下載了WP Mail SMTP後,我們找到WP Mail SMTP一欄,然後click 「設定」。

在郵件程式一欄,有很多external 的server。我們今天使用sendgrid作email server,因為它有免費plan讓人使用!

在註冊後30天內可以免費傳送4萬封email,一旦過了一個月限期,每天只可以免費發送100封email。如果是簡單的e-commerce,其實已經很夠用了!

第一步,我們先到https://signup.sendgrid.com註冊sendgrid 賬號。

第二步,我們需要認證domain。打開sendgrid後,click authenticate your domain,然後在Dns host選擇GoDaddy。

最後在Domain You Send From輸入自己的網站(如:jack-lora.com)。

這時你便獲得3條record。

第三步,我們要加3條record到我們的domain。首先,進入 https://hk.godaddy.comclick網域,到最下方的位置,找到管理DNS。

然後畫面來到記錄的一版,類型可選擇CNAME,然後將剛才的3條record,copy and paste 在主機上。(注意:jackloria.com可以省略掉。),然後複製和貼上指向。

例子:

加了3條record到我們的domain後,我們回到sendgrid頁面,click dashboard,你會看見send your first email,我們click integrate using our web api or smtp relay,然後選擇SMTP Relay。

下一步,你看見API key,將它copy下來,然後貼在WP Mail SMTP 內的API金鑰上。

然後輸入你的寄件者電子郵件地址和寄件名稱,我們就完成了Email的設定了。

下一步我們可以做一個電子郵件測試,嘗試發送郵件,看看能否收到Email。

4.建立要用的頁

這一步我們就要為網站建立主頁、關於我們、商店、常見問題、聯絡我們、購物車等頁面,方便消費者使用網站。

要如何建立呢?第一步,我們click頁面,選擇全部頁面,然後再click新增頁面。

在這個版面你可以輸入標題及內文。那麼我們要設立「主頁」,則在標題上打上「主頁」,若要設立「關於我們」,則在標題打上「關於我們」,如此類推。完成後,click藍色button發布。

接下來,我們將網址代稱由中文改為英文,這樣能夠免得部分電腦load不到中文,顧客因而無法瀏覽網站的問題。因此,你可以click 頁面,找到「永久連結」,然後將網址代稱改為英文。例如:「關於我們」,可以寫為aboutus。

5.設定首頁

完成以上設定後,我們可以嘗試進入主頁。

主頁是這樣:

jack-lora.com是這樣:

你發現輸入jack-lora.com未能進入主頁畫面,因此我們下一步要設定主頁。

我們click「設定」,選擇「閱讀」,在網站首頁「顯示內容」上click「靜態頁面」。在靜態首頁一欄,則選擇「主頁」,然後儲存設定,便完成了!

完成品:

6.建立navigation

你可能發現navigation的排列次序有些混亂。因此,這一步我們要整理navigation,令頁面看起來更有系統,更方便顧客使用。

那麼我們應該如何整理navigation呢?首先,click「外觀」,選擇「選單」,然後填寫選單名稱(例如:primary)。

接著,我們加入左手方的「頁面」(例如:常見問題,聯絡我們,購物車,主頁,商店,關於我們),再click「新增項目」。

然後,排列次序。

最後,我們要設定選單擺放的位置,例如:桌面版水平選單(desktop)、行動版選單(mobile),然後按儲存,便完成了!

這樣就完成了navigation 的設定了,我們來看看完成品吧!

7.整理每一頁的內容

主頁

接下來我們就要整理每一頁的內容,令網站看起來美觀、專業!

很多看起來漂亮的網站都是以相片組成的,因此我們可在主頁上,上傳漂亮的照片來吸引用家的注意。

我們首先click「頁面」,選擇「全部頁面」,點解主頁,進入主頁編輯的畫面,我們Click加號,然後選擇「封面」,再click上傳,你便可以upload漂亮的照片到你的網站上了!

你發現相片原本的背景色是黑色,為了讓我們的文字更為突出,因此我們要將圖片改為透明度0。我們在空白的地方按一下,讓mouse出來,再按一按照片,就可以在這個封面作出設定了!

完成品:

在照片中間,我們可以打上文字。我們先將段落轉作標題,然後type: 簡約系時裝網店,文字大小選擇H1,更改顏色黑色,選擇全幅寬度,最後click更新,就完成了。

如果你想在標題下,加上一段文字,你可以click加號,然後選擇段落,最後click右上角的「更新」,就成功儲存了!

完成品:

完成後,我們就可加上按鈕,讓顧客點擊,進入購物車。因此,我們按enter,然後click旁邊的加號,選擇按鈕組。

我們可以在button內打上「立即選購」等字眼,然後click連結,輸入商店的網站。最後調校button的顏色,便已經做好了。

我們嘗試Refresh頁面,發現圖片與文字有些移位,對吧?若要做得與我一模一樣,則要使用一些CSS。

我們使用Mouse 點擊文字,在進階設定一欄,你看見附加的CSS類別。那麼我們就在這一欄,打上alignwide,然後click 更新。

標題、文字與標題都要重複輸入alignwide這個CSS。但要注意,如果是按鈕,則要按整個block,而不是直接按button。

除了CSS外,我們還可以調校相片的高度與寬度,來調整它的位置。我們用mouse點擊相片,然後尺寸一欄填上500,那就可以了!

關於我們

完成主頁的設定後,我們下一步就可以設定「關於我們」。首先,我們增加一個區域,click標題,然後打上「關於我們」,字號可以選擇H3,再click文字置中。

接下來,我們再增添一個區域,選擇「媒體及文字」。

左邊可以放上圖片,右邊我們打上引文(例如:每個設計都有一個故事 – Jack……),然後按更新,就完成了。

完成品:

熱銷商品

我們click加號,選擇標題,然後打上:「熱銷商品」,字體大小選取H3。接下來,我們加入圖片,再次click 加號,找到woocommerce一欄,選擇精選商品,挑選你想展示的商品。

然後,我們要調整這一欄目的寬度,因此我們選擇全幅寬度,在進階設定同樣打上alignwide。

banner

click加號,選擇封面,然後click「媒體庫」,選擇適當的圖片。我們將透明度設置為0。

我們新增區域,選擇「重要引述」。然後paste「JACKLORA的衣服真的很好看!我穿上後立即變得更帥了!」下去後,我們可以在右邊,設定文字框架樣式與色彩。

完成品:

最新款式

重複製作「熱銷商品」一欄的步驟就可以了,把標題改為「最新款式」,然後選擇你們商店的最新貨品,就完成了!

完成品:

網站的layout就大致完成了。接下來,我們將設定網站的標題、logo、footer與顏色。

8.其他設定:title 、logo、footer、顏色

網站標題(Title)

我們返回backend,click設定,選擇一般,在網站標題打上jacklora,在網站說一欄type簡約系時裝店。

永久連結

然後我們就要設定blog post的連結(link)。我們click設定,選擇永久連接,然後選擇文章名稱作Blog post的link。

Logo

下一步我們可以設定網店的logo。我們選擇外觀,然後click「自訂」,選擇「網站識別」,click「選取標誌」,然後上傳jacklora logo至媒體庫。你發現這個logo有點大,不用擔心,我們最後會用CSS調整它的大小。

按鈕顏色

按鈕的顏色也能在此作設定。我們選擇色彩,click自訂色彩,你就可以選擇你的主題色作button的顏色了,這樣令網站看起來更統一!

footer

我們還要設定網站的footer。怎樣設定呢?首先,我們回到backend主頁,選擇「外觀」,click「小工具」。

我們將文字拉到頁尾一,輸入標題:付款安全性,在內容則copy素材內一段文字(JACKLORA使用PayPal讓客人進行網上付款……),然後再插入paypal這張圖片,然後click 儲存。

頁尾2,也是同樣的做法,我們新增文字,標題改為:購物安心保障,然後在內容copy素材內一段文字(全部貨品皆經過專業品質合格認證,確保頂級質量,連一年保養……),然後click儲存,便完成了!

做到這一步,其實網站已經基本完成了!可是,可能網站的排版與空間仍未令你感到滿意,因此最後一步,我們會用CSS來作調整。(延伸閱讀:CSS教學全攻略2021

click外觀,自訂,附加的CSS,我們copy and paste素材file內的CSS(我把要用的CSS放到了剛剛的素材中)就可以了,然後click 發布。

你發現,加了CSS後,logo小了,網站也看起來更整齊。整個網站已經製作成功了!如果你真的不懂CSS,你也可以買template來製作。

總結

利用Wordpress和Woocommerce來製作網店是不是也沒有想像中那麼難呢?

今天的分享就到這裡,如果你也有興趣開網店,或許可以試試這些方法,以低成本製作你公司的網頁!

加入我們的Email List

免費參加【網頁開發入門CRASH COURSE】線上課程!