架設購物網站 :WordPress 網路開店平台(官網製作)

0
566
WordPress 架設購物網站
WordPress 架設購物網站

這是一篇完整的「 架設購物網站 」教學。

想經營線上商店,但網路開店平台太多種,不知如何選擇?還是 WordPress 購物車網站設計,遇到了困難?

這邊會給你不同的選擇,原來 .. 可用最少預算自己購物網站架設,不一定要花大筆錢,租用市面的電商平台,流程如下:

相信等不及了,我們開始吧!


1. 架設方式選擇

如果你正起步創業,在還沒收入時,用最少預算開始「 購物網站架設 」,是最好的選擇。

但台灣市面上的網路開店平台,在租金選擇上,基本款動則每月 3000 元以上的電商平台租用價格,已是常態。

使用基本款方案,要不是綁一堆功能沒開放,就是想讓你升級成進階版。

使用進階版費用,每月約莫 5000 / 6000 以上,換算一年也要 6w / 7w 以上 .. ,當然還有更高階的收費方式。

重點是 .. 你還不確定商品是否有市場,且還沒開始賺錢!

也許,能考慮用更低費用,開始網路商店架設的第一步。

架設購物網站 ,有推薦的嗎?

許多人問如何用最少費用,自己 架設購物網站 ,我推薦使用 WordPress + Woocommerce。

wordpress woocommerce 架設購物網站
wordpress woocommerce 架設購物網站

WordPress 是全球知名的網頁設計軟體,全球有 30 % 以上的網站,都來自於 WordPress。

Woocommerce 是 WordPress 旗下最知名的網路商店架設外掛,全球下載量已超過 4500 萬。

任何想的到的功能,如:商品管理、訂單管理、會員管理、優惠管理、頁面管理、金物流串接等 .. ,都擁有。

眾多的 Woocommerce 外掛,可協助你擴展電商平台,只需點擊安裝即可。

架設購物網站 :wordpress woocommerce 外掛
wordpress woocommerce 外掛

WordPress Woocommerce 購物網站架設費用?

WordPress+Woocommerce 架站軟體,本身就是免費的。

電商主,需要負擔的只有每年一次的網址+虛擬主機費用,最少可用不到 2200 台幣(文章內有教學),就能開始你的網路事業

你唯一需負擔的是網址+虛擬主機費用,這是每一個網站主都需負擔的費用,沒有例外。

如果已有穩定流量,也可租用 不同等級虛擬主機,來負荷你的網站流量。

如果想了解更多 網站架設教學,也可前往學習。


2. 虛擬主機推薦

Bluehost 是地球最大的虛擬主機公司之一,全球管理數百萬個網站。

是小犬最愛的 WordPress 主機 ,自己親自使用多年,不論網站速度、客戶服務、價格便宜等 .. ,一切都沒話說。

許多部落客、企業主、電商經營者,都把網站建置在上面,有流暢的操作介面,就算不懂英文(可用 Google 翻譯),還是能操作自如。

有哪家虛擬主機商,對 WordPress 有良好的支援?

Bluehost 是 WordPress 官方認可的虛擬主機商,對 WordPress 有良好的支援。

Bluehost教學 :wordpress.org 認證的虛擬主機公司
wordpress.org 認證的虛擬主機公司(經過官方嚴格審核標準)

Bluehost 正常運行時間+網站速度,表現好嗎?

Bluehost 全年有 99.9% 以上的正常運行時間(沒任何一家能保證 100%),這是重要的,不然訪客無法連上你的網站。

測試 10 多家虛擬主機(網路空間)的速度,Bluehost 是排名前幾名的。

Bluehost教學 :網站正常運行比例&頁面載入時間
Bluehost 網站正常運行比例&頁面載入時間

Bluehost 還有許多優點,它的知名度告訴了一切。

接下來,我將開始「 Bluehost教學 」課程,繼續網頁架設教學。


3. Bluehost 方案選擇

前往 Bluehost,選擇 WordPress > WordPress Hosting(WordPress 主機)。

bluehost教學 :wordpress主機+網域申請
使用 Bluehost 申請 wordpress主機+網域

往下滑,會看到 Bluehost WordPress 主機方案,下面我會給你一些 Bluehost 方案評價。

bluehost 主機方案費用
bluehost 主機方案費用

要選擇哪種 Bluehost 方案?

  • 只有一個網站架設需求:選 Basic 方案
  • 多網站架設需求:選 Plus 或 Choice Plus 方案

以新手來說,若只有一個網站需架設,選擇 Baisc 方案是毫無懸念的,此方案也搭配 50 GB 的儲存空間,是非常夠用。

若架設不只一個網站,建議直接選擇 Plus 方案,因為該方案和 Choice Plus 功能差不多,卻比較便宜。

Bluehost 費用了解

Bluehost 通常費用是,網址 $14.99 美元 / 年(一年約 450 台幣),和主機 $7.99美元 / 月(一年約 2880 台幣)。

值得開心的是,Bluehost 官方同意為我們網站讀者,提供最高 50% 以上的主機折扣(如下表,以台幣計算)

WordPress Basic 方案 WordPress Plus 方案
買一年:特價約 2142 元(原價2880 元 買一年:特價約 2682 元(原價 3960 元
買二年:特價約 3564 元(原價 5760 元 買二年:特價約 5004 元(原價 7920 元
買三年:特價約 4266 元(原價 8640 元 買三年:特價約 5886 元(原價 11880 元

小提醒:新手可購買 1 年的 WordPress Basic 方案,用最少預算入門:)

如果網址同樣在 Bluehost 申請, Bluehost 還提供首年網域免費並附帶免費的 SSL 憑證。

等於說,網址+主機費用加起來,最少可用不到 2200 台幣,就能開始你的網路事業!

接下來,我將購買 1 年的 WordPress Basic 入門方案,當作 Bluehost教學 範例。

不管購買的是哪種方案,只要點擊本站 Bluehost 連結,讀者們都享有優惠價格。


4. 網域申請+租用虛擬主機

選擇 Bluehost 方案後,就可以網域申請+虛擬主機推薦租用囉:)

這邊簡化 3 步驟,打造自己的網頁製作。

Step1:網域申請

申請新網址選 Create a new domain,已經有網址選 Use a domain you own,確認點 Next。

如果「 網址 」和「 主機 」都在 Bluehost 註冊的首購申請,Bluehost 會附贈一年的網址(免繳網址費用)唷。

bluehost教學 :網域申請
有建立新網址 & 已經有網址,兩種選項
  • 小提醒:如果你是用「 已有網域 」去申請 Bluehost 主機,請操作 DNS 設定指向,這樣原來的網址才會順利連結上新主機。

Step2:申請資料填寫

填寫使用者資訊,需都填寫英文,郵遞區號需 5 碼(國際碼),可用這個工具查詢。

Email 需填寫正確,申請完成 Bluehost 會寄網域確認信(需點擊啟用)& 購買收據等 .. 敏感訊息。

bluehost教學 :使用者資訊
bluehost教學 :使用者資訊

主要留意租用多久、是否加購商品、確認消費金額,Bluehost 會贈送一年網址和免費的 SSL 憑證。

加購商品只有 Domain Privacy(網域隱私保護)比較值得加購,其他可不勾選,省預算。

bluehost教學 :方案選擇&加購商品
bluehost教學 :方案選擇&加購商品

確認消費金額,接著填入付款訊息,都完成無誤後,勾選服務條款,最後按下 Submit 送出。

bluehost教學 :付款方式
bluehost教學 :付款方式

Step3:創建 bluehost 帳戶

跟著 Bluehost教學 ,如果網域+主機申請成功,會看到歡迎訊息 & 收據明細,接著來註冊 Bluehost 帳戶。

點擊 Create your account 創建帳戶。

bluehost教學 :虛擬主機申請完成
bluehost 主機申請完成,創建 bluehost 帳戶&收據確認

下圖,Domain Name(網域名稱)是未來登入 Bluehost 的帳號,並輸入你想申請的密碼,確認無誤後點 Create Account 建立帳號。

P.S 這裡的資料請妥善保存,是未來登入 Bluehost 的帳密唷:)

bluehost教學 :創建bluehost帳戶
創建 bluehost 帳戶:輸入密碼

到了這裡,恭喜完成了網域申請 > 主機申請 > Bluehost 帳戶註冊的重要流程。

有了這些東西,我們就可以架設 WordPress 網站囉。


5. WordPress 網站製作

到了這邊,應該已經有個人網域、虛擬主機、Bluehost 登入帳密了,我們繼續架設 WordPress 網站。

首先,前往 Bluehost,點 Login 登入。

bluehost 登入教學
bluehost 登入教學

輸入你的網域名稱(或信箱)&密碼, 登入 Bluehost 。

bluehost教學 :後台登入
bluehost教學 :後台登入

如果是第一次登入,Bluehost 會詢問一些問題,並協助你安裝,這些畫面 Bluehost 有可能更改,但未來都可以更改,先任意選擇即可。

下面是示範教學,實際狀況可依個人需求選擇。

首先,選擇網頁製作類型、為誰創建網站等 .. 。

bluehost教學 :網站架設流程
選擇想架設的網站類型等 ..

勾選 Blog 頁面、About me 關於我們頁面等 ..

網頁製作教學:bluehost
選擇想加入的網頁內容

命名網站名稱、設定網站標語,和給 Bluehost 架站幫手一點評分。

bluehost 教學:網頁製作
命名網站名稱、標語、和給 Bleuhost 架站流程評分:)
  • 因為 Bluehost 是英文介面,中文標題在 Bluehost 後台可能呈現問號(除非英文命名),但這不會有任何影響。

然後,挑選 WordPress 主題,可先選個免費版的主題玩玩,看喜歡哪個,不一定要跟我一樣:)

bluehost教學 :wordpress主題挑選
超多 wordpress 主題挑選:)

如果安裝過程中,有出現類似加購商品,先取消它不加購

安裝完成後,會前往 Bluehost 後台首頁。

然後點 My Sites,會出現剛架設完成的網站,可在這裡進入 WordPress 網站前後台。

Bluehost教學 :前往網站前後台
Bluehost教學 :前往網站前後台
  • 此時前台路徑可能是臨時網址,過些時間 Bluehost 會自動更改成你剛申請的網址。

想新增頁面、編輯文章、新增分類 .. ,請參考 WordPress 後台教學課程,有更多的 WordPress 操作。

這時,點擊上圖前台路徑,會發現 WordPress 網站已經順利出現囉!恭喜你!

如果是 WordPress 登入狀態,前台應該看得到預設主題畫面。

如果用訪客模式(無痕視窗),前台應該會出現網頁準備中頁面,等網頁設計完畢後,再切換 正式上線 即可。


6. Bluehost 其他設定

如果有跟著上面的教學,你應該也順利建立你的 WordPress 網站了。

接著我們還有一些事項需完善它,像是信件認證(WhoIs 網域身份認證)、Bluehost & WordPress 設定、網站正式上線 ..。

這幾個也是必要的步驟,請參考 Bluehost 網站製作,補充尚未學習到的部分。

完成後相信你的個人網站設計,也大功告成了:)


7. 網站基本設定

當網域申請+虛擬主機租用完成,有些 WordPress 後台系統需要調整,方便後續進行。

主要有:網站標題更改系統語言更改文章網址更改選單分類設定新增或編輯使用者

或是可以參考這篇,裡面有完整教學。

更多 WordPress 前後台教學,多個課程前往學習:

WordPress教學 :23 個安裝課程(主題外掛+購物車)

如果設定完成,可繼續往下網頁架設。


8. WooCommerce 外掛安裝

前置作業完成後,開始 WordPress 購物車網站架設。

首先,登入 WordPress 後台 > 安裝 WooCommerce 外掛,然後啟動外掛。

架設購物網站 :woocommerce外掛安裝
woocommerce外掛安裝

小提醒:購物系統只是網站功能的其中一環,請參考最佳 WordPress 推薦外掛,會幫助你得到更多。

然後照著流程選擇,和點擊下一步即可,若有推薦外掛不一定要安裝,之後都能再裝。

我略過一些過程,直接跳到 WordPress 佈景主題選擇,點 Free themes 免費主題 > Choose 選擇。

架設購物網站 :wordpress購物車,佈景主題選擇
wordpress購物車,佈景主題選擇

安裝完成後,WordPress 後台會看到 WooCommerce 購物網站功能,有關產品管理、訂單管理等 .. ,都在這裡。

架設購物網站 :WooCommerce教學
WooCommerce教學

輸入你的網址,瀏覽一下前台頁面,發現剛安裝的 WordPress 佈景主題,也順利出現了:)

架設購物網站 :WordPress 購物網站架設:初版完成
WordPress 購物網站架設:初版完成

接下來學習如何新增你的第一個商品。


9. 商店設定

這章節,開始商店設定,主要針對「 一般商品運送方式付款 」,進行 WooCommerce WordPress 教學。

一般設定

設定商店地址,填入商店資訊。

woocommerce 購物網站架設:網路開店平台設定
woocommerce 購物網站架設:網路開店平台設定

可照需求設定銷售區域、運送地區,是否啟用系統稅金功能、優惠券。

如有開啟功能,就能在商品管理中,對每種商品進行客製化管理。

woocommerce 購物網站架設:網路開店平台設定
woocommerce 購物網站架設:網路開店平台設定

設定貨幣選項,小數位可以調成 0 ,最後儲存。

網路開店平台:WooCommerce 系統設定
網路開店平台:WooCommerce 系統設定

如此一來,商店基本資料就設定完成了。

商品設定

商品設定,分成 一般 / 庫存 / 可下載商品,這邊挑選「 庫存 」做教學。

前往「 庫存 」後,可以啟用庫存管理功能,之後在商品管理中,就可以設定庫存數量

當頁還可設定保留庫存時間(預防扣留商品)、低庫存通知信、庫存顯示格式等 .. 。

啟用庫存管理功能

運送方式

前往運送方式,分別有 運送區域 / 運送選項 / 運送類別 ,這幾個選項可設定。

選擇運送區域 > 編輯台灣區域。

電商平台:設定運送方式
電商平台:設定運送方式

設定地區 > 是否啟用運送方式 > 細節編輯 > 進行儲存。

也可拖移區塊,就能改變前台呈現的順序。

購物網站設計:編輯物流方式
購物網站設計:編輯物流方式

如此一來,運送方式就簡單設定完成囉。

付款方式

點擊付款 > 選擇想啟用的付款方式 > 確認儲存。

這邊可編輯付款細項,點擊「 管理 」即可。

付款方式設定(金流設定)
付款方式設定(金流設定)

如果想串接電商的第三方金流如:綠界、歐付寶 ,可安裝相對應的 WordPress外掛,並進行設定,就可以囉:)

網路電商平台:第三方金流串接
網路電商平台:第三方金流串接

10. 新增商品分類

開始新增商品前,我們先來設定一下商品分類,方便管理電商平臺。

前往 WooCommerce > 商品 > 分類,填寫分類資訊,可參考下圖。

電商平台:新增商品分類
電商平台:新增商品分類
  • 代碼:就是分類網址,建議填寫英文。
  • 上層分類:可設定從屬階層。
  • 縮圖:每個 WordPress 佈景主題不同,有的會呈現、有的不會。

完成後,右手邊就有剛新增完成的分類了唷。

wordpress 商品分類
wordpress 商品分類

11. 商品網址設定

開始新增商品前,先把商品網址預設值更改好,等等才會事半功倍。

前往 WordPress 後台 > 設定 > 永久連結,把一般設定更改為「 文章名稱 」方式,看起來比較直覺。

更改文章的系統網址連結
更改文章的系統網址連結

商品固定網址,更改成「 預設 」,網址就會是「 product / 你的產品名稱 」的形式,確認後儲存。

更改商品的系統網址連結
更改商品的系統網址連結

這些是我的網址設定,當然也可以根據你的需求選擇:)

更多 WordPress 前後台教學,多個課程前往學習:

WordPress教學 :23 個安裝課程(主題外掛+購物車)


12. 新增商品

上面都設定完成了,就到我們的網路開店平台,新增第一個商品吧。

前往商品 > 新增,依照下表填入自己的商品資訊。

Woocommerce 網路電商平台:新增 / 編輯商品
Woocommerce 網路電商平台:新增 / 編輯商品

第 3 步驟,可設定商品形式,有分「 簡單商品、組合商品、外部/加盟商品、可變商品 」,如沒特殊需求,先選簡單商品即可。

第 4 步驟,有分成一般、庫存、運送方式、連結商品、屬性等 ..,可依需求填入商品資訊。

如要啟動系統庫存功能、運送方式方式等 ..,可參考商店商定章節,設定完成後,在各別商品就會顯示。

新增 / 更新完成後,來看一下成品吧!

架設購物網站 :網路開店平台
架設購物網站 :網路開店平台

購物網站設計頗美的,如此一來,訪客就能在你的網路開店平台,買東西囉!

接著來調整一下小地方。


13. 首頁設定

前往網站前台,會發現首頁是文章列表,這是 WordPress 系統預設的,如下圖。

網路開店平台:WordPress首頁設定
WordPress首頁設定

但「 架設購物網站 」的首頁,應該擺放商品列表才對,所以來做個調整。

首先,前往 WordPress 後台的「 設定 > 閱讀 」。

切換成靜態頁面 > 選擇有商品列表的頁面(每個 WordPress 佈景主題頁面不同)> 儲存送出。

架設購物網站 :wordpress首頁設定
wordpress首頁設定

設定完成後,回到購物網站設計的首頁,看是否成功。

架設購物網站 :電商平台,首頁商品出現
電商平台,首頁商品出現

看來是滿順利的,這樣訪客搜尋你網址,進來就會先看到商品囉:)

更多 WordPress 前後台教學,多個課程前往學習:

WordPress教學 :23 個安裝課程(主題外掛+購物車)


14. 訂單管理

訪客購買完成後,在「 Woocommerce > 訂單 」,就會出現新增的訂單,點擊訂單即可編輯。

架設購物網站 :wordpress訂單管理
wordpress訂單管理

訂單內容主要分成 4 小塊,下面跟大夥兒簡單教學。

架設購物網站 :wordpress woocommerce 訂單管理
wordpress woocommerce 訂單管理

訂單資料

可編輯訂單日期、訂單狀態、帳單資訊、運送方式等 .. ,有關訂單的主要細節,尤其是「 訂單狀態 」,應該會滿常用到。

商品資料

消費者訂購的商品資料,如有新增 / 編輯 / 刪除商品、費用、運費等 ..,都可在這一併調整。

訂單使用折價券,或是訂單想退費,這裡皆可設定。

最後記得按下「 重新計算 」,才會得到更新後的正確訂單金額唷

訂單動作

如確定消費者付款完成,可使用訂單動作,將發票 / 訂單明細寄給客戶。

或是訂單有更改,如:新增商品等 .. ,可重新寄送訂單通知信給客戶。

在訂單管理,如有調整訂單相關內容,請記得按下「 更新 」,才會生效唷:)

訂單備註

有分成私人備註、給顧客的備註,這 2 種可依照需求填寫。

WordPress Woocommerce 電商平台的購物車訂單系統,設計滿直覺的,很適合剛入門電商,想經營線上商店的夥伴。

都是重點功能,上手起來也快,重點是免費的購物網站架設,很實用。


15. 會員管理

購買完成的顧客,會自動成為網站會員,在「 Woocommerce > 顧客 」中,就可看到相關資訊。

點擊會員名稱,即可編輯顧客資料。

會員管理也提供多種搜尋條件,和列表匯出功能。

架設購物網站 :wordpress woocommerce顧客資料一覽
wordpress woocommerce顧客資料一覽

在「 使用者 > 全部使用者 」,可看到所有註冊的會員資料,也可以編輯每個會員。

架設購物網站 :會員編輯管理
架設購物網站 :會員編輯管理

如此一來,你對每個會員都瞭若指掌了,剩下的只要想如何累積更多的顧客:)


16. 電商主題推薦

優質的 WordPress 佈景主題,算是一個小投資。

一定會比請網頁設計公司上萬元的製作費用,來的更便宜。

優質 WordPress 佈景主題,客製化形象網站設計,完整教學:

Avada教學 :18 個網頁製作課程(WordPress主題)

用過 10 幾種佈景主題後,最後只推薦 Avada 佈景主題,不但容易上手,功能性也非常強大。

Avada

wordpress avada 佈景主題
wordpress avada 佈景主題

Avada 截至目前,已經狂銷 600,000 以上,在 WordPress 佈景主題上是個絕無僅有的數字 ..

可以用它架設個人或公司網站、部落格、媒體網站、購物網站等 ..,看下面影片了解更多。

它有超棒的客製化網頁設計功能,我列出幾個優點:

  • 超多展示網站,可一鍵安裝。
  • 所見即所得編輯器,用拖拉方式即可架設網站。
  • 70 幾種網頁設計的功能元件,可客製化完成需求。
  • 高性能、高速度的 WordPress 佈景主題。
  • 擴充 Woocommerce 購物車外掛功能。
  • 很棒的客服體驗。

超過 60+ 個展示網站,可直接一鍵導入,再修改成自己的網頁設計即可。

Avada 展示網站
Avada 展示網站(有超過 60 個展示網站,這裡只列舉部分)

網頁可使用元件高達 70 多種,能客製化網站架設,或購物網站架設,是自架官網的好幫手。

Avada 使用元件
Avada 多種使用元件

熱銷的 WordPress 佈景主題 Avada,全球已狂賣 60w+ 套以上。

wordpress avada 佈景主題
wordpress avada 佈景主題

小犬是 Avada 使用者之一,用過多種 WordPress 佈景主題後,使用上最滿意的主題,跟大夥兒分享。


17. 開始起飛

經過扎實的「 架設購物網站 」教學,希望有協助你,完成了網路開店平台架設。

WordPress Woocommerce 購物車,其實還有很多玩法,這篇先帶領大家入門。

國內外有很多知名的電商,也是使用 WordPress 架設購物網站 ,主要原因是系統完全屬於自己,而不是第三方,包括資料也是。

也不需請網頁設計公司開發,委外製作一來網站製作費用貴,二來客製化程度低。

所以善加使用 WordPress Woocommerce 電商平台,相信會對你有幫助的:)

我是站長小犬,長期關注:WordPress 網站架設、WordPress 後台教學、WordPress 佈景主題、WordPress 外掛、網路行銷等 ..:)

發表迴響