使用WordPress和WooCommerce插件可以搭建出B2C在線外貿(mào)商城，本教程將詳細說明如何從零開始通過WooCommerce做一個B2C電商網(wǎng)站。

一、準備工作

在開始B2C外貿(mào)建站之前，你得先學(xué)會如何使用WordPress制作一個B2B網(wǎng)站。因為，商城網(wǎng)站實際上就是基于B2B網(wǎng)站上的一個進階類型。相比B2B網(wǎng)站，網(wǎng)店商城多出了在線購買支付等功能。

請先參閱此篇文章，學(xué)習(xí)如何制作WordPress B2B網(wǎng)站：WordPress外貿(mào)建站教程，怎么用Astra+Elementor做網(wǎng)站；本篇教程也是基于這個基礎(chǔ)，進行的延伸。

二、導(dǎo)入網(wǎng)店商城模板

在安裝完Astra主題和Elementor頁面編輯器插件后，點擊后臺左側(cè)欄Appearance中的“Astra Options”：

可以看到右邊有一個Import Starter Template，我們點擊下面的Install Importer Plugin：

之后，我們選擇Elementor作為我們的Page Builder：

我們就來到了Astra的模板庫。在其中，我們需要篩選出eCommerce的商城模板：

選擇好了模板后，點擊打開，然后在模板詳情頁面，右下角點擊“Import Complete Site”完成導(dǎo)入，在這個過程中WooCommerce插件也會自動安裝上。

三、編輯修改頁面內(nèi)容

利用Elementor，我們可以自由修改編輯頁面上的內(nèi)容，來到某個具體頁面，點擊“Edit with Elementor”即可進入編輯模式：

具體的修改方法，本文開頭提到的那篇文章中有細致的講解，這里不做重復(fù)了。

四、添加產(chǎn)品

如何添加產(chǎn)品？我們首先到左邊，大家會發(fā)現(xiàn)增加了一些其他的選項。有一個叫Products，我們點擊All Products：

所有的已添加的產(chǎn)品都會在這里進行顯示。我們現(xiàn)在想要新加產(chǎn)品，就點擊上面的“Add New”：

進入產(chǎn)品編輯界面：

上圖中：

• 位置1是填寫產(chǎn)品標題名稱的地方，這里我們舉例填入：漂亮的盆栽；
• 位置2是填寫產(chǎn)品介紹說明的地方；
• 位置3是設(shè)置產(chǎn)品參數(shù)的地方。

位置3處大家可以看到“Product data”，這里默認是“Simple product”簡單產(chǎn)品。這個意思就是說，產(chǎn)品只有一個固定的價格參數(shù)。如果你是銷售比較復(fù)雜的產(chǎn)品，有顏色、尺寸、大小等不同規(guī)格，不同的搭配價格也是不一樣的，那就要分開設(shè)置了。

我們先以簡單產(chǎn)品為例，進行說明。簡單的產(chǎn)品只有一個價格信息，Regular price：正常價格；Sale price：促銷價格。我們在正常價格里輸入15.99，預(yù)覽此時的產(chǎn)品頁面，可以看到我們之前的設(shè)置已經(jīng)生效：

五、設(shè)置產(chǎn)品圖片

回到產(chǎn)品編輯界面，在右側(cè)下方有個“Product image”，點擊“Set product image”：

此時，跳轉(zhuǎn)到媒體庫，選擇圖片設(shè)置為產(chǎn)品的主圖。產(chǎn)品除了主圖還可以展示多張圖片，點擊“Product gallery”下的“Add product gallery images”進行添加即可（使用Shift或者Ctrl鍵進行多圖選擇）。

六、添加產(chǎn)品分類

把產(chǎn)品進行合理的歸類，無論對用戶還是搜索引擎都有益處，方便用戶的瀏覽和搜索引擎的抓取。比如盆栽，可以分為多肉的、水培的等等。

想要給產(chǎn)品添加類別，可以在產(chǎn)品編輯界面的右側(cè)，找到“Product categories”下“Add new category”進行分類的添加，添加后勾選對應(yīng)的分類即可：

比如，我給新添加的產(chǎn)品，歸類到一個叫“盆栽”的類別中；此時，我們再預(yù)覽產(chǎn)品頁面，可以看到產(chǎn)品已經(jīng)有了圖片，而且有了對應(yīng)的類別：

點擊“盆栽”這個類目，可以看到網(wǎng)站中所有歸于此類下的產(chǎn)品：

七、修改價格單位

現(xiàn)在的價格單位是英鎊，我們要把它改成美元。在網(wǎng)站后臺，找到“WooCommerce”，點擊其中的“Settings”：

網(wǎng)店商城的很多設(shè)置都是在這里進行修改的，包括價格單位。

八、管理產(chǎn)品的庫存

產(chǎn)品的庫存在產(chǎn)品編輯頁面下方的“Inventory”里進行設(shè)置：

其中，SKU是產(chǎn)品的識別碼；在下面有一個“Manage stock”的標志，勾選打開：

然后，你就可以填寫產(chǎn)品的庫存數(shù)量了。并且可以設(shè)置“Backorders”，也就是庫存賣完后，是否允許客戶繼續(xù)下單。這邊還有一個低庫存的管理方式“sold individually”，啟用后，每個訂單只能購買一個商品。

設(shè)置了庫存后，前臺也會有相應(yīng)的顯示：

九、串聯(lián)式銷售

如果你經(jīng)常網(wǎng)上購物，肯定看到過，當購買一個商品的時候，頁面上會提示有另外一個你可能感興趣的商品，這個就是串聯(lián)銷售，增加客戶多訂單的可能性。WooCommerce也提供了相應(yīng)的設(shè)置，就在產(chǎn)品編輯頁面“Linked Products”：

Upsells：關(guān)聯(lián)的產(chǎn)品會顯示在頁面下方。

Cross-sells：當我們把一個產(chǎn)品加入購物車后，進入結(jié)算頁面，關(guān)聯(lián)的產(chǎn)品會出現(xiàn)。

十、多樣化產(chǎn)品的添加

上面我們講過“Simple product”簡單產(chǎn)品的添加，如果一個產(chǎn)品有很多種規(guī)格、價格，那么該如何添加呢？

這時，我們要在“Product data”里選擇“Variable product”多樣化產(chǎn)品：

多樣化的產(chǎn)品就會有多元化的選擇條件，選擇“Attributes”，進行“Add”添加條件：

這里的條件就像我們買衣服一樣，有小碼、中碼、大碼，還有黃色、綠色、藍色等等。我們現(xiàn)在就添加一下，比如添加兩個維度，一個叫顏色，然后它的格式是你的選擇條件，比如說紅色 | 黃色 | 綠色：

勾選“Used for variations”，意思是應(yīng)用到多樣化中，最后點擊“Save attributes”進行保存。除了顏色之外，我們再給它增加一個選擇條件，比如說花盆的形狀是方形還是圓形，設(shè)置方法和顏色一樣：

現(xiàn)在，我們已經(jīng)給這個產(chǎn)品增加了兩大類的選擇條件，接下來我們要根據(jù)兩個不同維度的條件，去應(yīng)用它，增加一些選擇的規(guī)則。在“Variations”中勾選“Create variations from all attributes”，然后點擊“Go”：

系統(tǒng)就會幫我們生成相應(yīng)的搭配方案，因為我們有三種顏色，兩種形狀，所以它一共給我們搭配了6種選擇方案，在每一個方案里，我們都可以對其進行詳細地設(shè)置。不同的搭配，可以有不同的價格，不同的特點：

我們可以根據(jù)不同的情況選擇不同的價格和細節(jié)參數(shù)，設(shè)置后預(yù)覽一下前臺，可以發(fā)現(xiàn)已經(jīng)出現(xiàn)了多種產(chǎn)品選擇：

十一、添加虛擬服務(wù)型產(chǎn)品

上文中，我們講解了簡單產(chǎn)品和多樣化產(chǎn)品是怎么添加設(shè)置的。以上產(chǎn)品都屬于實物，但是有些網(wǎng)店需要銷售一些虛擬的產(chǎn)品，這類產(chǎn)品屬于在線服務(wù)、不發(fā)貨的類型。比如，園藝培訓(xùn)，我們怎么來操作呢？

我們需要在產(chǎn)品編輯頁面，選擇“Simple product”，同時要勾選“Virtual”選項：

然后，在“Advanced”選項里進一步說明，購買后給客戶一個消息“您購買的是和我們資深員工進行一次園藝培訓(xùn)”：

十二、設(shè)置優(yōu)惠碼

優(yōu)惠碼英文名稱“Coupon code”，相當于你平時買東西時使用的打折優(yōu)惠券，用戶在購買商品后，填入優(yōu)惠碼，就可以獲得相應(yīng)的折扣。在網(wǎng)站后臺，找到“WooCommerce”下的“Coupons”選項點擊進入，然后“Add coupon”：

比如，我們設(shè)置一個10%的折扣優(yōu)惠碼；優(yōu)惠方式中，選擇“Percentage discount”；優(yōu)惠率填10；同時，設(shè)置了過期時間：

在下方“Usage restriction”里，我們可以設(shè)置優(yōu)惠碼的使用條件：

在商品結(jié)算時，使用設(shè)置的Coupon code，即可獲得相應(yīng)的優(yōu)惠：

十三、設(shè)置PayPal收款

當你設(shè)置好你的eCommerce網(wǎng)站，接下來的步驟就應(yīng)該是如何連接你的在線收款平臺與你的銀行賬戶了，這樣你就可以開始在線售賣，然后賺取收入了。常見的在線收款平臺，有這么幾種，第一是PayPal，第二是Stripe，我們先來講PayPal。

首先你要有一個PayPal的Business（商家）賬戶，如果你還沒有的話，在PayPal的官網(wǎng)上進行注冊即可。回到WordPress的后臺，找到“WooCommerce”中的“Settings”，點擊打開后，可以發(fā)現(xiàn)里面的“Payments”選項：

我們選擇最后一個“PayPal Standard”，點擊“Set up”：

這樣的話我們就來到了PayPal的設(shè)置后臺，這里邊有些參數(shù)，我們需要把這些參數(shù)合理地填寫完畢，才能把網(wǎng)店和PayPal進行關(guān)聯(lián)。

上圖中的Title和Description的意思是在你結(jié)賬的頁面，如果你開啟了PayPal收款，客戶可以看到相應(yīng)的信息，知道可以使用PayPal來結(jié)賬。這里的PayPal email很重要，你需要正確填寫你注冊PayPal時使用的郵箱地址。

接著，我們要填寫API三個信息：

這三個信息我們得從PayPal獲取，登錄你的PayPal賬戶，點擊右上角的設(shè)置按鈕，然后點“Account Settings”：

此時我們跳轉(zhuǎn)到了PayPal的后臺設(shè)置界面，點擊左側(cè)欄的“Website payments”，進行網(wǎng)站收款設(shè)置：

我們可以看到右側(cè)有個“API access”，點擊“Update”；然后，選擇第三種API：

勾選第一個選項Submit，生成API：

生成完畢之后，我們就能得到上面需要的三個API信息：

剛剛，我們的WooCommerce后臺是開啟了IPN消息的，在PayPal這里，我們也需要設(shè)置一下。找到“Website payments”中的“Instant payment notifications”，點擊“Update”：

在跳轉(zhuǎn)的界面，點擊“Edit settings”：

修改Url，改寫成https://example.com/?wc-api=WC_Gateway_Paypal，然后保存設(shè)置：

最后，我們需要設(shè)置一個訂單返回地址，就是客戶下訂單，付款后跳轉(zhuǎn)的頁面。仍然是在“Website payments”，找到“Website preferences”：

開啟“Auto return”，輸入跳轉(zhuǎn)到的網(wǎng)址https://example.com/checkout/order-received/：

輸入了網(wǎng)址之后，開啟下方的“Payment data transfer”，可以獲取一個Token碼：

復(fù)制Token碼，粘貼到WordPress后臺：

以上設(shè)置完成后，我們的網(wǎng)店商城就和PayPal真正的關(guān)聯(lián)起來了。

十四、設(shè)置Stripe收款

當你有了Stripe賬戶之后，我們可以用一些操作把它和我們的網(wǎng)店關(guān)聯(lián)起來，用于收款。

WooCommerce默認的付款方式里邊沒有Stripe，因此我們要安裝一個相應(yīng)的插件來支持它。在WordPress后臺Plugins里，點擊“Add New”：

然后搜索Stripe，安裝、啟用第一個插件：

回到“Payments”里找到新添加的Stripe選項，進行“Set up”設(shè)置：

和PayPal一樣，我們主要的工作就是填寫正確的API信息：

如何獲取這些信息呢？我們到Stripe的官網(wǎng)，登錄后，點擊右上角的“管理平臺”：

在管理界面左側(cè)欄，找到“開發(fā)者”下的“API秘鑰”點擊進入，然后發(fā)布新的秘鑰即可：

Stripe的設(shè)置里默認是Test Mod，也就是測試模式，這個模式下，我們可以測試商城的支付功能是否可以正常運行。因此，Stripe的秘鑰也分為正常版和測試版的，根據(jù)自己需求填入網(wǎng)站中。

網(wǎng)站上線后，正常收款，切記填入正常版的秘鑰。秘鑰切換按鈕，打開就是切換到測試模式：

設(shè)置完兩個秘鑰后，我們在“Payments”里可以看到我們需要把一個網(wǎng)址加入到我們的Stripe后臺里：

復(fù)制這個網(wǎng)址，然后到Stripe后臺，點擊左側(cè)的“Webhook”：

點擊“添加端點”，把剛剛的網(wǎng)址粘貼進去；然后，選擇account的幾個事件：

添加端點后，我們會獲得一個密鑰簽名：

把這個密鑰復(fù)制粘貼到網(wǎng)站后臺的Webhook Secret里：

上圖，我們可以看到有個“Statement Descriptor”，這個的意思就是，當客戶在你的網(wǎng)店商城里消費后，他的賬單上會顯示出什么信息。這里，一般填寫你的商店的名稱。

好了，Stripe也設(shè)置完了。大家一定要記得，在測試結(jié)束之后，把測試模式關(guān)閉掉，填入正常模式的API信息。

總結(jié)

通過學(xué)習(xí)上述內(nèi)容，相信大家都可以掌握WooCommerce外貿(mào)建站的方法，也知道了如何去發(fā)布產(chǎn)品、設(shè)置收款方式等操作。如果遇到什么問題，歡迎評論留言，我們一起交流討論。