架購物車網站做網拍賺錢,不用再當上班族多好,
外面一個購物車系統至少7、8萬,
那不如自己免費做一個Wordpress購物車網站? 但如何架設購物網站賣東西?以2023年起購物網站建置的難度,在目前Wordpress+woocommerce金流串接的支援下,
基本的購物網站架設,是難度低、速度快、價格費用也低,極適合個人玩票性質。
但若是創業開公司、企業的電商網站,還是建議找專業的網站架設公司建置購物網站。因為網站的精緻美醜,還是只有專業設計師的美感才有辦法設計。
所以透過本文 Wordpress購物車網站架設大解析。跟你分享購物網站設計教學從買網址、主機到Wordpress網頁設計、串接購物車模組,
即可建置一個可線上刷卡的電商購物網站。Let's Go!
推薦好文:
- 最完整的【網頁設計、網站架設】攻略|32個網站設計技巧
- 最精闢的【網站架設費用】解析|官網建置設計報價不被騙
- Wordpress購物車網站架設|電商建置、刷卡金流一把罩
- WP架站一人就搞定|16大【Wordpress網頁設計】教學
Wordpress購物車費用
架設購物網站的費用與Wordpress形象網頁設計
差異最大的部份在於購物車網站的功能,例如商品上下架管理、訂單管理、銷售報表、折價券之類的。
但上一章節有提到這些功能已包括在WooCommerce的外掛內,無需額外付費。
但需額外費用會在於"WooCommerce安裝與設定、API串接、商品頁調整、購物狀態Email通知、商品類別與標籤、WooCommerce基本教學、藍新金流申請溝通與協調"
項目 | 費用 | 說明 |
Wordpress網頁設計 | 49,800 |
|
WooCommerce外掛與設定 | 18,000 | 如WooCommerce安裝與設定、API串接、商品頁調整、購物狀態Email通知、商品類別與標籤 |
藍新金流 | 10,000 | 透過線上信用卡支付減少使用者付費障礙、加快支付流程。藍新金流是目前最推薦的線上支付方式。透過藍新金流讓購物平台的使用者付款超方便、結帳超快速。 此外還提供超商店到店寄/取件,涵蓋全台5,000+ 便利商店,免簽約、免設定費、立即啟用。 |
信用卡線上刷卡費用 | 2.8%手續費 | 申請藍新金流的會員是不需付費,只有在客戶線上刷卡購買完成會收2.8%的手續費(ATM轉帳1%、超商代碼繳費28元),及在提款時會收取提領手續費(提領手續費每個月4次免手續費、第5次起每次10元手續費)。 貴設計的客戶只需最低只要2.4%線上刷卡手續費,快點找貴設計做購物車吧!) |
延伸閱讀:最精闢的【網站架設費用】解析|網頁設計報價不被騙
購物車網站系統推薦
台灣要做電商有三種管道,分別是"電商平台"、"開店平台"、"購物車套裝工具",差異如下
平台類型 | 抽成 | 開辦費用 | 新手上手程度 |
---|---|---|---|
電商平台 | 高 | 開辦費、平台費、月費、抽成都有 | 易 |
開店平台 | 中 | 訂閱制(即月費)、抽成較少 | 中等 |
套裝工具 | 低 | 網址費、主機費、線上刷卡2.8%左右 | 困難 |
文本是聚焦在使用套裝工具Wordpress架設網站,因此在網站彈性、擴充、自主權將會有更大的彈性,同時網站架設費用會較便宜,但相對的在網站架設上的專業要求就會較高。 了解更多請參考:網路商店架設工具?購物型網站模組大公開,你適合那個?
Wordpress購物車網站設計DIY
Step1: 買網址+DNS設定+HTTPS加密
貴設計都在Godaddy買網址,優點如下。
- 網站介面簡單乾淨:相對中華電信很OLD FASHION的介面,Godaddy你定會覺的非常好用。
- 購買程序簡單快速:中華電信買個網址需要輸入多個欄位,Godaddy直接刷卡帶走。
- 網址買錯退費好人性:上次買錯一個網址,當下找客服處理,10分後就馬上退費。
- 線上售後服務好:中華電信的客服電話告訴你,非常難找,一直在電話中。
- DNS生效好快速:DNS,(用過中華電信你就知道慢)
多樣化網址選擇好方便:直接參考下圖吧。.com是台灣最愛的,但隨著網址也跟著進步,不用再死守.com的網址囉。
那如何購買網址?請參考上圖,只要在搜尋框輸入你喜歡的網址名稱,再點下右側放大鏡,就會自動跳出一堆不同結尾的網址。 如何選擇網址呢?
- 美國網址、國際性、網址大氣的請選擇your-domain.com。但網址會被google歸類為美國網址,會不利於台灣的SEO排名。
- 台灣本土、台灣品牌的可選擇 your-domain.com.tw,但需注意網址有無商標問題。例如你的網址your-domain,是不是有被別的企業註冊商標。
- your-domain.cc or your-domain.shop就看個人所好
- 千萬不要中文網址,中文網址是弊大於利。
購買網址需註冊Godaddy(需綁定信用卡),購買網址後去"帳戶 ==> 我的產品",就會看見剛購買的網址。 若網址買錯可以5天內申請退款(參考Godaddy退款策略)。
DNS設定(如下圖) ,何謂DNS設定呢? 簡單講,你買了一個網址,你要將網址指去某個主機的IP。
進入畫面之後,你會看見類似如下的畫面,尋找一個叫做類型為A,再將值輸入你的主機IP即可(我知道還沒有租主機,所以沒有IP,後續會說明),這個動作稱之為DNS設定。
了解更多關於Godaddy,請參考購買網址,唯一推薦Godaddy|安心買、放心退、好設定HTTPS加密,貴設計為了能夠使用免費HTTPS的服務,我們會選擇將DNS交給Cloudflare代管 ,因為Cloudflare有免費的https服務,這樣子我們就不用額外一年花個好幾千買https。 如何將Godaddy的DNS交給Cloudflare代管呢?方式如下
- 註冊Cloudflare:https://www.cloudflare.com/zh-tw/,並新增網站將網址填入
- 完成後,你就會看見你的網址,接著點擊進去(貴設計是網頁設計公司就有很多網址要設定)
- 將畫面拉到下方Cloudflare名稱伺服器(在Cloudflare的網站),接著將紅色部份回填到Godaddy名稱伺服器(在Godaddy的網站)即可。
- 再回到Cloudflare DNS設定,將IP填入以下紅色區塊就大功能告成。
Step2:買網站主機+安裝Wordpress
買網站主機 ,貴設計推薦SiteGround,SiteGround成立於2004年主機商公司,擁有400多名員工。SiteGround提供虛擬主機、雲託管主機、網域等等。 SiteGround運作時間保證是99.99%,所以他們的伺服器不會有當機或連不上的問題。(但很遺憾,Sitegound於2022年已不再出售給台灣)
為何選擇SiteGround?
- 免費SSL加密憑證
- 每天自動備份,自動備份前30天資料
- 免費 CDN
- 24/7客服服務,線上即時聊天,回覆速度快
- SG介面乾淨,好上手
- 主機穩定性優
- Wordpress一鍵安裝,5分鐘搞定
- Wordpress自動更新
- Wordpress免費輕鬆搬家,SG提供免費外掛
如何在SiteGround建立Wordpress?
- 註冊登入後,到Home 就會看到 Set Up Site,點進去。
- 選擇Start a New Website。 ps.如果你現有Wordpress網站才選擇Migrate
Website。
- 選擇Wordpress。
ps.如有需要WooCommerce可以點選Wordpress+WooCommerce。
- 設定登入資訊,之後登入都以這帳密登入。
- SiteGround有提供加購網站掃毒的工具,看需不需要加購,不需要直接按Finish,Wordpress網站就完成了!
- 直接登入網站。
在完成Siteground主機之後,將Siteground取得的IP至Cloudflare DNS設定即可(如下)。
了解更多關於Siteground主機,請參考Siteground主機13大完整教學主題
Step3:Wordpress佈景安裝與內頁設計
➤ 3.1 登錄網站後台
安裝好Wordrpess後,請輸入 https://購買的網址/wp-admin即可看到以下的畫面再輸入帳密就可以登入,完整登入流程請參考影片
登入之後,就會看見如下的後台。就代表你已經成功至少50%了。
➤ 3.2 安裝Wordpress網站佈景
接著要安裝 WordPress佈景主題, WordPress佈景主題佔了8成的比例決定網站的精美程度,其中又首重網站的首頁要精美、漂亮又吸睛, 所以你說WordPress佈景主題是不是非常重要。而使用Wordpress佈景主題有以下的四個優點- 📌 使用網站模板,網站架設費用現省10萬
- 📌 官方網站精緻又漂亮
- 📌 千種、萬種佈景主題任君挑選
- 📌 不用擔心跨瀏覽器、RWD設計問題
Wordpress佈景安裝的步驟:
- 至外觀->佈景主題
- 選擇想要的佈景主題:
- 如已購買佈景主題:請先下載主題後,至安裝佈景主題進行安裝。
- 也可以使用Wordpress提供免費版型,付費版請至Themeforest購買。
- 選好後只需要在下方按「啟用」,即可蓋掉現有的佈景主題。
- 佈景主題就安裝好了!
➤ 3.3 Wordpress網頁設計:
Wordpress的內頁設計,是非常的考驗網站架設者的美感與經驗。 有架站經驗、有美感,在這關便能設計出精緻美觀的網站,就如同請專業室內裝潢設計師設計房間一樣,當然你也可以去IKEA自行買買湊湊。但容易變成下圖倒是,所以中小企業仍是建議請專業的來設計。但在個人部落格或者是玩票性質的話,在Wordpress佈景主題安裝完成後,貴設計推薦您使用 Elementor編輯器去設計你的網頁,貴設計用過許多網頁編輯器後 ,深覺的Elementor的好用,所見即所得的模式,讓你在修改、新增頁面能夠馬上見到效果。
再加上提供許多好用的元件,直接拖拉並修改文字及設計,就能做到網頁的設計。以下的影片為您示範如何透過Elementor修改網頁及新增區塊。
更多Wordpress網頁設計文章,請參考
到這個步驟結束之後,其實你已經完成了一個 Wordpress形象網站。剩的就是安裝購物車模組-WooCommerce。Wordpress購物車金流-WooCommerce
你想網路銷售嗎? 選擇Wordpress建置購物網站最推崇的購物車模組
WooComerce就對了,市面有一些其他的電商開源架構
(如Opencart),都不如WooComerce值得被推薦。最大的好處莫過於WooComerce
在Wordpress的廣泛應用,使得任何疑難雜症、功能開始相較於其他套件都容易google到方案。而無需再花上萬元,找外包工程師開發。所以想要建置購物網站,
WooCommerce是一個正確的選擇。
WooCommerce購物車模組的功能涵蓋了以下幾個重要功能
- 商品管理:對商品圖文影介紹、商品上下架、定價、折扣、庫存管理、運送方式....。
- 顧客管理:過去購買過的顧客網址、Email、註冊日、國籍。
- 訂單管理:訂單清單、訂單資訊、訂單狀態調整
- 銷售報表:依年、月、過去七日統計銷售總額、曲線報表
- 折價券:折價券類型、折扣種類、金額、描述、到期日、使用限制等。
其他還有分析各式資料。上述功能對於一個需要電商購物網站的客戶是已經非常足夠的,而部份的網站會特別安裝一些組合優惠的外掛。 這也只需要網站搜尋Wordpress外掛即可。EX:Advanced Dynamic Pricing for WooCommerce、WPC Product Bundles for WooCommerce、YITH WooCommerce Product Add-Ons。
如何安裝WooCommerce,請參考以下影片。安裝完成後在你的左選單會看見WooCommerce的項目,就代表安裝成功了,接著就要開始串金流囉!
線上刷卡-以藍新金流串接為例
申請藍新金流的會員是不需付費,只有在客戶線上刷卡購買完成會收2.8%的藍新金流手續費(100元收2.8元),及在提款時會收取提領手續費(提領手續費每個月4次免手續費、第5次起每次10元手續費)。
此外請先準備銀行帳號及個人or企業的基本資訊(身份證、統編、地址),申請時均需要輸入。
藍新金流個人會員可自行開立商店使用信用卡支付、Web
ATM、ATM轉帳、超商代碼繳費、條碼繳費等完整金流機制,並享有簡易快速收款功能,輕鬆整合處理收付帳款,即時掌握交易紀錄。
點擊註冊個人會員。
企業會員則可自行開立商店使用信用卡支付、Web
ATM、ATM轉帳、超商代碼繳費、條碼繳費等完整金流機制,並享有簡易快速收款功能,輕鬆整合處理收付帳款,即時掌握交易紀錄。
註冊企業會員
了解更多藍新金流可參考企業會員常見問題。
接著回到主題,要能夠申請線上刷卡會分為三個步驟
- 註冊藍新金流:註冊後需輸入銀行帳號(需要等1~2個星期驗證銀行帳號),提款時錢才能夠轉進你的戶頭內,另外要記的開通信用卡刷卡、ATM轉帳、到貨付款等功能(如上所述)。
- 安裝藍新金流Wordpress外掛:記得先下載WooCommerce線上刷卡外掛。下載後解壓縮,內有一個zip檔,再使用手動上傳外掛即可安裝(可參考以下影片)。
- 設定藍新金流外掛:請務必設定三個值
1)藍新金流商店 Merchant ID(即商店代號)
2)藍新金流商店 Hash Key 。
3)藍新金流商店 Hash IV
如何設定請參考影片。 設定完成請把啟動測試模組取消,接著在商品新增一個1元的商品,再拿自已的信用卡刷卡試用即可。若刷卡有誤請檢查剛設定的3個值。若仍是不行請洽藍新金流的客服部門。他們回話速度還滿快的。
免費購物網站架設
購物網站一個都不少錢,不管你是走任何的平台、方案。要嘛是網站架設費用高、不然就是成交抽成高15~25%、再不然就是年費高,總之不會是便宜的。但貴設計的新平台熱搜情報網,跟你講做電商真的。很。便。宜。 以下是在熱搜情報網刊登的商家及產品。
熱搜情報網的方案可以讓一個帳號開設許多不同的商家(不限商家數)及多種的商品,而付款連結請直接置入支付平台的付款連結,信用卡線上刷卡大約為2.8%。 熱搜情報網年約費用只要2400元。。熱搜情報網VIP商家熱搜情報網商家註冊
Wordpress購物網站範例
要架設一個得體的中小企業電商網站,從買網址、寫文案、到最難的網頁設計,再到最關鍵的金流串接,實則需要不少的技術與專業,這沒有個10幾年的經驗累積還真的有些難度。
好在貴設計有豐富的網站架設經驗,從內部網站再到形象網站、電商網站、API串接全都涉獵過。
這邊有幾個我們手中的成功範例,請您參考 專一茶鋪、 解惑急診室、 梵心生活科技、
NewHope益生菌。
參考更多 Wordpress網站範例