架設購物網站做網拍賺錢,不用再當上班族多好, 外面一個購物網站架設費用至少6、7萬, 那不如自己免費做一個Wordpress購物車網站呢? 但要如何架設網站賣東西??其實購物網站架設的難度,在目前Wordpress+woocommerce金流串接的支援下, 基本的購物網站架設,是難度低、建置速度快、價格費用也低,極適合個人玩票性質。 在商業性質的話,還是建議找專業的網站設計公司建置購物網站。那要如何架設購物網站呢?請跟我這樣做,基本購物網站架設包含以下步驟。

購物網站架設步驟

  1. 買網址+DNS設定+HTTPS加密
  2. 買網站主機 + 安裝Wordpress
  3. Wordpress網頁設計與安裝佈景主題(版型、Theme)
  4. 購物車外掛-WooCommerce
  5. 線上刷卡-以藍新金流為例
  6. Google網站登錄
所以透過本文Wordpress購物網站架設大解析。跟你分享購物網站設計教學從買網址、主機到Wordpress網頁設計、串接購物車模組, 即可建置一個可線上刷卡的電商購物網站。Just Do It!

Step1: 買網址+DNS設定+HTTPS加密

貴設計都在Godaddy買網址,理由是介面清楚明瞭、DNS轉換設定簡單好用、速度快(用過中華電信你就知道慢)、網址多樣化選擇(可參考 Godaddy買網址)。
Godaddy買網址

注意上方你看到的費用部份只有首年,在價錢的下面有一排灰色字"適用於第一年",你下次購買網址使用權就會恢復成原價。 若以長期購買使用的話,其實你是一點折扣也沒有賺到的,若你一次買10年,其實一點打折也沒有。

購買網址需註冊Godaddy(需綁定信用卡),購買網址後去"帳戶-->我的產品",就會看見剛購買的網址。 若網址買錯的話,可參考Godaddy退款策略
godaddy

DNS設定(如下圖) ,何謂DNS設定呢? 簡單講,你買了一個網址,你要將網址指去某個主機的IP
URL、IP、Domain
進入畫面之後,你會看見類似如下的畫面,尋找一個叫做類型為A,再將值輸入你的主機IP即可(我知道還沒有租主機,所以沒有IP,後續會說明),這個動作稱之為DNS設定DNS設定

HTTPS加密,貴設計為了能夠使用免費HTTPS(Https是什麼?) 的服務,我們會選擇將DNS交給Cloudflare代管 ,因為Cloudflare有免費的https服務,這樣子我們就不用額外一年花個好幾千買https。 如何將Godaddy的DNS交給Cloudflare代管呢?方式如下
  1. 註冊Cloudflare:https://www.cloudflare.com/zh-tw/,並新增網站將網址填入 註冊Cloudflare
  2. 完成後,你就會看見你的網址,接著點擊進去(貴設計是網頁設計公司就有很多網址要設定) Cloudflare
  3. 將畫面拉到下方Cloudflare名稱伺服器(在Cloudflare的網站),接著將紅色部份回填到Godaddy名稱伺服器(在Godaddy的網站)即可。 Cloudflare名稱伺服器
  4. 再回到Cloudflare DNS設定,將IP填入以下紅色區塊就大功能告成。 Cloudflare DNS設定
影片解說: 延伸閱讀 【網站架設流程 】:買網址、租主機、準備素材、網站設計、Google收錄

Step2:買網站主機+安裝Wordpress

買網站主機 ,貴設計推薦SiteGround,SiteGround成立於2004年主機商公司,擁有400多名員工。SiteGround提供虛擬主機、雲託管主機、網域等等。 SiteGround運作時間保證是99.99%,所以他們的伺服器不會有當機或連不上的問題。

為何選擇SiteGround?

  1. 免費SSL加密憑證
  2. 免費 CDN
  3. 每天自動備份,自動備份前30天資料
  4. 主機穩定性優
  5. 24/7客服服務,線上即時聊天,回覆速度快
  6. SG介面乾淨,好上手
  7. Wordpress一鍵安裝,5分鐘搞定
  8. Wordpress免費輕鬆搬家,SG提供免費外掛
  9. Wordpress自動更新

如何在SiteGround建立Wordpress?

  1. 註冊登入後,到Home 就會看到 Set Up Site,點進去。
    Siteground建立Wordpress
  2. 選擇Start a New Website。 ps.如果你現有Wordpress網站才選擇Migrate Website。
    Siteground建立Wordpress
  3. 選擇Wordpress。 ps.如有需要WooCommerce可以點選Wordpress+WooCommerce。
    Siteground建立Wordpress
  4. 設定登入資訊,之後登入都以這帳密登入。
    Siteground建立Wordpress
  5. SiteGround有提供加購網站掃毒的工具,看需不需要加購,不需要直接按Finish,Wordpress網站就完成了!
    Siteground建立Wordpress
  6. 直接登入網站。
    Siteground建立Wordpress

在完成Siteground主機之後,將Siteground取得的IP至Cloudflare DNS設定即可(如下)。
Cloudflare DNS設定

Step3: Wordpress網頁設計與安裝佈景主題(版型、Theme)

安裝好Wordrpess後,請輸入 https://購買的網址/wp-admin。再輸入帳密即可登入。 Wordpress登入畫面
登入之後,就會看見如下的後台。就代表你已經成功至少50%了。 Wordpress後台

接著安裝Wordpress版型幾個步驟:

  1. 外觀->佈景主題
  2. 選擇想要的佈景主題:
    • 如已購買佈景主題:請先下載主題後,至安裝佈景主題進行安裝。
    • 也可以使用Wordpress提供免費版型
  3. 選好後只需要在下方按「啟用」,即可蓋掉現有的佈景主題。
  4. 佈景主題就安裝好了!
更多Wordpress網頁設計文章,請參考
  1. 【Wordpress版型推薦】佈景主題下載秘技
  2. 【Wordpress是什麼?】Wordpress形像網站有什麼優勢?
  3. 【Wordpress網站前後台】教學
  4. 【Wordpress版型推薦】佈景主題下載秘技
  5. 【WordPress 媒體庫】教學
  6. 【Wordpress 選單教學 (Menu)】教學
  7. 【Wordpress頁面新增、刪除、修改 】教學
  8. 【Wordpress文章新增、刪除、修改、列表、分類】教學
  9. 【Wordpress外掛】教學及推薦
  10. 【All in one Migration 】Wordpress網站備份外掛
  11. Wordpress網頁設計教學
到這個步驟結束之後,其實你已經完成了一個 Wordpress形象網站。剩的就是安裝購物車模組(WooCommerce)。

Step4:購物車外掛 - WooCommerce

你想網路銷售嗎? 選擇Wordpress建置購物網站最推崇的購物車模組 WooComerce就對了,市面有一些其他的電商開源架構 (如Opencart),都不如WooComerce值得被推薦。最大的好處莫過於WooComerce 在Wordpress的廣泛應用,使得任何疑難雜症、功能開始相較於其他套件都容易Google到方案。而無需再花上萬元,找外包工程師開發。所以想要建置購物網站, WooCommerce是一個正確的選擇。WooCommerce
WooCommerce的功能涵蓋了以下幾個重要功能

  1. 商品管理:對商品圖文影介紹、商品上下架、定價、折扣、庫存管理、運送方式....。
    WooCommerce商品管理
    WooCommerce商品管理
  2. 訂單管理:訂單清單、訂單資訊、訂單狀態調整 WooCommerce訂單管理
  3. 銷售報表:依年、月、過去七日統計銷售總額、曲線報表 WooCommerce銷售報表
  4. 折價券:折價券類型、折扣種類、金額、描述、到期日、使用限制等。 WooCommerce折價券
    其他還有顧客管理、分析各式資料。上述功能對於一個需要電商購物網站的客戶是已經非常足夠的,而部份的網站會特別安裝一些組合優惠的外掛。 這也只需要網站搜尋Wordpress外掛即可。EX:Advanced Dynamic Pricing for WooCommerce、WPC Product Bundles for WooCommerce、YITH WooCommerce Product Add-Ons。

    如何安裝WooCommerce,請參考以下影片。安裝完成後在你的左選單會看見WooCommerce的項目,就代表安裝成功了,接著就要開始串金流囉!

Step5:線上刷卡-以藍新金流為例

申請藍新金流的會員是不需付費,只有在客戶線上刷卡購買完成會收2.8%的藍新金流手續費(100元收2.8元),及在提款時會收取提領手續費(提領手續費每個月4次免手續費、第5次起每次10元手續費)。 此外請先準備銀行帳號及個人or企業的基本資訊(身份證、統編、地址),申請時均需要輸入。

藍新金流個人會員可自行開立商店使用信用卡支付、Web ATM、ATM轉帳、超商代碼繳費、條碼繳費等完整金流機制,並享有簡易快速收款功能,輕鬆整合處理收付帳款,即時掌握交易紀錄。 點擊註冊個人會員

企業會員則可自行開立商店使用信用卡支付、Web ATM、ATM轉帳、超商代碼繳費、條碼繳費等完整金流機制,並享有簡易快速收款功能,輕鬆整合處理收付帳款,即時掌握交易紀錄。 註冊企業會員

了解更多藍新金流可參考企業會員常見問題。 接著回到主題,要能夠申請線上刷卡會分為三個步驟

  1. 註冊藍新金流:註冊後需輸入銀行帳號(需要等1~2個星期驗證銀行帳號),提款時錢才能夠轉進你的戶頭內,另外要記的開通信用卡刷卡、ATM轉帳、到貨付款等功能(如上所述)。
  2. 安裝藍新金流Wordpress外掛:記得先下載WooCommerce線上刷卡外掛。下載後解壓縮,內有一個zip檔,再使用手動上傳外掛即可安裝(可參考以下影片)。
  3. 設定藍新金流外掛:請務必設定三個值 1)藍新金流商店 Merchant ID(即商店代號) 。2)藍新金流商店 Hash Key 。 3)藍新金流商店 Hash IV,如何設定請參考影片。 設定完成請把啟動測試模組取消,接著在商品新增一個1元的商品,再拿自已的信用卡刷卡試用即可。若刷卡有誤請檢查剛設定的3個值。若仍是不行請洽藍新金流的客服部門。他們回話速度還滿快的。

Step6:Google網站登錄

Google無法搜尋到你的網站嗎?甚至連品牌字關鍵字在搜尋結果也沒有看見!OMG到底要如何讓Google搜尋到我的網頁呢? 【網站登錄】就好比新生兒出生報戶口的動作,同樣你的新網站也要跟Google報戶口。
時代的演進,全球主要的搜尋行為高達93%都在Google搜尋引擎上發生(參考下圖), 所以網站架設完成後,請務必至Google搜尋引擎登錄網站。不然花了5、6萬打造一個蚊子館實為浪費,。 請參考 網站架設完成後,Google卻搜尋不到? 3種【網站登錄】的方式?最快只要1秒鐘!

購物網站架設費用

架設購物網站的費用與Wordpress形象網頁設計 差異最大的部份在於購物車網站的功能,例如商品上下架管理、訂單管理、銷售報表、折價券之類的。 但上一章節有提到這些功能已包括在WooCommerce的外掛內,無需額外付費。但需額外費用會在於"WooCommerce安裝與設定、API串接、商品頁調整、購物狀態Email通知、商品類別與標籤、WooCommerce基本教學、藍新金流申請溝通與協調"

購物網站架設費用
項目費用說明
Wordpress網頁設計49,800
  1. 首年免主機費 (價值5,000元)
  2. 精美付費版形 (價值1,500元)
  3. 1首頁+5內頁半客製化設計
  4. Google雲端自動備份外掛 (價值3,000元)
  5. RWD 響應式網站設計
  6. Wordpress完整前後台
  7. 陪伴式網頁設計教學
  8. 。。。
    請參考完整Wordpress網頁設計方案
WooCommerce外掛與設定10,000如WooCommerce安裝與設定、API串接、商品頁調整、購物狀態Email通知、商品類別與標籤
藍新金流5,000透過線上信用卡支付減少使用者付費障礙、加快支付流程。藍新金流是目前最推薦的線上支付方式。透過藍新金流讓購物平台的使用者付款超方便、結帳超快速。 此外還提供超商店到店寄/取件,涵蓋全台5,000+ 便利商店,免簽約、免設定費、立即啟用。
線上刷卡(超商取貨)費用2.8%手續費 申請藍新金流的會員是不需付費,只有在客戶線上刷卡購買完成會收2.8%的手續費(ATM轉帳1%、超商代碼繳費28元),及在提款時會收取提領手續費(提領手續費每個月4次免手續費、第5次起每次10元手續費)。 貴設計的客戶只需2.6%線上刷卡手續費,快點找貴設計做購物車吧!)
所以貴設計電商網站製作價格為64,800(首年總費用、隔年主機費7,000),就可以擁有一個RWD的電商購物網站。快點與貴設計聯絡吧。