架設購物網站教學-打造強大的商店平台，完整指南篇

網路商店平台這麼多，如何架設購物網站，在線上販售商品與服務，透過這篇教學使用WordPress及WooCoommerce成立個人商店，不論是虛擬產品、實體商品都能完成。

如果找網頁設計公司，價格至少約10萬起，對網路創業新手來說，負擔比較高，將多餘費用拿來做為經營用途。

1.架設購物網站費用與工具分析

架設網站需要由網址、主機、網站組合，少了其中一項，網站會無法運作，可以透過Namecheap購買網址、主機選擇Hosting.com(A2 Hosting)，有提供安裝WordPress功能。

了解更多➝Hosting.com教學-購買步驟流程

1-1.網址

網址像是住家地址，輸入網址會到達網站，例如:google.com，一般跟主題有關聯的名稱，方便讓人記憶。

推薦的網址商Namecheap、Gandi、Godaddy，其中Namecheap費用比較便宜，一年約400元，如有特殊名稱，費用會較高。

1-2.主機

主機像是房屋的土地，地坪數越大，能容納的人數越多，經營網站會用到許多檔案，主機則是用來放置網站的資料。

一般架設網站提到的是「虛擬主機」，分切成數百個空間，提供站長們使用，費用比較便宜，實體主機成本太高，對於一般人負擔較大。

1-3.WordPress網站

主機的規格會影響價格方案，容量越大，可容納越多人，初期創業別花太多成本，推薦A2 Hosting主機，最低方案每月約96元，提供一鍵安裝功能，穩定性高，是一款中階主機。

想要速度快一點，可以參考Cloudways主機，最低方案每月約11美元，未來能再升級，不需綁合約。

延伸閱讀⮕Cloudways教學-WordPress推薦的主機(影片教學)

WordPress是什麼?1分鐘帶你看懂-WordPress的特色

快速了解WordPress.com方案與WordPress.org差異

如何用WordPress+Amelia建立專業預約系統網站?

2.網站主機推薦

以Cloudways做示範，每月最低11美元，主機穩定性高，享有獨立空間，免跟其他人共用，不須綁合約，適合剛入門的站長，之後方案還能再升級。

Cloudways主機特色:

• 7天免費備份功能
• 24小時客服
• 不需綁合約，能隨時停止
• 最低方案11美元
• 提供3天免費試用
• 結合Astra主題功能
• 免費搬家功能

了解更多⮕Cloudways評價-進階款主機讓WordPress網站像火箭快

WordPress備份與還原-快速復原資料

3.A2 Hosting申請主機及安裝教學

A2 Hosting主機最低方案，每月約96元，提供一鍵安裝WordPress、免費搬家、免費網域信箱、10GB儲存空間，網址可以在A2申請或透過Namecheap平台註冊。

了解更多➝Namecheap教學-4大完整購買步驟

4.申請A2主機流程

STEP 1

我們在首頁，點選上面的「Hotsing」，在按下「Web Hotsing」，會來到方案畫面，此方案會較便宜，你想要做的網站，它都能夠幫你設定完成

STEP 2

A2價格方案分為四種，Starter、Plus、Pro、Max方案，可以依據你的條件來選擇適合的方案。

新手選擇Starter方案就很夠用，如果想要速度快，可以參考Plus方案

STEP 3

下一步選擇購買的主機期限

Server Location :設定伺服器位置(目標客群是台灣用戶，選擇Singapore新加坡)

STEP 4

Transfer domain:將網址轉移到A2 主機管理

Register new domain:選擇一個好記的網址名稱註冊

Use existing domain:目前還沒打算將網域和主機綁定，選擇這個

STEP 5

確認購買的主機方案及期限，沒問題點選下一步

STEP 6

輸入你的資料並登入

STEP 7

接著要填寫資資料，按滑鼠右鍵可翻譯成中文，但我們可以到中華郵政地址翻譯查詢，在欄位中依序填入地址，國家選擇「Taiwan」

延伸閱讀⮕A2 Hosting教學-高CP值的虛擬主機

5.WordPress是什麼?

WordPress是一套開源的內容軟體，讓使用者能快速建立網站，到目前為止全球已經超過4成以上是使用WordPress來建立部落格、新聞網站、購物網站、形象網站、一頁式網頁。

不論是新手還是資深人員，在後台都能輕鬆管理網站內容，資源很豐富，多款佈景主題和外掛，依照需求自訂網站外觀和樣式。

WordPress有兩種，WordPress.com平台優點是註冊可以使用，缺點功能受限，費用比較高。

WordPress.org需要準備網址、主機、網站才能組成，優點價格較便宜，能按照網站類型搭配外掛擴充，推薦A2 Hosting主機，每月最低96元。

延伸閱讀⮕WordPress架站費用-分析成本給你看

免費架設網站-7款平台優缺點評價推薦

台北網頁設計推薦-套版、WordPress、客製化比較分析

網頁設計公司怎麼選?8個挑選注意事項

6.推薦WooCommerce架站的原因

WooCommerce是一款免費外掛，適合用來建立購物網站，操作很簡單，還設定金流、物流、付款相關事項。電商平台也可以參考EasyStore、Shopline，根據需求挑選。

WooCommerce特色 :

• 操作簡單，無須寫程式碼
• 豐富的外掛資源，讓你搭配適合的主題
• 支援響應式設計(RWD)，不論在手機、平板、電腦都能舒適瀏覽
• 有專門的工程師定期更新程式，避免資安漏洞
• 可因應網站類型，增加購物車功能

延伸閱讀⮕WooCommerce教學-快速建立購物網站，立即在網路上開店

WooCommerce是什麼? 功能、優缺點分析一次看

WooCommerce商品組合設定-教學實用篇

Checkout Field Editor結帳表單-WooCommerce優化結帳欄位

7.WooCommerce能販售什麼商品?

WooCommerce可以販售日用品、居家布置、美妝、3C、玩具，包含現在熱門的線上課程、電子書、服務網站都能搞定。

透過WordPress+WooCommerce能擁有一個強大的購物網站，能用最少成本完成，適合想在網路開店的人。

延伸閱讀⮕線上課程平台架設-註冊網址到設計工具一次搞定

8.WordPress購物網站設定

架設購物網站推薦使用Astra主題，提供多種範本，搭配Elementor頁面編輯器讓網站更強大，建立一個會賺錢的網站。

佈景主題是網站重要的核心，Astra是一款輕量快速的主題，只要50KB就能運作，挑選適合的版型匯入，自由打造網站的樣式。

想要多種類型的佈景主題，可以參考Avada主題，價格很便宜，適合新手站長

8-1.安裝佈景主題及設定

STEP 1

來到WordPress網站後台，選擇「外觀」，在欄位中輸入「Astra」，點選佈景主題選擇安裝

STEP 2

安裝成功接著點選「Get Started」設定

STEP 3

接著會出現「頁面編輯器」畫面，你可以選擇使用「Elementor」編輯外掛

STEP 4

來到Astra主題的網站版型，選擇你喜歡的樣式，須注意有的版型是Pro方案才能使用 (AGENCY為付費方案)

STEP 5

選好版型，來到圖片的預覽畫面，這邊會確認你選擇的版型頁面，如果都沒問題可以點選按鈕「lmport Complete Site」匯入

STEP 6

有安裝過別的外掛，Astra會顯示訊息，點選「skip&import」匯入

STEP 7

這邊有個匯入資料的項目，你可以依照喜好做設定

• delete previously imported site (刪除網站的文章和頁面)
• import customizer setting (匯入設定)
• import Elementor Style kit (匯入風格工具Elementor)
• import Widgets (匯入小工具)
• import Content (匯入範例資料)

STEP 8

看到下方畫面，已經匯入成功，選擇「View Site」瀏覽網站

延伸閱讀⮕Astra Theme教學-WordPress入門推薦的主題

9.修改網站樣式

網站安裝完成，將WordPress設定更改，操作起來比較方便

9-1.修改網站外觀及主色系

點選左邊外觀⮕自訂，設定網站的主色系、文字大小、文字粗細、全站風格，進去看到Astra介面很簡潔，功能可以一覽無遺，針對喜好設計。

將Astra功能熟悉，能使用這款主題設計出好看的網站風格

Global全站設定 :

設定網站的標題、文字大小、字體粗細、行高

Header Builder頁首設定 :

設定網站的選單、LOGO、可以直接透過Astra設計

Breadcrumb麵包屑設定 :

設定麵包導覽位置

Blog部落格設定 :

設定文章的分類及單篇文章樣式

Sidebar側邊欄設定 :

用來設定網站頁面、文章分類，要不要顯示在側邊欗

Footer Builder頁尾設定 :

在網站的末端設定，能透過此工具來排版

9-2.設定頁面排版

網站的頁面排版比較豐富，可以透過外掛設計，針對靜態首頁(網站首頁)的部分修改

Astra會搭配Elementor頁面編輯器使用，點選Elementor編輯進到頁面做設計

左手邊很多工具可以製作頁面，拖曳區塊到指定的位置，修改是所得及所見，操作很方便，這邊Elementor是提供免費版，如需進階功能，建議升級付費版，可以獲得全部功能，讓網站更強大。

9-3.設定網站選單

點選左邊外觀進到選單，將文章或頁面新增到選單中，讓讀者可以點擊連結瀏覽。

勾選想要的文章新增到選單，最後記得按下儲存。

延伸閱讀➡︎如何建立WordPress文章-區塊編輯器教學

10.商品新增與管理

點選WooCommerce新增商品，輸入商品名稱、商品說明、價格、介紹，快速就能建立商品清單

WooCommerce設定很彈性，可依據商品類型、屬性做設定，商品分類為4種

• 簡單商品 : 設定基本內容即可發佈
• 組合商品 : 作為商品組合類型，例如 : 咖啡杯、濾掛
• 外部/加盟商品 : 透過外部連結販售商品，像是聯盟行銷
• 可變商品 : 不同的商品規格，例如 : 鞋子、顏色

透過WordPress自架站，可以賺取較多利潤，避免抽成太重及平台關閉，掌握度也比較好。

11.商店設定

11-1.商店基本設定

STEP 1

這套軟體是由國外開發，將商店設定成符合台灣人操作的模式

STEP 2

將貨幣欄位修改為NT，小數位數修改為0，記得點選下方儲存

WooCommerce軟體是國外開發，需完成上方設定，結帳才不會出現錯誤，也方便操作

11-2.金流設定

WooCommere有提供預設3種付款方式，銀行轉帳、支票支付、貨到付款，選擇適合的方式，信用卡目前有提供藍新科技、綠界科技、歐付寶，以上這3家有外掛能安裝，要去官網申請和開啟信用卡服務。

11-3.物流設定

WooCommerce運送方式有，運送區域、送貨設定、類別、自行取貨，按照不同國家和區域做設定運費方式，運送方式有，「單一費率」、「免費運送」、「自行取貨」。

單一費率 :

可以自行設定運費，例如:70元，按物流公司收取費用

免費運送 :

像是有滿千免運、免費折抵卷，設定免運的門檻，例如:優惠碼、最低訂購金額，

自行取貨 :

讓顧客自由選擇訂單，用當地取貨，需使用基本稅金(不限地區)

12.推薦WooCommerce常用外掛

WooCommerce週邊有幾個好用的外掛，可以強化購物車系統

12-1.YITH WooCommerce

電商會使用的外掛，例: 點數機制、會員等級、定時發送優惠、商品動態價格、自訂結帳頁面，在這邊都能找到，價格會更便宜。

13.申請網站網址

進入Namecheap官方，輸入想要的網址名稱，如果還沒有人註冊會顯示綠色，建議選擇與主題相關的名字。

14.行銷推廣

這步驟你要主動分享到社群，吸引目標客戶上門，透過付費廣告或SEO優化，讓客戶找到你，SEO關鍵字能幫助帶來精準客群，使用SEO工具查詢，做競爭對手分析、反向連結、流量來源。

延伸閱讀⮕社群行銷經營5大步驟-建立品牌知名度

15.電商平台有哪些?

了解電商平台的運作模式，通過不同管道將商品售出，提高業績成效

15-1.Shopline

Shopline成立於2013年，至今協助超過數十萬間商店，整合社群購物、零售、網路開店、會員APP ，提供顧問服務，幫助你更快上手業務，順利將商品販售，是許多台灣知名品牌御用的平台商。

15-2.Easystory

Easystory是中文介面，提供免費14天試用，方案分為「月費」、「年費」，不用手續費，對使用者很親民，透過編輯器工具上架商品，多元的管道可販售