【2023 WooCommerce 教學】如何打造專業Wordpress 電商網站
讀者權益

在閱讀前,請容許大叔聲明幾件事情:這些事情對您可能蠻重要的:

  • 內容中連結可能有參加聯盟計畫,這並不影響您的購買權利。
  • 聯盟計畫和廣告收入都會做為網站經營基金。
  • 而部份收入將捐給流浪動物基金會。(公益捐款明細)
  • 喜歡我的文章的話,請幫我這樣做,點擊下面的拍手圖示。

【2023 WooCommerce 教學】如何打造專業WordPress 電商網站

台灣目前叫的出名的電商網站 Shopline 、EasyStore、91APP 就有好幾家,但是怎麼選呢,就算你看完網路上的懶人包,只是得到更複雜的資料,讓心情更差。

其實電商平台「並非」只是將線上的商品,搬到線上去銷售這麼簡單,中間還有許多觸及網路生態的「眉眉角角」。

例如說:

  • 網路設計體驗 – 在購物時被糟糕的網站體驗弄得焦頭爛額?
  • 電商新手 – 希望尋找一個易於使用的電商平台來擴展你的業務?
  • 線上線下整合 – 可以訂位、購物、物料管理的平台。
  • 金流、物統整合 – 手續費和運費都將影響公司獲利和定價策略。
  • 所以在你不清楚的情況之下做選擇,一般都是危險的,而且電商網站一年幾萬塊,新增客製功能加一加幾十萬,對於剛入門的朋友,沒有穩定的現金流支持的話,這個付費鍵可能點不下去。

    其實還有一個比較簡單的選擇,就是使用 WordPress 網站來打造一個 WooCommerce 電商網站,操作上並不難,重點是很便宜,而且你有足夠的操作彈性。

    做為一個入門或是起步的選擇,雖然 WooCommerce 的技術難度比較高,但比較起只有雞肋功能的便宜電商網站,成本更低、彈度和可擴充性更好。

    總之,WooCommerce 的優點在於安裝即可使用,設定金流和物流上比較麻煩,但台灣金流公司有提供 WooCommerce 擴充外掛,難度已經大大減少,加上大叔教學,一步一步帶你打開自架電商網站的世界,人人都可以做的電商網站。

     WooCommerce 教學

    WooCommerce 簡介

    WooCommerce 是一個開源的 WordPress 插件,用於創建電子商務網站。它具有豐富的功能和彈性,可幫助您創建一個成功的電商平台。

    WooCommerce 的主要特點包括:

  • 易於安裝和設置
  • 可擴展性
  • 多種付款和運送選項
  • 訂單管理和庫存控制
  • 營銷工具和分析功能
  • 除了這些基本功能之外,WooCommerce 還有大量的擴充套件和主題可供選擇,可以滿足各種不同的需求。

    例如,您可以使用 WooCommerce 擴充套件來:

  • 增加付款閘道和金流服務商 – 大叔用過綠界和歐付寶的 WooCommerce 擴充外掛。
  • 添加新的運送選項和計算方式
  • 創建促銷和優惠券代碼
  • 整合社交媒體和電子郵件行銷工具
  • 分析訪問量和銷售數據
  • 網站前期準備

    在開始 WooCommerce 教學之前,我們需要準備一個 WordPress 網站並做網域的設定,

    Stpe1. 選擇合適的網域名稱和虛擬主機

    大叔在之前就寫過購買網域和主機的文章,為了減少篇幅,請各路朋友可以參考文章 –

  • #2 網域是什麼? 如何購買? 以 Godaddy 為例教學
  • #3 如何購買 WordPress 雲端主機 | 以 Cloudways 為例
  • #4 Cloudways 搬家教學:最快速的網站搬家方法僅需 10 分鐘
  • Step2.安裝 WooCommerce 插件

    進入後台後,請在左側找到「安裝外掛」,輸入 WooCommerce 關鍵字搜尋,找到 WooCommerce 後再點擊「立即安裝」。

    我們其實同時也可以看到附近有 WooCommerce 對應的擴充外掛可以使用。

     WooCommerce 教學


    完成後,點擊啟用。

     WooCommerce 教學

    Step3.進行商店詳細資料設定

    安裝完成後,後台左側應該出現 WooCommerce 。點一下進入設定頁面,請依要求填寫內容,也可以點擊下方先略過,之後再填寫也沒差。

     WooCommerce 教學


    設定付款(新增收款方式),點擊紅框文字後,進入設定頁面,我們可以看到 WooCommerce 內建的是 PayPal 付款,對於境外電商而言已經足夠,但 PayPal 無法在台灣使用,所以我們需要使用台灣的金流服務,像是綠界和歐付寶。

    我們先使用 PayPal 來說明,下面還有台灣金流外掛的安裝教學。先點擊一下 PayPal 的「開始使用」。

     WooCommerce 教學
     WooCommerce 教學


    就會開始安裝 PayPal 付款,然後開始使用。

     WooCommerce 教學


    點擊 Activeate PayPal,然後系統會要求你登入,如果沒有帳戶的話,可以申請一個,它是「免費」的。

     WooCommerce 教學


    如果出現 Connected 的話,表示我們成功將 PayPal 和 WooCommerce 連結成功。

     WooCommerce 教學


    再來 4 和 5 是關於稅務和行銷的擴增功能,大叔目前還沒使用的資格,所以有待大家自行發覺和研究,我們繼續討論網站設計的部份。

     WooCommerce 教學

    Step3.安裝 Elementor Pro 網頁編輯器 & Hello WordPress 主題

    進入後台頁面,找到「外掛」,點擊一下「安裝外掛」。

     WooCommerce 教學


    進入外掛頁面後,在右側的搜尋框打上關鍵字「Elementor」,就可以找到「Elementor Website Builder」,點擊「立即安裝」並啟動它。

     WooCommerce 教學


    由於我們的網頁設計中會用到 Elementor Pro 的模版功能 ,有帳號的朋友請記得安裝,沒有 Elementor Pro 朋友也沒關係,基本上會比較辛苦一點。

    Elementor Pro 安裝和教學的相關資訊和連結就放在:

  • 如何安裝 Elementor Pro ? Elementor Pro 下載
  • 【Elementor 教學】打造精美網站 10 個不能錯過的功能
  • #9 網站設計新手必學! Elementor 輕鬆打造精美網站,讓你的網站更具吸引力!

  • Hello WordPress 主題安裝,請點擊左側的「外觀 → 佈景主題」,然後在搜尋主題打「Hello」,點擊下載安裝並啟用它。

     WooCommerce 教學

    電商網站設計

    Step1. 新增頁面 & 導入模版

    進入後台新增頁面,選擇使用 Elementor 編輯。

     WooCommerce 教學


    進入編輯頁面後,點擊一下版型庫的圖示。

     WooCommerce 教學


    使用「shop」去搜尋自己喜歡的 Template,不過提醒大家,多數模版都是 Pro 用戶才能使用。

    選擇模板後,選擇「插入」,然後等待完成。

     WooCommerce 教學


    進入畫面後,如果沒有商品的話,其實是因為我們還沒有新增商品。讓我們回到後台新增一下。

     WooCommerce 教學

    Step2. 新增商品

    我們重新開一個視窗到後台頁面,找到 WooCommerce 點擊「商品 → 新增」。

     WooCommerce 教學


    輸入商品名稱和介紹,頁面下方還有商品資料等設定,完成後點擊「發佈」。

     WooCommerce 教學
     WooCommerce 教學


    再來回到 Elementor 編輯頁面,將商品拖曳到中間的編輯框中,就會出現剛剛我們新增的商品,一切都是這麼自然和簡單。

     WooCommerce 教學


    再來我們調整一下文案,改成中文混合日文,感覺比較利害。

     WooCommerce 教學
     WooCommerce 教學


    Step3. 設定首頁

    從後台的「外觀 → 自訂」,可以進入主題的設定頁面。然後再點一下頁首。

     WooCommerce 教學


    在靜態首頁上選擇剛剛我們設定好的首頁名稱,然後點擊「發佈」,這樣首頁就會更換成新頁面。

     WooCommerce 教學

    歐付寶金流設定

    金流在各國有不同的法規,加上這幾年台灣的詐騙猖狂,所以金流平台的管制上特別嚴格,反正意思是,如果你打算要在架設電商平台在台灣的話,就必須使用台灣合規的金流平台。

    綠界和藍星是比較大的金流服務公司,我個人是使用比較簡單的歐付寶,歐付寶是歐買尬 (3687)之轉投資公司,金流方面已與聯合信用卡處理中心、臺灣銀行、第一銀行、華南銀行、台北富邦、國泰世華、玉山銀行、台新銀行、中國信託……等多家銀行合作。

    總之,大叔註冊上是感覺比綠界容易不少。

    Step1. 下載外載(貼心連結)

    進入歐付寶的套裝購物車模組頁面,找到 Woocommerce 的金流模組,然後點一下,將會進入 github 頁面。

     WooCommerce 教學


    進入頁面後,可以點擊 Install.pdf 的安裝說明,點擊 Opay.zip 可以下載外掛。

     WooCommerce 教學

    Step2. 安裝外掛

    回到安裝外掛頁面,點擊上方的「上傳外掛」,將剛剛下載的 opay.zip 上傳並立即安裝。

     WooCommerce 教學

    Step3. 歐付寶金流設定

    安裝後,我們需做一下認證的動作。由後台點擊一下 「WooCommerce → 設定」選擇付款。

     WooCommerce 教學


    選擇你要的付款方式,點擊後方的設定。

     WooCommerce 教學


    回到歐付寶的頁面,找到「系統開發管理」→「系統介接設定」,將商店代號、HashKey 、HashIV 貼到 WordPress 的頁面。

     WooCommerce 教學


    取代這三個值,付款方式要用點擊 Ctrl 反白的方式,然後點擊下方的「儲存設定」。

     WooCommerce 教學


    最後,我們將商品加入購物車看一下,除了基本的 PayPal 之外,還出現了歐付寶。

     WooCommerce 教學

    大叔心得 & 總結

    製作電商網站其實不難,但經營電商事業並不容易,在之前的文章中,大叔討論電商經營的金三角,總結來說電商可以讓客戶更容易找到我們,建立良好的客戶關係。而將商品上架到蝦皮這類的總合類平台來說,更多是行銷曝光,讓商品觸及更多潛在客人。

    而社群是建立連絡,直接解決客戶問題的最佳解方。

    使用 WooCommerce 簡易安裝在 WordPress 一鍵變身電商網站,2023 年線上購物已成為趨勢的年代,選擇使用世界最人使用的專業電商網站,就是最佳的網路購物平台方案。

    限時優惠,滿$1,000即享9折優惠'
    複製優惠碼
    AO230401
    04/01-12/31
    HAHOW 好學校
    大叔限時優惠,單堂 86 折 / 兩堂 82 折 /三堂以上只要 79 折
    複製優惠碼
    lashi23
    今日- 2023/12/31
    HAHOW 好學校
    九月全站活動 - 99 購課季:基礎優惠:
    複製優惠碼
    免優惠碼
    9/4 - 9/22
    HAHOW 好學校

    目錄:
    【2023 WooCommerce 教學】如何打造專業WordPress 電商網站

    菈喜大叔 - 減法生活提案

    關於大叔

    文章歡迎轉載,請說明出處。

    相關文章

    發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *