【2024 WooCommerce 教學】打造專業的 Wordpress 電商網站
台灣目前叫的出名的電商網站 Shopline 、EasyStore、91APP 就有好幾家，但是怎麼選呢，就算你看完網路上的懶人包，只是得到更複雜的資料，讓心情更差。
其實電商平台「並非」只是將線上的商品，搬到線上去銷售這麼簡單，中間還有許多觸及網路生態的「眉眉角角」。
例如說：
- 網路設計體驗 - 在購物時被糟糕的網站體驗弄得焦頭爛額？
- 電商新手 - 希望尋找一個易於使用的電商平台來擴展你的業務？
- 線上線下整合 - 可以訂位、購物、物料管理的平台。
- 金流、物統整合 - 手續費和運費都將影響公司獲利和定價策略。
所以在你不清楚的情況之下做選擇，一般都是危險的，而且電商網站一年幾萬塊，新增客製功能加一加幾十萬，對於剛入門的朋友，沒有穩定的現金流支持的話，這個購買按鍵可能點不下去。
其實還有一個比較簡單的選擇，就是使用 Wordpress 網站來打造一個 WooCommerce 電商網站，操作上並不難，重點是很便宜，而且你有足夠的操作彈性。
做為一個入門或是起步的選擇，雖然 WooCommerce 的技術難度比較高，但比較起只有雞肋功能的便宜電商網站，成本更低、彈度和可擴充性更好。
總之，WooCommerce 的優點在於安裝即可使用，設定金流和物流上比較麻煩，但台灣金流公司有提供 WooCommerce 擴充外掛，難度已經大大減少，加上大叔教學，一步一步帶你打開自架電商網站的世界，人人都可以做的電商網站。
WordPress WooCommerce 電商網站架設步驟
- 安裝 WordPress：首先，下載並安裝 WordPress 軟體。您可以從 WordPress 官方網站下載最新版本的 WordPress。
- 選擇合適的佈景主題：從 WordPress 佈景主題庫或第三方網站上選擇一個適合的佈景主題。您可以根據您的需求和喜好選擇一個具有電商功能的佈景主題。
- 安裝 WooCommerce：在 WordPress 管理後台中，點擊「外掛」>「新增外掛」，然後搜索並安裝 WooCommerce。啟用 WooCommerce 後，您將能夠開始設定和管理您的電商網站。
- 設定 WooCommerce：按照 WooCommerce 的設定向導進行網站基本設定，包括商店名稱、貨幣、付款和運送方式等。
- 建立產品頁面：點擊「產品」>「新增產品」，然後輸入產品的相關資訊，包括產品名稱、價格、庫存等。
- 設定付款和運送方式：在 WooCommerce 的設定中，選擇適合您的付款和運送方式。這些選項將決定您的客戶如何結帳和收到訂單。
- 設定外觀和自訂化：使用 WordPress 的自訂化選項，調整您的網站外觀和佈局。您可以更改顏色、字型、背景圖片等，以使您的電商網站與品牌一致。
- 測試和上線：在上線之前，請確保測試您的電商網站，包括產品購買、付款和運送流程。確保一切正常運作後，您可以將您的電商網站正式上線。
這些步驟將幫助你建立一個運作良好且具有電商功能的 WordPress 網站。所以本篇內容將從「安裝 WooCommerce」一步一步帶大家學習怎麼將 Wordpress 網站變成專業的電商網站。
WooCommerce 簡介
WooCommerce 是一個開源的 WordPress 插件，用於創建電子商務網站。它具有豐富的功能和彈性，可幫助您創建一個成功的電商平台。
WooCommerce 的主要特點包括：
- 易於安裝和設置
- 可擴展性
- 多種付款和運送選項
- 訂單管理和庫存控制
- 營銷工具和分析功能
除了這些基本功能之外，WooCommerce 還有大量的擴充套件和主題可供選擇，可以滿足各種不同的需求。
例如，您可以使用 WooCommerce 擴充套件來：
- 增加付款閘道和金流服務商，例如說，大叔使用綠界和歐付寶的 WooCommerce 擴充外掛。
- 添加新的運送選項和計算方式
- 創建促銷和優惠券代碼
- 整合社交媒體和電子郵件行銷工具
- 分析訪問量和銷售數據
使用 WooCommerce 打造專業 Wordpress 電商網站
如果你還沒有自己的 Wordpress 網站的話，可以參考教學：
如果你已經有一個 Wordpress 網站的話，讓我們繼續看下去吧!
Step1. 安裝 WooCommerce 插件
進入後台後，請在左側找到「安裝外掛」，輸入 WooCommerce 關鍵字搜尋，找到 WooCommerce 後再點擊「立即安裝」。
我們其實同時也可以看到附近有 WooCommerce 對應的擴充外掛可以使用。
完成後，點擊啟用。
Step2. 進行商店詳細資料設定
安裝完成後，後台左側應該出現 WooCommerce 。點一下進入設定頁面，請依要求填寫內容，也可以點擊下方先略過，之後再填寫也沒差。
設定付款(新增收款方式)，點擊紅框文字後，進入設定頁面，我們可以看到 WooCommerce 內建的是 PayPal 付款，對於境外電商而言已經足夠，但 PayPal 無法在台灣使用，所以我們需要使用台灣的金流服務，像是綠界和歐付寶。
我們先使用 PayPal 來說明，下面還有台灣金流外掛的安裝教學。先點擊一下 PayPal 的「開始使用」。
就會開始安裝 PayPal 付款，然後開始使用。
點擊 Activeate PayPal，然後系統會要求你登入，如果沒有帳戶的話，可以申請一個，它是「免費」的。
如果出現 Connected 的話，表示我們成功將 PayPal 和 WooCommerce 連結成功。
再來 4 和 5 是關於稅務和行銷的擴增功能，大叔目前還沒使用的資格，所以有待大家自行發覺和研究，我們繼續討論網站設計的部份。
Step3. 新增商品
我們重新開一個視窗到後台頁面，找到 WooCommerce 點擊「商品 → 新增」。
輸入商品名稱和介紹，頁面下方還有商品資料等設定。
再輸入價格，完成後點擊「發佈」。
Step4. 台灣金流設定：歐付寶金流設定(貼心連結)
金流在各國擁有不同的法規，而且近年來台灣的詐騙問題十分嚴重，因此金流平台的監管相對嚴格。簡而言之，如果你計劃在台灣建立電子商務平台，就必須使用符合台灣合規要求的金流平台。
綠界和藍星是比較知名的金流服務公司，然而我個人則選擇了比較簡單易用的歐付寶。歐付寶是歐買尬 (3687) 的轉投資公司，它在金流方面與許多銀行合作，包括聯合信用卡處理中心、臺灣銀行、第一銀行、華南銀行、台北富邦、國泰世華、玉山銀行、台新銀行、中國信託等等。
總而言之，相較於綠界，我覺得歐付寶的註冊流程更加簡單易懂。
Step1. 下載外載(貼心連結)
進入歐付寶的套裝購物車模組頁面，找到 Woocommerce 的金流模組，然後點一下，將會進入 github 頁面。
進入頁面後，可以點擊 Install.pdf 的安裝說明，點擊 Opay.zip 可以下載外掛。
Step2. 安裝外掛
回到安裝外掛頁面，點擊上方的「上傳外掛」，將剛剛下載的 opay.zip 上傳並立即安裝。
Step3. 歐付寶金流設定
安裝後，我們需做一下認證的動作。由後台點擊一下 「WooCommerce → 設定」選擇付款。
選擇你要的付款方式，點擊後方的設定。
回到歐付寶的頁面，找到「系統開發管理」→「系統介接設定」，將商店代號、HashKey 、HashIV 貼到 WordPress 的頁面。
取代這三個值，付款方式要用點擊 Ctrl 反白的方式，然後點擊下方的「儲存設定」。
最後，我們將商品加入購物車看一下，除了基本的 PayPal 之外，還出現了歐付寶。
Step5. 物流設定
點擊 WooCommerce 的設定，再選擇「運送方式」。
點擊「新增運送區域」，進入頁面。輸入區域名稱、服務的地區，可以選擇台灣和你想要服務的地區及國家。運送方法可以新增「免費運送」和「單一費率」，對於台灣地區就夠用了。
這樣就算是完成了基本的 Woocommerce 設定，大家可以回到商店頁面，嘗試操作一下有沒有問題。對於個人或是小型工作室來說，已經可以做到商品上架、金流、物流。
WooCommerce 教學：電商網站網頁設計
接下來，我們會針對電商網站的網頁設計的教學。我們可能會用到一些網站編輯的軟體，像是 Elementor 和 Crocoblock 讓整個電商網站看起來更為專業和美觀。
Step1.安裝 Elementor Pro 網頁編輯器 & Hello WordPress 主題
進入 Wordpress 後台頁面，鼠標移動到「外掛」，再點擊一下「安裝外掛」。
進入外掛頁面後，在右側的搜尋框打上關鍵字「Elementor」，就可以找到「Elementor Website Builder」，點擊「立即安裝」並啟動它，即可。
然後，你可以在新增頁面的時候，找到「使用 Elementor 編輯」。
由於我們的網頁設計中會用到 Elementor Pro 的模版功能 ，有帳號的朋友請記得安裝，沒有 Elementor Pro 朋友也沒關係，基本上會比較辛苦一點。
Elementor Pro 安裝和教學的相關資訊和連結就放在：
Hello 主題是一個輕量級的 WordPress 主題，專為與 Elementor 網頁編輯器相容而設計。它提供最基本的佈局和功能，以確保你的網站在使用 Elementor 時能夠達到最佳效果。Hello 主題的目標是提供一個快速、輕巧且最佳的基礎，使你能夠更自由地使用 Elementor 建立自己的網站。
WordPress Hello 主題安裝也非常容易，請點擊左側的「外觀 → 佈景主題」，然後在搜尋主題打「Hello」，點擊下載安裝並啟用它。
Step1. 新增頁面 & 導入模版
進入後台新增頁面，選擇使用 Elementor 編輯。
進入編輯頁面後，點擊一下版型庫的圖示。
使用「shop」去搜尋自己喜歡的 Template，不過提醒大家，多數模版都是 Pro 用戶才能使用。
選擇模板後，選擇「插入」，然後等待完成。
進入畫面後，如果沒有商品的話，其實是因為我們還沒有新增商品。讓我們回到後台新增一下。
再來回到 Elementor 編輯頁面，將商品拖曳到中間的編輯框中，就會出現剛剛我們新增的商品，一切都是這麼自然和簡單。
再來我們調整一下文案，改成中文混合日文，感覺比較利害。
Step3. 設定首頁
從後台的「外觀 → 自訂」，可以進入主題的設定頁面。然後再點一下頁首。
在靜態首頁上選擇剛剛我們設定好的首頁名稱，然後點擊「發佈」，這樣首頁就會更換成新頁面。
大叔心得 & 總結
打造一個電商網站是一個非常令人興奮且具有挑戰性的任務。這個過程中，我們可以將各種商品上架到網站，讓網站成為我們的 24 小時營業商店，為我們帶來持續的收入。我們可以使用 Woocommerce 這個網站建立工具，它提供了簡單易用的界面和功能，大大簡化了建立網站的過程。
其中最困難是解決金流相關的問題，這可能是最令人頭痛的部分。我們需要找到一個可靠且安全的支付系統，以確保客戶的付款能夠順利進行，同時保護客戶的個人資訊安全。
讀者優惠
- Elementor Pro 大叔優惠請看 → mo Studio
- Crocoblcok 大叔優惠請看 → mo Studio
- 部落客專屬：用 Notion 打造一個 Wordpress 網站，讓你專心寫，其它問題大叔幫你解決 → mo Studio