如何打開 WooCommerce 在線商店與 WordPress

WooCommerce 是建立在線商店最受歡迎的解決方案之一。 與在線商店解決方案不同，例如 Shopify or BigCommerce, WooCommerce 沒有經常性費用或額外費用，例如每次有人向您購買時的交易費用。

此外，得到 WooCommerce 工作比將復雜的在線購物車軟件與您的站點集成要簡單得多。

其實可以添加配置 WooCommerce 在你的網站上完全靠你自己——沒有任何 編碼技能 或需要聘請開發人員。 這正是我要向您展示的內容 WooCommerce 初學者指南。

在這 WooCommerce 教程，您將學習如何：

1. 安裝和配置 WooCommerce 並打開您的在線商店
2. 選擇合適的免費/高級 WordPress WooCommerce 主題和擴展使您的商店更上一層樓

導航

• 步驟1：開始之前要做好準備
• 步驟#2：安裝和配置 WooCommerce 設置
• 第 3 步：如何將產品添加到 WooCommerce?
• 步驟＃4：選擇電子商務主題
• 步驟＃5： WooCommerce 擴展 - 免費和高級
• 包起來

工具清單 

• 平台– WordPress.org
• 域名註冊商– Name Cheap
• 網絡主機– BlueHost, Hostgator, InMotion
• WooCommerce 主題（免費）– 店面, 心臟
• WooCommerce 主題（付費）- 店主, 金, 復健鞋
• 分機棄置手推車– 廢棄的購物車精簡版, 恢復放棄的購物車
• 分機添加產品過濾– WOOF, WooCommerce 產品篩選
• 分機控制運輸和折扣– 擴展優惠券功能, 動態定價和折扣，高級送貨

FTC披露：WHSR從此網站上列出的工具收取推薦費。 但是，這些意見是基於我們的經驗，而不是基於他們付出了多少。 我們專注於幫助小型企業和個人將網站建設為企業。 請支持我們的工作，並在我們的網站上了解更多信息 披露收入.

---

步驟1：開始之前，請購買域名和託管

如果您已經選擇了域名和主機並安裝了 WordPress，繼續選擇主題的步驟。

如果沒有，請從以下位置購買域名 Namecheap 去 便宜的 WordPress 託管.

請注意：

尋求託管 WordPress 託管意味著託管提供商將負責您網站的維護、更新和安全。 通過選擇像 Bluehost 這樣可靠的虛擬主機，您可以忘記這些 hassles 並只專注於商店的業務方面。

Bluehost 附帶一個 WordPress+WooCommerce 託管也一樣，但我不建議現在就去做，因為每月 12.95 美元的價格會讓你的口袋有點貴，而 簡單的網頁寄存 每月只需​​$ 3.49。

（您可以查看我的完整資料 Bluehost評論 before you sign up.在您註冊之前。 Also,也， Hostgator 和 InMotion 您可以放心選擇兩家更具成本效益的託管主機提供商。）

好的…

因此，一旦您選擇了域名和託管，就需要：

1. 安裝 WooCommerce 插件並配置其設置
2. 選擇一個漂亮的在線商店主題
3. 添加一堆免費或高級 WooCommerce 插件

步驟#2：安裝 WooCommerce 並配置其設置

要開始建立在線商店，請先下載 WooCommerce 並在你的 WordPress 網站.

只要你激活 WooCommerce，您應該會看到它的設置頁面。
點擊 我們走吧！ 按鈕。

如果您不想立即完成這些設置，可以通過以下方式再次訪問它們 WooCommerce >設定.

所以 … WooCommerce 設置從將以下 4 個頁面添加到您的網站開始（WooCommerce 自行添加這些頁面，您無需執行任何操作）：

1. 選購
2. 購物車
3. 結帳
4. 我的帳戶

點擊 繼續 繼續下一步。

對於下一步， WooCommerce 要求您添加商店的信息，例如：

• 地址
• 貨幣
• 產品單位（衡量產品的方式-公斤，磅，數字的簡單數量等）
• 產品尺寸單位

填寫所有這些詳細信息，然後單擊 繼續:

WooCommerce 然後將提示您輸入您的運輸和稅收優惠。 勾選（如適用）； 點擊 繼續.

在最後的配置步驟中，您需要選擇讓用戶付款的不同方式。 WooCommerce 支持支付寶， Stripe、支票、銀行轉帳和貨到付款 (COD) 付款方式。

選擇適用的選項，然後單擊 繼續.

使用結帳選項配置，您已完成設置 WooCommerce.

現在，您需要開始將產品添加到商店。

因此，在下一個屏幕上，單擊 創建您的第一個產品！ 選項。

第 3 步：將產品添加到 WooCommerce

WooCommerce 提供了一個與其帖子編輯器非常相似的編輯器來添加產品。 添加您的產品標題和描述，就像添加帖子及其實際內容一樣。 添加產品內容後，您需要配置其餘的產品設置。

讓我們詳細看看這些設置：

1。 一般

Here, you have the field for listing the product price.在這裡，您具有用於列出產品價格的字段。 You also have an optional field for adding a sale price.您還具有用於添加銷售價格的可選字段。

另一個很酷的功能是，您可以選擇顯示特定日期之間的銷售價格，這意味著您可以自動化啟動和關閉報價的過程。 你也可以 把批發價定在 WooCommerce 如果您考慮同時向零售和批發客戶銷售。

2。 庫存

庫存選項使您可以添加庫存詳細信息，例如產品的SKU，庫存狀態等。

如果您想知道SKU是什麼意思……那麼……這是賣方為產品類型命名的唯一公式。

Shopify 給出一個 易於理解的SKU定義。 它說：

SKU是由字母和數字組成的唯一代碼，用於標識每種產品的特徵，例如製造商，品牌，樣式，顏色和尺寸。

這是一個例子 Shopify 分享：

尺寸為7號的Bailey Bow風格的紫色Ugg靴子的SKU可能是這樣的：UGG-BB-PUR-07。

基本上，您需要提出一種命名產品的格式。

如果您出售3種不同顏色的瑜伽褲，則SKU可能如下所示：

YO-PA-RED
YO-PA-綠色
YO-PA-黃色

你明白了，對嗎？

Now, I'm sure your product is not as easy to name as the example I took.現在，我確定您的產品不像我所舉的示例那樣容易命名。 So, to help you better, I've dug up this awesome因此，為了更好地幫助您，我已經挖掘出了 來自TradeGecko的免費SKU生成器 （需要註冊）。

……回到 WooCommerce 產品設置：

在SKU字段之後， 庫存/貨物 部分是選擇是否 WooCommerce 應該管理產品的庫存。

當你啟用 管理庫存？ 供應，另外兩個字段出現：

1. 庫存數量
2. 允許缺貨

在這裡，您需要做的就是指定產品的單位數量。 有了這些信息， WooCommerce 當您缺貨時將能夠了解。

如果您缺貨，您可以設置 WooCommerce 到：
進行延期交貨（延期交貨是缺貨產品的訂單）。

延期交貨並通知客戶庫存狀態（告訴客戶您已預訂該訂單，但該產品缺貨，並且在有貨時您將發貨）。

停止接受缺貨產品的訂單。

接下來是 庫存狀況 field.領域。 Use it to set the availability of a product.使用它來設置產品的可用性。

最後的偏好 單獨出售 告訴用戶他們只能購買該產品的一個副本。

3。 運輸

運輸方式 section is pretty straightforward.部分非常簡單。 Here, you just need to specify a product's weight, dimensions, and class.在這裡，您只需要指定產品的重量，尺寸和等級即可。

中的值 運送方式 of a product helps in calculating its shipping rates.產品的運輸有助於計算其運費。 So, if you sell products that can be easily categorized into classes like bulky, moderate, and light-weight, these three will become your shipping classes.因此，如果您出售的產品可以輕鬆地歸類為笨重，中等和輕量級，則這三種將成為您的運輸類。

一旦您指定了運輸類別，您就可以輕鬆地sso為其指定運輸方式。 例如，您可以為輕型運輸類別的商品選擇固定費用運輸方式。 許多運費計算器插件也使用運費類別的值來確定運費，因此請嘗試定義合適的運費類別。

你可以閱讀更多關於 WooCommerce 航運 這裡 和 這裡.

4.關聯產品

關聯產品 部分可讓您進行追加銷售、交叉銷售和促進產品增長ups 在你的店裡。

追加銷售：進行追加銷售意味著推荐一種產品，該產品要比用戶當前正在檢出的產品好一些。

例如，如果用戶注視著45美元的耳機，則在您的追加銷售部分中，您應該推薦60美元的耳機。

交叉銷售：進行交叉銷售意味著建議與用戶正在簽出的商品相關的商品。

（這裡是 向上銷售和交叉銷售.)

分組：在分組中，您將相關產品捆綁在一起並打包提供。 So, if you sell photography equipment, you'll bundle up items like a tripod, camera bag, SD cards and more and offer this group to your users.因此，如果您出售攝影器材，則將捆綁三腳架，相機包，SD卡等物品，並將該組物品提供給用戶。

5.屬性

WooCommerce 允許您添加自定義產品屬性以更好地描述您的產品。

例如，如果您銷售辦公室記事本，則可能要添加頁數作為自定義屬性。

6。 高級

高級 部分中，您可以向購買者添加個性化的購買記錄。

現在您了解瞭如何 WooCommerce 有效，讓我們看看如何為您的商店選擇正確的主題。

步驟#4：選擇一個 WordPress 電子商務主題

現在， 許多 WordPress 主題 '支持' WooCommerce.

但所有這些主題並不一定很漂亮 WordPress 商店。
是的，他們確實與 WooCommerce，因此您將能夠添加產品和所有內容，但根據我的經驗，此類主題看起來很不合適。

為了確保您的商店看起來很棒，您需要選擇一個專門的 電子商務 WordPress 主題而不僅僅是另一個 WordPress 兼容的主題 WooCommerce.

WordPress 電子商務主題

這是兩個免費的主題：

＃1。 Storefront店面

Storefront 的活躍安裝量超過 80,000 次，是下載次數最多的應用程序之一 WordPress 電子商務主題。 它來自後面的同一個團隊 WooCommerce, 所以你可以期待 WooCommerce 和 Storefront 一起工作就像變魔術一樣。

店面的主頁可以精美地顯示產品類別，已銷售和最受好評的產品以及特色產品列表。

除了響應，Storefront還支持已知的架構標記語言。 改善SEO.

＃2。 Coeur

心是另一種美麗 WordPress 電子商務主題。 它在主頁上提供了一個大的英雄區域，可用於展示產品。 此外，它還帶有 3 種優雅的皮膚：Classic、Flat 和 Material。

在Coeur的設置中，如果將主頁設置為商店頁面，則產品列表將精美地顯示在商店的主頁上。

Coeur的產品頁面非常漂亮，因此購買起來輕而易舉：

這個主題在頁腳中支持 3 個小部件（它還有一個小部件側邊欄）。 您可以使用任何免費的 WordPress WooCommerce 添加到這些區域的小部件：

所以這是兩個很棒的免費主題。 但是因為它們是免費的，所以它們確實缺乏溢價的花里胡哨 WooCommerce 主題。

美麗溢價 WooCommerce 主題

現在讓我們看看4個美麗的溢價 WooCommerce 您可以購買的主題：

＃1。 Shopkeeper店主

Shopkeeper是一個經過深思熟慮的電子商務主題，其中包含許多功能，如果您必須為它們購買單獨的高級插件，這些功能可能會向您收取100美元的費用。

主要特徵：

• 出售外部/附屬產品（如果您沒有自己的產品要出售，但是想要認可其他網站上的產品，則可以使用此功能。）
• 內置訂單追踪系統
• 內置運輸計算器
• 內置的費率/評論功能
• 高級產品過濾器
• 我的清單

In addition to these features, Shopkeeper also has stunning product page templates for products that have variations, are downloadable, affiliate, out of stock or on sale.除這些功能外，Shopkeeper還提供了令人驚嘆的產品頁面模板，這些產品頁面模板具有可更改，可下載，附屬，缺貨或出售的產品。 Shopkeeper has as many as 9 homepage layouts.店主擁有多達XNUMX個首頁佈局。

Another lovely feature that this theme offers is that of banner templates.此主題提供的另一個可愛功能是橫幅模板。 Shopkeeper offers a slick set of ready-to-use banners.店主提供了一套精美的現成橫幅。 These banners can be customized and added anywhere on your store.這些標語可以自定義並添加到商店中的任何位置。

這個主題已經售出了10,000冊，絕對是$ 59的便宜貨。

＃2：Aurum –極簡購物主題

Aurum 是一種優雅的 WooCommerce 帶有兩個高級插件的購物主題（價值 34 美元的 Visual Composer 和價值 18 美元的 Layer Slider）。 Visual Composer 有助於使 Aurum 更具可定制性，並且借助 Layer Slider，您可以在商店的任何位置添加大膽的滑塊。

Aurum提供4種時尚的首頁佈局。 All look great, but I loved the second option (V2):看起來都很不錯，但我喜歡第二種選擇（VXNUMX）：

產品頁面設計也很漂亮：

Aarum的延遲加載功能有助於加快商店的加載時間。 With lazy loading, only those images of a site are loaded that are in the viewing area of the visitor.使用延遲加載時，僅加載訪問者查看區域中站點的那些圖像。 The images below this area are only loaded as the visitor scrolls.此區域下的圖像僅在訪客滾動時加載。

Aurum帶有大約50個簡碼，您可以將它們與可視化作曲家結合使用，並根據需要設計商店。

Aurum售價59美元

＃3：沃克 - 時尚 WooCommerce 主題

沃克令人耳目一新 WooCommerce 帶有 9 種出色的主頁佈局（除了默認佈局）。 我特別喜歡 休閒，時尚，砌體和城市 版本.

老實說，當我看到演示時，很難選擇一個演示，因為每個演示都非常漂亮。

結帳，購物車，購物清單和訂單跟踪頁面看起來很棒。

When you look at the product types this theme supports, you'll realize how much time the theme makers might have actually put into planning this theme.當您查看該主題支持的產品類型時，您將意識到主題製作者可能實際花了多少時間來計劃該主題。 You have special designs for pages for products that are on sale or out of stock.您對銷售或缺貨的產品頁面有特殊的設計。 Similarly for the ones that come with options.對於附帶的選項也是如此。

您還會為您認可（而不是直接銷售）的產品設置一個特殊頁面。

This team gets the full score when it comes to looks and elegance.該團隊在外觀和優雅方面獲得滿分。 Just couple it with a few premium extensions and you'll be able to offer your visitors a world-class shopping experience.只需將其與一些高級擴展相結合，您就可以為訪客提供世界一流的購物體驗。

沃爾特（Walter）的59美元的價格相當便宜。

#4：WonderShop – WooCommerce 主題專注於移動用戶體驗

超過一半的互聯網用戶已經在移動設備上購物，並且這一數字每天都在增長。

我在手機上嘗試了 WoonderShop 主題，看看它是否真的像宣傳的那樣好。 我看過很多主題 作者 聲稱對移動友好，但很少有主題真正提供適當的移動體驗。

WoonderShop提供！

When you are deep in the store, there is a sticky navigation with the shopping cart, always available.當您深入商店時，購物車會顯示一個粘性導航，始終可用。 When you want to search for a product, there is an auto-suggest search that helps you find products faster and better.當您要搜索產品時，會自動建議您進行搜索，以幫助您更快更好地找到產品。 When you add a product to the shopping cart, it opens up and gives you a nice feedback that your action was successful.將產品添加到購物車時，它會打開，並為您提供成功操作的良好反饋。 When you want to filter down the products, there you'll find mobile optimized filters, updating the products list in real-time.當您想過濾產品時，您會發現針對移動設備進行了優化的過濾器，可以實時更新產品列表。

The overall navigation across the WoonderShop is smooth and intuitive.整個WoonderShop的整體導航流暢而直觀。 Authors did a great job implementing established UX navigation practices from the biggest online stores in the world.作者在實施世界上最大的在線商店的既定UX導航實踐方面做得很好。

除了移動 UX，WoonderShop 主題也是電子商務專家的不錯選擇 兌換率 優化（CRO）意味著什麼。

我發現了幾個有趣的轉換技巧：

• 無干擾的結帳（結帳時跳出率較低）
• 緊急倒數（“幫助”購物者更快地做出決定）

ProteusThemes，WoonderShop的作者，是一個知名的播放器 WordPress 擁有超過 33,000 名客戶的生態系統，因此聲譽是站在他們一邊的。

不要浪費大量的帶有半成品主題的移動訪客，而要通過WoonderShop將他們轉化為買家。

WoonderShop的價格為$ 79，但可為您提供7天的免費試用期。

第 5 步：免費和付費 WooCommerce 擴展

WooCommerce 擅長作為購物商店引擎。 但是當您開始銷售時……您會意識到您的商店需要更多功能。

例如，您可能想要：

• 使客戶能夠在下訂單之前計算運輸成本
• 提供動態定價和優惠券
• 跟進未完成購買的買家。

等等

不幸的是，此類功能並未內置 WooCommerce. 對於這些，您必須使用免費或付費 WooCommerce 擴展。 下面，我推薦了一堆這樣的附加組件，用於添加您商店中需要的一些最重要的功能。

WooCommerce 處理購物車遺棄的擴展

A cart abandonment instance is one where a customer adds items to their cart but doesn't complete the purchase.購物車放棄實例是客戶將商品添加到購物車但未完成購買的實例。 According to根據 Baymard研究所，放棄了67.45％的在線購物車。

要彌補因購物車放棄而造成的潛在收入損失，一種非常有效的策略是聯繫此類買家並促使他們返回商店並完成購買。 WooCommerce 沒有任何內置功能來處理購物車遺棄情況，但這裡有一些很棒的插件可以提供幫助：

#1：廢棄的購物車精簡版 WooCommerce

使用此插件，您可以向那些將產品添加到購物車但未完成購買的客戶或來賓用戶發送電子郵件提醒。

被遺棄的購物車喜歡 WooCommerce 聲稱它可以幫助您節省高達 30% 的銷售損失。 它帶有一個隨時可用的模板，您可以使用客戶姓名和產品購物車信息等值進行個性化設置，並提供指向廢棄購物車的鏈接。

這個插件的 專業版 gives you 3 templates and lets you start sending reminder emails within minutes of a cart abandonment instance;提供XNUMX個模板，讓您在購物車被遺棄實例的幾分鐘內開始發送提醒電子郵件； in the free version, you can only send reminders after an hour.在免費版本中，您只能在一個小時後發送提醒。

But the really cool feature is that it lets you give coupons and discounts in the reminder email.但真正酷的功能是，它使您可以在提醒電子郵件中提供優惠券和折扣。 An email reminder with a discount is 100% more powerful than one without it because a discount offer gives a user an incentive to act fast.具有折扣的電子郵件提醒功能比沒有折扣的電子郵件提醒功能強大XNUMX％，因為折扣提供使用戶有動力快速行動。

價格：$ 119

＃2： WooCommerce 恢復放棄的購物車

WooCommerce Recover Abandoned Cart 插件可以完成上述插件的所有功能以及更多功能。

除了發送一系列自動電子郵件提醒（帶有折扣和優惠券）之外， WooCommerce Recover Abandoned Cart 插件還可以讓您獲取用戶的電話號碼，以便手動跟進他們。

您還可以使用此插件的報告功能監視後續電子郵件的性能。

價格：$ 49

WooCommerce 添加高級產品過濾的擴展

大多數利基市場為客戶提供了很多選擇。 例如，如果您經營一家服裝店，您可能希望讓您的客戶能夠使用顏色、尺碼、材料、品牌等值來篩選產品。 默認情況下， WooCommerce 不支持高級過濾。 以下是一些可以將此功能添加到您的商店的插件：

＃1： WooCommerce 產品過濾器 (WOOF)

WOOF 是一個很棒的免費插件，可以將基本過濾器添加到您的在線商店。

This plugin's premium version unlocks more filters like colors, labels, drop-downs, checkboxes and more.此插件的高級版本可解鎖更多過濾器，如顏色，標籤，下拉菜單，複選框等。 Also, the premium version includes analytics, so you can see the product specifications your users are actively searching for, and order more of those products.此外，高級版還包含分析功能，因此您可以查看用戶正在積極搜索的產品規格，並訂購更多這些產品。

看看演示 這裡。 The premium version costs $30高級版售價XNUMX美元

＃2。 WooCommerce 產品篩選

This plugin lets you offer custom filtering options to your visitors thereby enabling them to look for products super-fast.通過此插件，您可以為訪問者提供自定義過濾選項，從而使他們能夠超快地尋找產品。 With this plugin, your visitors will be able to filter your products based on their attributes like color, size, availability, price range and more.使用此插件，您的訪問者將能夠根據其屬性（例如顏色，尺寸，可用性，價格範圍等）來過濾您的產品。

You can display these filters using several stunning layouts.您可以使用幾種驚人的佈局顯示這些過濾器。 I especially like the plugin's sidebar, full-screen, and masonry layouts.我特別喜歡插件的側邊欄，全屏和磚石佈局。

WooCommerce Products Filter 也支持工具提示，因此您可以在用戶使用時提供額外的信息 hover 在任何過濾選項/值上。 加， WooCommerce Products Filter 對您的客戶日常使用的過濾器進行深入分析。 這些信息可以讓您更深入地了解客戶的需求。

價格：$ 35

WooCommerce 用於控制運輸、定價和折扣的擴展

正如您在上一節中看到的 WooCommerce 產品配置， WooCommerce 僅對價格和運送產品提供有限的設置。 但是您可以使用以下附加組件添加高級定價和運輸規則：

＃1。 WooCommerce 擴展優惠券功能

WooCommerce 延長優惠券 is a free plugin that let you set conditions on which coupons are automatically added to a buyer's cart.是一個免費插件，可讓您設置將優惠券自動添加到買家購物車的條件。 You can use it to set rules like您可以使用它來設置規則，例如：如果買家的購物車價值超過$ 5，則可為其提供500％的折扣 或者其他的東西。

＃2： WooCommerce 動態定價和折扣

This plugin introduces a whole new level of control to pricing your products.該插件為您的產品定價引入了全新的控制水平。 This plugin lets you set unlimited combinations of rules for a discount using values like the cart subtotal, number of items in the cart and many more.使用此插件，您可以使用購物車小計，購物車中的商品數量等值來設置折扣規則的無限組合。

例如，您可以設置如下規則： “購買2到5個單位可獲得10％的折扣，購買至少6個可獲得20％的折扣”

You can also give freebies.您也可以免費贈予。 For eg,:例如： “隨購買的每張照片免費提供相框”

為了吸引用戶購買，您甚至可以顯示促銷優惠的有效性（開始日期和結束日期）以促進銷售。

WooCommerce 動態定價和折扣也可用於運行客戶忠誠度計劃，您可以在其中為忠誠客戶提供更多和更高的折扣。

價格：$ 29

＃3： WooCommerce 高級運輸

同樣，在運輸設置方面， WooCommerce 只提供一些非常基本的選項，例如統一費率或免費送貨。

如果您想更好地控制運費，您應該獲得 WooCommerce的高級航運。 此插件可讓您向網站添加多種運費計算方法。

You can use properties like weight, volume, stock status, delivery location and more to create custom shipping rates.您可以使用重量，體積，庫存狀態，交貨地點等屬性來創建自定義運費。 You can also use it to offer free shipping when the cart value exceeds some pre-defined amount and when the order is ship to a particular region, or set percentage based shipping costs.當購物車價值超過某個預定義的金額並且訂單被運送到特定地區時，或者設置基於百分比的運送成本時，您也可以使用它來提供免費運送。

了解更多 關於插件。 Price: $17價錢：$ XNUMX

包裝起來......

WooCommerce 是開設在線商店的絕佳解決方案，但您可以通過將其與易於轉換的主題和一些擴展相結合，使其功能增強 100%。 我希望這篇文章能為您提供入門所需的所有指導。

希望您的商店有很多銷售！

如果您正在尋找在線商店的替代品，這裡是 最好的在線商店建設者 你可以看看。