如何創建由 Elementor 提供支持的 WooCommerce 網站

WordPress 平臺本身是世界上最流行的內容管理系統 (CMS) 是不夠的。 我們還擁有 Elementor 和 WooCommerce 中最受歡迎的頁面構建器和電子商務平台。 因此，使用這三者來創建一個外觀漂亮且性能卓越的在線商店是有意義的。

如果我們將其分解，WordPress 是組織您的帖子、頁面和產品的理想選擇。 由於其開發人員（Automattic），WooCommerce 提供與平台的緊密集成。 更重要的是，Elementor 帶來了強大而直觀的拖放式頁面構建。 這是用於構建商店的完整無代碼解決方案。

在這篇文章中，我們將了解如何使用 Elementor 和 WooCommerce 建立商店。 在整個過程中，我們將研究兩者如何相互配合，為您的網站提供最大的靈活性。

為什麼 WordPress、Elementor 和 WooCommerce 可以很好地協同工作

值得仔細研究一下 WordPress、Elementor 和 WooCommerce 如何結合起來幫助您創建頂級在線商店。

首先，WordPress 是市場上最常用的 CMS。 當然，這還不足以保證在用戶中佔據如此主導地位。 事實上，我們已經在之前的帖子中對此進行了研究，因此我們鼓勵您進一步閱讀該帖子。 簡而言之，它是一個安全、穩定且可擴展的平台，您可以在其上構建。

說到這一點，您還有 WooCommerce。 因為 Automattic 開發了插件，所以它與核心 WordPress 有很好的集成，但這還不是全部。

它也是最受歡迎的電子商務平台。 在 WordPress 生態系統中，它擁有大約 20% 的份額，相當於所有網站的 8% 左右。 相比之下，Shopify 的市場份額約為 5% 或 6%。 同樣，使用數據並不是一切。

WooCommerce 採用創建在線商店的流程並簡化流程。 您可以在幾分鐘內啟動並運行，並擁有一個強大、強大且可擴展的電子商務平台。

要將這些編織在一起，您有 Elementor。 它在其領域內也有很大的市場份額，以及龐大的用戶群。

它是一個拖放式頁面構建器，採用獨特的方法幫助您從頭開始構建整個網站。 這是一個誘人的解決方案，因為有許多其他工具沒有的強大特性和功能。 這裡最相關的是專用的 WooCommerce Builder。

簡而言之，Elementor 是一個在 WPKube 博客上有很多列英寸的插件，你應該瀏覽我們的檔案，看看它到底能做什麼。

WooCommerce 網站需要頁面構建器提供什麼

上一節的隱含結論是，Elementor 可以提供 WooCommerce 所需的特性和功能的正確組合，使您的網站更上一層樓。 不過，重要的是要弄清楚為什麼會這樣以及它提供了什麼。

一般來說，WooCommerce 網站需要頁面構建器提供以下內容：

• 緊密集成，因此頁面構建器和 WooCommerce 之間沒有衝突。
• 大量自定義選項可幫助您的產品和商店頁面脫穎而出。
• 一種編輯構成典型產品頁面的各個元素的方法。
• 幫助“升級”您的商店的額外功能。

您（當然）也應該注意您的個人需求。 例如，您可能會發現表單和彈出窗口對您的商店和銷售策略很重要。 好消息是 Elementor 能夠滿足您的需求。

例如，它有一個很棒的彈出窗口生成器，可以用於銷售、限時優惠、優惠券等等：

您可以像創建其他頁面模板一樣創建它們，並且可以快速應用它們。 更重要的是，您幾乎可以以任何您選擇的方式自定義它們。 如果您有要在您的網站上推廣的特定廣告系列，那就太完美了。

如何選擇合適的 WooCommerce 主題

我們不會在這裡詳細介紹，因為我們會在教程中介紹這一點，並且還會在專門的文章中總結一些主題。

在這種情況下，您需要的主要考慮因素是與 Elementor 和 WooCommerce 兼容的主題。 即使快速瀏覽一下高級市場網站，您也會發現很多主題都在宣傳這一點，因此您的選擇範圍很廣。

即便如此，我們還是可以提及一些突出的主題：

• 店面。 由於塊編輯器是本機技術，因此它與 Elementor 的兼容性可能會最低。 仍然，
• 你好。 這是 Elementor 空白啟動主題，非常適合從頭開始開發 WooCommerce 網站。 當然，如果您的可用時間較少，選擇另一個功能更全的主題可能是明智之舉。
• 生成新聞。 這是具有靈活基礎架構的頂級主題。 這意味著無論您使用塊編輯器、Elementor 還是其他工具，您的商店都會看起來很棒。

我們鼓勵您在開始創建網站之前找到正確的主題。 請記住，最好的結果將是與 Elementor和WooCommerce 兼容的東西。

如何通過 3 個步驟創建由 Elementor 提供支持的 WooCommerce 網站

在本文的其餘部分，我們將向您展示如何一起使用 Elementor 和 WooCommerce 來創建電子商務網站。 需要注意三個步驟：

• 安裝並設置 WooCommerce。
• 創建您的 WooCommerce 產品線，並使用 Elementor 構建產品頁面。
• 再次使用 Elementor 設計一個專門的商店頁面。

不過，對於本教程，我們將假設您已經安裝並激活了 Elementor Pro。 這是我們在創建 WordPress 漏斗的文章中向您介紹的內容。 當您遇到麻煩時，該帖子將幫助您。

1. 安裝 WooCommerce 並進行設置

設置 WooCommerce 安裝時需要考慮兩個方面：插件本身和商店的設置。 事實上，安裝插件的過程與任何其他 WordPress 插件相同。

至於設置 WooCommerce 本身，雖然您可以在幾分鐘內準備好，但花更多時間通過設置嚮導是值得的。

當談到設置的這一點時，我們已經為您服務了。 事實上，我們有一個完整的 WooCommerce 教程帖子，其中詳細介紹瞭如何開始使用 WooCommerce 並創建您的第一個產品。 當你瀏覽這個時，在備用標籤中打開它是一個很好的帖子。 那裡的信息對於下一組步驟很有價值。

2. 創建您的 WooCommerce 產品

一旦你安裝了 WooCommerce 並搖擺不定，你應該考慮在後端創建產品。 同樣，我們的 WooCommerce 教程詳細介紹瞭如何執行此操作，但這裡是 Cliff 的註釋：

• 前往 WordPress 中的產品 > 添加新選項卡。
• 填寫您的產品名稱和簡短描述。
• 使用 WooCommerce 元框來填充您的產品數據，例如價格。
• 添加圖像。
• 發布您的產品。

不過，這裡是 Elementor 展示其第一個強大舉措的地方——WooCommerce Builder。 這是一種使用頁面構建器來創建產品頁面設計的方法。

首先，在 WordPress 中單擊模板 > 添加新的：

在此處，從Template Type下拉列表中選擇Single Product ，然後輸入可選名稱：

這將打開模板庫以顯示其中的每個預構建塊：

看到喜歡的設計後，單擊“插入”按鈕，Elementor 將導入塊：

這是啟動專用產品頁面的快速方法。 您可以利用這個良好的開端並添加更多內容。 Elementor 包含許多專用小部件，可幫助您構建 WooCommerce 特定頁面：

一旦你有了你喜歡的頁面佈局，點擊屏幕底部的綠色發布按鈕：

這將彈出一個彈出窗口，幫助您設置顯示模板的特定條件：

準備就緒後，單擊保存並關閉。 從這裡，您可以將更多產品添加到您的商店、使用更多模板或開始使用專門的商店頁面。

3. 使用 Elementor 和 WooCommerce 設計您的專用商店頁面

WooCommerce 的一個方便的用戶體驗 (UX) 是它如何生成您商店所需的大部分必要頁面。 頂級商店頁面是最重要的，因為這是裝飾門的前遮陽篷。

如果您將 WordPress 和 WooCommerce 與特定於 WooCommerce 的主題（例如 Storefront）一起使用，則自定義商店頁面的主要停靠點是通過定制器。 不過，我們的重點是 Elementor。 使用頁面構建器的方法是使用產品存檔頁面。

這使您可以自定義產品在您網站上的顯示方式，但不處理頁面的其餘部分。 在某些情況下，管理兩組自定義和設置可能很困難，但根據我們的經驗，到目前為止這還不是問題。

與單個產品一樣，您需要前往 WordPress 中的模板 > 添加新產品，然後從下拉列表中選擇產品存檔：

同樣，您可以選擇一個塊，從頭開始編輯頁面，或將兩者結合起來創建獨特的東西。 同樣和以前一樣，您可以使用任何特定於 WooCommerce 的小部件來幫助您根據自己的喜好設計頁面。

再次單擊“發布”按鈕並進入“發佈設置”對話框後，您就可以調用魔法了。 在其基本形式中，您可以在Shop Page中包含新模板：

不過，這還不是全部。 您可以添加更多包含條件，以便在您網站的許多地方使用該模板。 這對於連續性非常有用，並讓訪客有理由訪問您的商店。

關於 WooCommerce 其他生成頁面的快速說明

在結束之前，我們想提一下其他生成的 WooCommerce 頁面。 壞消息是他們不在Elementor的視線範圍內。 換句話說，如果沒有額外的 WooCommerce 擴展，您將無法編輯結帳或感謝頁面等頁面。

這令人失望，但可以理解。 即便如此，您仍然可以使用 Elementor 來開發周圍的元素，然後使用簡碼將特定的頁面功能放入其中。 雖然，這並不理想。

如果完整編輯這些頁面對您很重要，您需要查看結帳字段編輯器（每年 49 美元）和自定義感謝頁面擴展（也是每年 49 美元）。

綜上所述

使用三種最流行的工具發布電子商務商店時會出現什麼問題？ 在這種情況下，沒有太多。 WordPress、Elementor 和 WooCommerce 都提供一流的體驗。 將它們結合起來可以讓您最終創建和運行在線商店。

在這篇文章中，我們研究瞭如何一起使用 Elementor 和 WooCommerce 來建立商店。 安裝並激活這兩個插件後，您的首要任務是創建產品及其相關頁面。 從那裡，您需要一個專門的商店頁面——這是 Elementor 能夠處理的。 更重要的是，頁面構建器插件的額外功能（例如彈出構建器等）可以幫助您的商店進入平流層。

你想為你的下一家商店創建一個 Elementor 和 WooCommerce 組合嗎？如果是這樣，這篇文章會對你有幫助嗎？ 在下面的評論部分讓我們知道！