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

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

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

你將會學習：

  • 前期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】線上課程！