6步驟搞定～Wordpress電商【購物車網站架設＋金流串接】教學

跟你分享購物網站設計教學從買網址、主機到Wordpress網頁設計、串接購物車 ... 內，另外要記的開通信用卡刷卡、ATM轉帳、到貨付款等功能(如上所述)。

➦馬上分享 網頁設計 網頁設計教學部落格 6步驟搞定～Wordpress電商【購物車網站架設＋金流串接】教學 ➦馬上分享 架設購物網站做網拍賺錢，不用再當上班族多好， 外面一個購物網站架設費用至少6、7萬， 那不如自己免費做一個Wordpress購物車網站呢?但要如何架設網站賣東西？？其實購物網站架設的難度，在目前Wordpress＋woocommerce金流串接的支援下， 基本的購物網站架設，是難度低、建置速度快、價格費用也低，極適合個人玩票性質。

在商業性質的話，還是建議找專業的網站架設公司建置購物網站。

那要如何架設購物網站呢?請跟我這樣做，基本購物網站架設包含以下步驟。

購物網站架設步驟 買網址＋DNS設定＋HTTPS加密 買網站主機＋安裝Wordpress Wordpress網頁設計與安裝佈景主題(版型、Theme) 購物車外掛－WooCommerce 線上刷卡－以藍新金流為例 Google網站登錄 所以透過本文Wordpress購物網站架設大解析。

跟你分享購物網站設計教學從買網址、主機到Wordpress網頁設計、串接購物車模組， 即可建置一個可線上刷卡的電商購物網站。

本文末還會跟你分享一個節省５萬成本金的方式就可以做電商囉！Ｌｅｔ＇ｓ　Ｇｏ！ 🧬Step1： 買網址＋DNS設定＋HTTPS加密(附影片) 🧬Step2：買網站主機 ＋安裝Wordpress 🧬Step3： Wordpress網頁設計與安裝佈景主題(版型、Theme) 🧬Step4：購物車外掛 WooCommerce-WooCommerce 🧬Step5：線上刷卡-以藍新金流串接為例 🧬Step6：Google網站登錄 🧬購物網站架設費用 🧬架設電商網站現省５萬 🧬Step1：買網址＋DNS設定＋HTTPS加密 貴設計都在Godaddy買網址，理由是介面清楚明瞭、DNS轉換設定簡單好用、速度快(用過中華電信你就知道慢)、網址多樣化選擇(可參考 Godaddy買網址)。

注意上方你看到的費用部份只有首年，在價錢的下面有一排灰色字"適用於第一年"，你下次購買網址使用權就會恢復成原價。

若以長期購買使用的話，其實你是一點折扣也沒有賺到的，若你一次買10年，其實一點打折也沒有。

購買網址需註冊Godaddy(需綁定信用卡)，購買網址後去"帳戶-->我的產品"，就會看見剛購買的網址。

若網址買錯的話，可參考Godaddy退款策略。

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

HTTPS加密，貴設計為了能夠使用免費HTTPS的服務，我們會選擇將DNS交給Cloudflare代管 ，因為Cloudflare有免費的https服務，這樣子我們就不用額外一年花個好幾千買https。

如何將Godaddy的DNS交給Cloudflare代管呢?方式如下 註冊Cloudflare:https://www.cloudflare.com/zh-tw/，並新增網站將網址填入 完成後，你就會看見你的網址，接著點擊進去(貴設計是網頁設計公司就有很多網址要設定) 將畫面拉到下方Cloudflare名稱伺服器(在Cloudflare的網站)，接著將紅色部份回填到Godaddy名稱伺服器(在Godaddy的網站)即可。

再回到CloudflareDNS設定，將IP填入以下紅色區塊就大功能告成。

影片解說: 延伸閱讀【網站架設流程】:買網址、租主機、準備素材、網站設計、Google收錄 🧬Step2：買網站主機＋安裝Wordpress 買網站主機 ，貴設計推薦SiteGround，SiteGround成立於2004年主機商公司，擁有400多名員工。

SiteGround提供虛擬主機、雲託管主機、網域等等。

SiteGround運作時間保證是99.99%，所以他們的伺服器不會有當機或連不上的問題。

為何選擇SiteGround？ 免費SSL加密憑證 免費CDN 每天自動備份，自動備份前30天資料 主機穩定性優 24/7客服服務，線上即時聊天，回覆速度快 SG介面乾淨，好上手 Wordpress一鍵安裝，5分鐘搞定 Wordpress免費輕鬆搬家，SG提供免費外掛 Wordpress自動更新 如何在SiteGround建立Wordpress？ 註冊登入後，到Home就會看到SetUpSite，點進去。

選擇StartaNewWebsite。

ps.如果你現有Wordpress網站才選擇MigrateWebsite。

選擇Wordpress。

ps.如有需要WooCommerce可以點選Wordpress＋WooCommerce。

設定登入資訊，之後登入都以這帳密登入。

SiteGround有提供加購網站掃毒的工具，看需不需要加購，不需要直接按Finish，Wordpress網站就完成了！ 直接登入網站。

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

🧬Step3： Wordpress網頁設計與安裝佈景主題(版型、Theme) 安裝好Wordrpess後，請輸入https://購買的網址/wp-admin。

再輸入帳密即可登入。

登入之後，就會看見如下的後台。

就代表你已經成功至少50%了。

接著安裝Wordpress版型幾個步驟: 至外觀->佈景主題 選擇想要的佈景主題: 如已購買佈景主題:請先下載主題後，至安裝佈景主題進行安裝。

也可以使用Wordpress提供免費版型 選好後只需要在下方按「啟用」，即可蓋掉現有的佈景主題。

佈景主題就安裝好了！ 在佈景主題安裝完成後，貴設計推薦您使用Elementor編輯器去設計你的網頁，貴設計用過許多網頁編輯器後 ，深覺的Elementor的好用，所見即所得的模式，讓你在修改、新增頁面能夠馬上見到效果。

再加上提供許多好用的元件， 直接拖拉並修改文字及設計，就能做到網頁的設計。

以下的影片為您示範如何透過Elementor修改網頁及新增區塊。

更多Wordpress網頁設計文章，請參考 【Wordpress版型推薦】佈景主題下載秘技 【Wordpress是什麼?】Wordpress形像網站有什麼優勢?。

【Wordpress網站前後台】教學 【Wordpress版型推薦】佈景主題下載秘技 【WordPress媒體庫】教學 【Wordpress選單教學(Menu)】教學 【Wordpress頁面新增、刪除、修改】教學 【Wordpress文章新增、刪除、修改、列表、分類】教學 【Wordpress外掛】教學及推薦 【Allinone Migration】Wordpress網站備份外掛 Wordpress網頁設計教學 到這個步驟結束之後，其實你已經完成了一個Wordpress形象網站。

剩的就是安裝購物車模組(WooCommerce)。

🧬Step4：購物車外掛-WooCommerce 你想網路銷售嗎?選擇Wordpress建置購物網站最推崇的購物車模組WooComerce就對了，市面有一些其他的電商開源架構 (如Opencart)，都不如WooComerce值得被推薦。

最大的好處莫過於WooComerce 在Wordpress的廣泛應用，使得任何疑難雜症、功能開始相較於其他套件都容易Google到方案。

而無需再花上萬元，找外包工程師開發。

所以想要建置購物網站， WooCommerce是一個正確的選擇。

WooCommerce的功能涵蓋了以下幾個重要功能 商品管理:對商品圖文影介紹、商品上下架、定價、折扣、庫存管理、運送方式....。

訂單管理:訂單清單、訂單資訊、訂單狀態調整 銷售報表:依年、月、過去七日統計銷售總額、曲線報表 折價券:折價券類型、折扣種類、金額、描述、到期日、使用限制等。

其他還有顧客管理、分析各式資料。

上述功能對於一個需要電商購物網站的客戶是已經非常足夠的，而部份的網站會特別安裝一些組合優惠的外掛。

這也只需要網站搜尋Wordpress外掛即可。

EX:AdvancedDynamicPricingfor WooCommerce、WPCProductBundlesforWooCommerce、YITHWooCommerce ProductAdd-Ons。

如何安裝WooCommerce，請參考以下影片。

安裝完成後在你的左選單會看見WooCommerce的項目，就代表安裝成功了，接著就要開始串金流囉！ 🧬Step5：線上刷卡-以藍新金流串接為例 申請藍新金流的會員是不需付費，只有在客戶線上刷卡購買完成會收2.8%的藍新金流手續費(100元收2.8元)，及在提款時會收取提領手續費(提領手續費每個月4次免手續費、第5次起每次10元手續費)。

此外請先準備銀行帳號及個人or企業的基本資訊(身份證、統編、地址)，申請時均需要輸入。

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

點擊註冊個人會員。

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

註冊企業會員 了解更多藍新金流可參考企業會員常見問題。

接著回到主題，要能夠申請線上刷卡會分為三個步驟 註冊藍新金流:註冊後需輸入銀行帳號(需要等1~2個星期驗證銀行帳號)，提款時錢才能夠轉進你的戶頭內，另外要記的開通信用卡刷卡、ATM轉帳、到貨付款等功能(如上所述)。

安裝藍新金流Wordpress外掛:記得先下載WooCommerce線上刷卡外掛。

下載後解壓縮，內有一個zip檔，再使用手動上傳外掛即可安裝(可參考以下影片)。

設定藍新金流外掛:請務必設定三個值1)藍新金流商店MerchantID(即商店代號)。

2)藍新金流商店Hash Key。

3)藍新金流商店HashIV，如何設定請參考影片。

設定完成請把啟動測試模組取消，接著在商品新增一個1元的商品，再拿自已的信用卡刷卡試用即可。

若刷卡有誤請檢查剛設定的3個值。

若仍是不行請洽藍新金流的客服部門。

他們回話速度還滿快的。

🧬Step6：Google網站登錄 Google無法搜尋到你的網站嗎？甚至連品牌字關鍵字在搜尋結果也沒有看見！OMG到底要如何讓Google搜尋到我的網頁呢？ 【網站登錄】就好比新生兒出生報戶口的動作，同樣你的新網站也要跟Google報戶口。

時代的演進，全球主要的搜尋行為高達93%都在Google搜尋引擎上發生(參考下圖)， 所以網站架設完成後，請務必至Google搜尋引擎登錄網站。

不然花了5、6萬打造一個蚊子館實為浪費，。

請參考網站架設完成後，Google卻搜尋不到？3種【網站登錄】的方式?最快只要1秒鐘！ 🧬購物網站架設費用 架設購物網站的費用與Wordpress形象網頁設計 差異最大的部份在於購物車網站的功能，例如商品上下架管理、訂單管理、銷售報表、折價券之類的。

但上一章節有提到這些功能已包括在WooCommerce的外掛內，無需額外付費。

但需額外費用會在於"WooCommerce安裝與設定、API串接、商品頁調整、購物狀態Email通知、商品類別與標籤、WooCommerce基本教學、藍新金流申請溝通與協調" 購物網站架設費用 項目 費用 說明 Wordpress網頁設計 52,800 首年免主機費(價值5,000元) 精美付費版形(價值1,500元) 1首頁＋5內頁半客製化設計 Google雲端自動備份外掛(價值3,000元) RWD響應式網站設計 Wordpress完整前後台 視訊Wordpress後台教學1~2小時 。

。

。

   請參考完整Wordpress網頁設計方案 WooCommerce外掛與設定 22,000 如WooCommerce安裝與設定、API串接、商品頁調整、購物狀態Email通知、商品類別與標籤 藍新金流 13,000 透過線上信用卡支付減少使用者付費障礙、加快支付流程。

藍新金流是目前最推薦的線上支付方式。

透過藍新金流讓購物平台的使用者付款超方便、結帳超快速。

此外還提供超商店到店寄／取件，涵蓋全台5,000＋ 便利商店，免簽約、免設定費、立即啟用。

線上刷卡(超商取貨)費用 2.8%手續費 申請藍新金流的會員是不需付費，只有在客戶線上刷卡購買完成會收2.8%的手續費(ATM轉帳1%、超商代碼繳費28元)，及在提款時會收取提領手續費(提領手續費每個月4次免手續費、第5次起每次10元手續費)。

貴設計的客戶只需2.6%線上刷卡手續費，快點找貴設計做購物車吧！) Wordpress網頁設計(52,800):如WooCommerce安裝與設定、API串接、商品頁調整、購物狀態Email通知、商品類別與標籤 WooCommerce外掛與設定(22,000):透過線上信用卡支付減少使用者付費障礙、加快支付流程。

藍新金流是目前最推薦的線上支付方式。

透過藍新金流讓購物平台的使用者付款超方便、結帳超快速。

此外還提供超商店到店寄／取件，涵蓋全台5,000＋ 便利商店，免簽約、免設定費、立即啟用。

藍新金流串接(13,000):透過線上信用卡支付減少使用者付費障礙、加快支付流程。

藍新金流是目前最推薦的線上支付方式。

透過藍新金流讓購物平台的使用者付款超方便、結帳超快速。

此外還提供超商店到店寄／取件，涵蓋全台5,000＋ 便利商店，免簽約、免設定費、立即啟用。

線上刷卡費用(單筆2.8%手續費):申請藍新金流的會員是不需付費，只有在客戶線上刷卡購買完成會收2.8%的手續費(ATM轉帳1%、超商代碼繳費28元)，及在提款時會收取提領手續費(提領手續費每個月4次免手續費、第5次起每次10元手續費)。

貴設計的客戶只需2.6%線上刷卡手續費，快點找貴設計做購物車吧！) 所以貴設計電商網站製作價格為78,800(首年總費用、隔年主機費10,000)，就可以擁有一個RWD的電商購物網站。

快點與貴設計聯絡吧。

🧬架設電商網站現省５萬 電商網站架設現省５萬？真的嗎？真的嗎？其實貴設計會老實的跟您講，我們是來勸退，至少5個理由如下 電商網站價錢都不便宜。

以貴設計舉例，購物車網站78,800元，比這個價錢貴的相信比比皆是，尤其許多網站架設公司是不寫價錢的。

電商網站主機費也高，從網站架設公司的角度來看，因為電商產品多，佔用的記憶體容量大，主機年費自然也高。

精實創業很重要，應以小成本的方式測試市場，了解市場，進入電商領域、學習domainknowledge。

滿額免運、滿額折扣、滿額贈品、滿額積點換紅利一堆活動，月月都要做新Banner，光Banner設計就好燒錢，何況還有一堆別的。

電商網站流量那裡來？沒有流量誰來買單。

商業市場，濫東西有行銷也有人買單，好產品沒有行銷也沒搞頭。

所以你有過想行銷怎麼做嗎？ 但也不是叫你不要做電商，電商其實貴設計也想做，何況我們懂架網站、又懂行銷。

只是我們會建議你低成本進入電商市場、測試市場，這才是正確的創業方式。

而不是一開始就大把花錢架設網站做電商，而後續還有一堆的主機費、網址費..要付。

電商經營較建議的方式會以品牌官網＋小型電商平台如(WACA、EasyStore、露天拍賣、蝦皮)，理由如下 低成本測試市場、了解市場比購物網站架設還來的重要。

學習電商是如何運作，及可以怎麼操作。

如剛提的"滿額免運、滿額折扣、滿額贈品" 小型電商因為功能較少、費用較低、甚至不綁約、月費制，相較於大型電商一年動輒上萬，買一堆功能不會使用，殺雞焉用牛刀。

網站有流量、有營收、穩定客群，再討論架購物網站。

貴設計算過以小型電商＋品牌網站的組合方式，３年只需８萬有找的預算，若架設購物網站則需１２、１３萬，大概節省５～６萬。

若這種組合方式逐漸拓展知名度累積了穩定客群後，可以再擴充購物車的功能進入網站，這就是最完美的解決方案了。

但要這樣子做，請先確定二件事情。

請選擇Wordpress網頁設計，將來才可以用疊加的方式將購物車功能擴充至品牌官網。

網站版型請選擇有購物車的模版，將來品牌網站擴充後，網站才會比較美觀。

若你沒有流量的煩惱、也沒有預算有限的問題，歡迎您馬上諮詢貴設計購物車網站78,800元的服務。

若您即不會操作流量、預算又有限，也歡迎您向透過畫面上的Line向我們諮詢 形象網站架設52,800的方案。

形象官網諮詢 LINE諮詢 LINE諮詢