這是一篇全面，適合新手學習的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的功能。包括：貨品管理、購物車、網上信用卡等。
除了文字教學, 你也可以參考這教學的影片版。
網店製作教學課程 - 0成本建立E-commerce電商 (Wordpress + Woocommerce) https://youtu.be/peCDmpHJROI
我們先進入第一章 — 前期設置！
第一章 前期工作
前期工作，就是在做網頁之前，你要準備的東西。
不少人覺得前期的設置工作很繁複、十分麻煩，在這個步驟已經卻步。但只要不斷嘗試，你便會慢慢熟習當中的運作！
前期設置工作大致可以分為4個步驟：
- 租server+安裝wordpress
- 購買網址
- 把網址和伺服器連在一起
- 加上ssl
我們開始吧！
前期工作
前期工作就是去設置好一個可用的Wordpress。一共有4步，我們來看看你大概需要做什麼的吧！
1.租server+安裝wordpress
要運行Wordpress，你需要有一個Server。而你也需要在Server上安裝Wordpress。
2.購買網址
第二步，你需要購買網址。
3.連結網址及server
成功購買網址後，下一步我們就要將網址與server連接在一起。
4.加上ssl
雖然我們已經成功將網址與server連結在一起，但現在我們的網頁仍是不安全的（not secure），因此最後我們要學習如何拿取ssl的certificate。
前期工作 - 詳細步驟
關於前期工作的詳細步驟，你可以參考以下文章。
Amazon Lightsail (延伸閱讀：利用Amazon Lightsail安裝WordPress）
Google Cloud (延伸閱讀：利用Google Cloud安裝WordPress）
我提供了2間Cloud Server Provider的設置教學: 分別是Google Cloud及Amazon Lightsail。
Google Cloud頭3個月是免費的, 而Amazon Lightsail長遠去說, 會比較便宜。你可以因應你的情況去選擇。
第二章 後期工作
做好前期工作後(就是你已經有一台可用的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來找一些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。
標題、文字與標題都要重複輸入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來作調整。
click外觀，自訂，附加的CSS，我們copy and paste素材file內的CSS就可以了，然後click 發布。
你發現，加了CSS後，logo小了，網站也看起來更整齊。整個網站已經製作成功了！如果你真的不懂CSS，你也可以買template來製作。
總結
利用Wordpress和Woocommerce來製作網店是不是也沒有想像中那麼難呢？
今天的分享就到這裡，如果你也有興趣開網店，或許可以試試這些方法，以低成本製作你公司的網頁!
原文：https://mtache.com/woocommerce
