小時
分鐘
Cloudways 主機獨家優惠:贈金20$+3個月7折,點此前往註冊,才可獲取贈金
專注於企業網站架設,分享WordPress教學和Elementor教學

WooCommerce教學

本頁面是WooCommerce教學的合集,覆蓋WooCommerce開店所需要的主要功能教學,譬如:安裝WooCommerce產品分類、標籤、屬性添加簡單產品可變產品配置產品運費配置Paypal支付配置優惠券。使用WooCommerce經營自己的跨境電商商店的好處是:不需要依賴於任何第三方平台(譬如亞馬遜、Shopify),這極大降低了封店的危險。同時,WooCommerce是一款免費開源的軟件,只需要肯學,你便可以自己在網上開店啦。此外,如果你的網店不需要銷售功能,只是想管理產品、收客戶的詢盤,那麼使用WooCoomerce也完全可以實現,這正是我擅長B2B企業網站架設的部分,推薦閱讀架設網站教學:
  1. 如何用Elementor外掛製作B2B企業網站
  2. 如何用Astra主題製作B2B企業網站

當你使用WordPress搭建一個企業網站時,尤其是B2C企業賣貨網站(又或者叫做跨境電商),大概率會用到WooCommerce來管理產品、訂單、配送、收款等等。本系列的WooCommerce教學是基於官方文檔以及我的操作實踐,在閱讀本文前,建議先閱讀我的B2B企業網站架設教學,先搭建一個B2B企業網站,然後再深入WooCommerce的電商功能。

友情提醒:在接下來的操作實踐中,你可以直接右鍵翻譯界面為中文,或者將WordPress的用戶管理界面語言設置為中文,但站點語言設置為英文,以便你容易理解功能。同時,下文中的大部分截圖都是採用中文的,鑑於WooCommerce的漢化不一定完整,如遇到英文界面不易理解的,請採用鼠標右鍵用谷歌翻譯吧。

安裝WooCommerce外掛

請進入你的WordPress網站後台

  1. 點擊安裝外掛
  2. 輸入關鍵詞woocommerce搜索
  3. 在woocommerce外掛卡片中點擊現在安裝
  4. 安裝完成後,點擊Activate激活
安裝WooCommerce
激活WooCommerce

相關教學:如何安裝Wordpress外掛(3種方法)

WooCommere安裝嚮導

WooCommere外掛激活後,將自動進入安裝嚮導界面

WooCommerce安裝嚮導

如果你是WooCommerce新手,請按照嚮導的步驟逐步填寫;如果你已經很熟悉WooCommerce,可以點擊最下方的skip setup store details跳出,後續自行配置。接下來,我們跟隨嚮導一步步操作。

首先是填寫店鋪地址信息,點擊繼續,將能看到如下提示,點擊繼續即可

WooCommerce安裝嚮導

接下來勾選你的商品的所屬行業類目,可以多選的哦~選完後點擊繼續

WooCommerce安裝嚮導

接下來是選擇商品的類型,通常做跨境電商的,大多選擇實物產品,然後繼續。注意:下圖中標註的付費功能不用選,等你搞清楚基礎功能了再來了解他們也不遲。

WooCommerce安裝嚮導

接下來,WooCommerce想要收集一些你的業務信息,下圖填寫的內容供你參考,其中Facebook 、mailchimp 、google ads後續都能按需安裝,現在先別裝了,然後點擊繼續。

如何安裝WooCommerce

接下來是選擇一個WordPress主題,我推薦使用Astra主題,而在這個界面是選不了Astra的,所以點擊繼續我的活躍主題即可。

Astra主題提供了很多的免費的商城模板,並且是一個輕量的、熱門的主題,非常值得你一試,請查看我寫的:Astra免費版的全免費企業網站架設教學

如何安裝WooCommerce

接下來是安裝嚮導的最後一步,點擊“不,謝謝”即可,下圖中提示的功能,我們大部分都用不上,譬如,國外的稅務功能,還有,在提高速度網站安全方面的功能,我更推薦使用:WP RocketWordfence來解決更佳。

如何安裝WooCommerce

至此,安裝嚮導結束,我們將自動進入下圖所示的WooCommerce的首頁。

如何安裝WooCommerce

如果你跳過了安裝嚮導,但又想再次進入安裝嚮導,那麼可以如下圖所示操作:

進入woocommerce》設置,點擊頂部的“幫助”按鈕,在展開的面板中點擊“安裝嚮導”標籤,你便能點擊“安裝嚮導”按鈕進入了。

如何安裝WooCommerce

WooCommerce設置清單

你可以在首頁右側看到一個任務清單(如下圖),逐個點擊任務,按照引導去完成操作,能讓你快速了解店舖的基本設置,接下來我們逐一操作。

如何安裝WooCommerce

添加產品

點擊上圖清單中的第一條:添加產品,我們將看到三種方案:

  • 手動添加(推薦):通常我們多用這種方法
  • 導入:建議先熟悉手動添加,如果產品特別多,再考慮使用導入產品功能
  • 遷移:這是付費的,由Cart2Cart提供服務,譬如可以從shopify遷移到woocommerce
如何安裝WooCommerce

如果你想在企業網站架設期間導入一些測試使用的產品數據,通常有兩種方式:

設置付款方式

當你點擊“設置付款”後,將能看到Woocommerce推薦的、適合你的店鋪所在區域的付款方式,根據店鋪所在區域不同,你看的付款方式有所不同。

譬如我將店鋪地址設置在中國內地,那麼推薦的付款方式有下圖幾種,其中paypal是購物時直接付款,要求開通Paypal商家賬號才能正常接入到網站中,其他兩種是線下/離線付款方式。

如何安裝WooCommerce

而如果將店鋪地址設置在中國香港,系統還提供了Stripe選項。最近我在註冊Stripe時,要求必須輸入香港身份證(護照號碼被拒),所以內地註冊已經行不通了。

如何安裝WooCommerce

如果在線支付因某些原因行不通(譬如你是soho,沒有企業),你就只好另外的兩種離線付款方式。

如果你點擊paypal的set up按鈕,系統會為你自動安裝和激活woocommerce paypal外掛(WooCommerce PayPal Checkout Gateway),然後需要你自行連接paypal商家賬戶。

如何安裝WooCommerce

點擊paypal賬戶的“連接”按鈕後,你將看到如下界面,填入你的註冊郵箱或者已有的paypal賬戶,選擇國家,然後next

如何安裝WooCommerce

接下來如果你已有paypal賬戶就會讓你登錄

如何安裝WooCommerce

登錄後,如果你不是企業賬戶,會提示你註冊一個企業賬戶或者升級當前個人賬戶為企業賬戶

如何安裝WooCommerce

註冊企業賬戶需要填寫公司信息和法人代表人信息,往後,我就不操作了,因為我沒註冊公司(哈哈哈哈),當你註冊完公司信息後,會給予你連接網站所需要的秘鑰等信息,以便讓你填入網站的付款設置中。

如何安裝WooCommerce

設置稅率

如何安裝WooCommerce

設置稅率需要你已經設定店舖的位置,然後點擊圖中的配置按鈕前往配置稅率。

設置運費

在設置運費界面中,WooCommerce提供的運費配置規則比較簡單,一是中國本地運費,二是中國以外的運費

如何安裝WooCommerce

此外,你還可以在運費設置中配置不同區域的定額運費,也可以配置不同類商品採用不同運費。

但如果你的運費比較複雜,譬如按照重量、數量等計算運費,請查看【WooCommerce教學系列】如何配置運費費率表Table Rate Shipping

個性化我的商店(裝修店鋪)

如何安裝WooCommerce

1.導入一些測試商品,點擊import products按鈕即可,導入完成後是如下效果(我安裝的是Astra免費主題,如果你是其他主題,可能樣式略有不同)

如何安裝WooCommerce

2.創建一個首頁(homepage),點擊create homepage按鈕後,woocommerce會自動為你創建一個首頁,首頁裡包含產品信息,看到這裡如果你要操作,就打住,看我圖下方的話

如何安裝WooCommerce

如下圖所示,由於我的網站後台語言是中文(前台設置的是英文),在生成首頁時,不少文案都是中文的,不美麗了,並且astra主題自帶了側邊欄,頁面也很奇怪,需要去調整

如何安裝WooCommerce

然後這個頁面是使用wordpress自帶編輯器(古騰堡)製作的,比不上Elementor編輯器製作的頁面,所以我不建議執行這一步創建首頁的操作。

如何安裝WooCommerce

3.接下來是上傳網站logo,就不贅述了。

4.最後是填寫一個店鋪通知,目前啥也不用填,直接點擊complete task.

如何安裝WooCommerce

至此我們就完成了Woocommerce的設置清單安排的任務。

適合WooCommerce的主題

kadence wp theme

Kadence主題– 最好的免費WordPress主題

你是否在尋找免費主題中最好的?並且既好用、又速度快。然而,大部分免費主題,要么不好用、要么功能少。但是,Kadence當之無愧是最好的免費主題,在所有免費的WordPress主題中,它所提供的功能超出了預期。

產品管理

如何用WooCommerce管理和添加產品

在使用WordPress進行企業網站架設時,如果你的產品較多,那使用WooCommerce來管理產品是提高效率的最佳選擇,本篇是WooCommerce教學系列之一,將詳細講解如何在WooCommerce中添加和管理產品。

WooCommerce如何添加可變產品

如果你的企業網站架設的是零售商城,你很大可能會用到WooCommerce的可變產品,它是WooCommerce中的一種產品類型,允許你提供產品的一組變體,並控制每個變體的價格、庫存、圖像等。它們可以用

如何為WooCommerce可變產品屬性啟用色板選項

我們在企業網站架設時,如果搭建的是零售商城,譬如出售鞋子、衣服,那麼一定會用到可變產品色板選項功能,讓你的客戶可以直觀的選擇尺碼、顏色、樣式等等。本篇教學講解如何使用外掛Variation Swatches for WooCommerce實現產品色板功能。

WooCommerce如何設置與添加可下載產品

在使用WordPress架設網站時,如果你銷售實物的同時還提供電子文件,譬如賣實體書的同時還提供電子書,又或是像我一樣銷售主題、外掛、模板,那就能用上WooCommerce的可下載產品功能了。本篇是Woo

製作產品列表和詳情頁模板

下方的教學主要針對的是無購物的情況,當然你學了他,也能同理的製作購物類型的產品模板。

製作產品詢盤表單

如何給產品頁面添加詢盤表單標籤頁

默認Woocommerce產品頁面是沒有詢盤聯繫表單的,用免費外掛Custom Product Tabs for WooCommerce可以給產品頁面添加詢盤聯繫表單標籤頁。下圖是添加完詢盤表單標籤

支付設置

WooCommerce支付教學:如何添加PayPal標準支付

從收款角度來說,企業網站架設分為兩種,一種不需要客戶在線付款(屬於B2B企業網站,以獲得詢盤為目標),一種需要客戶在線付款(屬於B2C企業網站,多見於零售批發)。本篇是WooCommerce教學之一,介

運費配置

如何在WooCommerce中設置運費(免費功能)

這篇WooCommerce教學,我們使用WooCommerce自帶的免費的運費配置功能來講解如何設置運費。基本思路是:1.設置配送區域,2.向這些配送區域添加配送方法,3.在配送方法中添加運費費率。你

訂單管理

WooCommerce訂單教學

本篇教學詳細講解WooCommerce的訂單功能,包括管理訂單、訂單狀態、查看與編輯訂單、手動添加訂單等等。什麼是訂單訂單是客戶在商店中完成結賬時創建的,只有具有管理員和商店經理角色的用戶才能看到

優惠券

WooCommerce優惠券教學

WooCommerce優惠券功能可以幫助我們向客戶發放折扣、優惠,能夠實現商品的促銷。如果想要使用WooCommerce優惠券功能,請按如下步驟啟用該功能: 進入: WooCommerc

其他

WooCommerce簡碼【實例講解】

WooCommerce簡碼(shortcode)可以讓我們將產品、購物車等內容加入到頁面或者文章中。我們在企業網站架設時,可以直接通過Elementor Pro的Product元素塊來配置產品的展示,但如

如何在WooCommerce產品列表中展示變體產品的最低價格

我們在用WooCommerce進行企業網站架設時,如果銷售的某產品存在多種屬性且價格不同,那麼在產品列表和產品詳情中查看到該產品價格將會是一個區間,格式是:最低價~最高價。如果你希望在產品列表頁中僅展示產

如何使用WooCommerce的12個小工具(Widgets)

WooCommerce小工具可以讓你在WordPress企業網站架設時,添加不同產品功能到頁面上,譬如展示最新產品、產品分類、搜索產品、產品價格篩選等等。如下圖所示,這些小工具位於WordPress後台

常用代碼段

對於一些零散的小需求,可以使用Code snippet外掛添加代碼段來解決,這樣就可以少用一些外掛了。

WooCommerce:如何實現自定義連續訂單號

WooCommerce的訂單號為什麼不是連續的? 如何用外掛或代碼實現自定義連續的訂單號呢?譬如:NO-1001,接下來,我們進入正題。為什麼WooCommerce中的訂單ID(訂單號)不是連續的?

WooCommerce:如何降低註冊賬號時的密碼強度

在使用WooCommerce製作電商獨立站時,如果你設定的是允許客戶註冊時填寫密碼,那麼,在填寫密碼時,會要求客戶使用強密碼,要求是12位的字符串,得有字母、數字、特殊字符。如果覺得這個要求太嚴苛,可

WooCommerce: 在後台尋找沒有重量的產品

如果你的運費取決於產品的重量,可能也會出現忘記給某些產品添加重量的情況,這樣一來,在WooCommerce結賬頁面上,運費可能就要被少算了。因此,我們看看如何在WordPress儀表板>產品列

WooCommerce:在購物車頁面上顯示產品庫存

我們已經講過如何在商店頁面上顯示產品的庫存數量和狀態,今天我們將對購物車頁面做類似的事情,以便我們可以直觀地向購物客戶顯示產品的庫存狀態和數量。 (見下圖) 請注意:為了使代碼段起作用,您必須在WooC

WordPress:如何更改WordPress登錄頁面的Logo

本篇教學將教你如何更換或自定義wordpress登錄頁面上的logo(如下圖所示示例),默認的logo是wordpress官方的logo,我們要用短代碼的方式將它更換掉。自定義了登錄頁面的logo,

WooCommerce:在商店頁面上顯示庫存狀態/數量

在本教學中,我的目標是在WooCommerce商店、產品列表頁面中,在每個產品下方展示“庫存數量或狀態”。這跟在單個產品頁面顯示的庫存是完全一樣的,請前往/wp-admin/admin.php?pa

WooCommerce:在結帳頁面上顯示產品圖片

WooCommerce 結賬頁面的訂單審查部分顯示了產品名稱、數量和費用,但沒有產品圖像,產品圖像對於識別/區分相似產品或產品變體非常有用。這個簡單的代碼段將幫助你在訂單審查頁面中展示產品的特色圖片

WooCommerce:在後台按庫存對產品進行排序

我們已經學過瞭如何將前台的產品按有貨在先和無貨在後進行排序,但對於後台的管理員和商店經理來說,如何做到完全相同呢?有時商店存在大量“已售/無貨“的產品,產品表看起來亂亂的

如何在WooCommerce產品列表中展示變體產品的最低價格

我們在用WooCommerce進行企業網站架設時,如果銷售的某產品存在多種屬性且價格不同,那麼在產品列表和產品詳情中查看到該產品價格將會是一個區間,格式是:最低價~最高價。如果你希望在產品列表頁中僅展示產

WooCommerce教學導航
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折,戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛價值多為$49+
主機送Astra Pro不限站點1年
用Gmail郵箱,註冊易通過
遇到問題,聯繫我
來開通SEO工具20+
架設網站學習交流群