如何使用 Elementor 構建 WooCommerce 商店頁面

1995 年，亞馬遜在線訂購了第一款產品——《流體概念和創意類比》一書。

大約 25 年後，電子商務行業的銷售額約為 3.5 萬億美元，預計到 2021 年全球將達到 4.9 萬億美元。

因此，如果您還沒有啟動您的電子商務網站，那麼現在是開始的最佳時機。 使用適當的工具和正確的設置，您可以輕鬆地從頭開始構建您的第一個在線商店，並使其與相關內容保持同步。 無需事先的技術專長！

今天，我們將引導您完成使用 WooCommerce 和 Elementor 設計電子商務網站的完整分步過程。 我們保證完成整個配置不會超過 30 分鐘！

但在此之前，讓我們回答這個問題——

為什麼要使用 Elementor 設計您的電子商務商店？

設計是成功電子商務網站的基石。 多虧了 WordPress——它增強了人們的 Web 開發體驗，包括廣泛的定制能力和確保網站安全。 WordPress 的另一個獨家功能是 Elementor 等網站頁面構建器。

無論任何技術知識如何，Elementor 都可以幫助您創建令人驚嘆的網頁。 使用這個可視化編輯器，任何人都可以在幾分鐘內構建動態網站。 您不僅可以拖放來設計您的網站，而且 Elementor 可以讓您在不切換瀏覽器選項卡的情況下實時概覽更改。 此外，您可以在 Elementor 中設計 WordPress 網站時輕鬆複製粘貼部分和塊。

這就是為什麼超過 500 萬人在他們的 WordPress 網站上積極使用 Elementor Page Builder。

除此之外，Elementor 擁有豐富的有用插件集合。 這樣您就可以獲得無限的選擇來以準確適合您品牌的方式配置您的網站。

如果您打算使用 Elementor 建立您的電子商務商店，那麼還有另一個好消息！ WooCommerce 完全支持這個 WordPress 頁面構建器，它是 WordPress 的最佳電子商務插件。

專業提示：話雖如此，您只需點擊幾下即可使用 WooCommerce 將您的 WordPress 網站變成一個功能齊全的在線商店。 而 Elementor 允許您在不應用任何代碼的情況下使您的商店設計對您的訪問者更具吸引力。

如何在 WordPress 中創建電子商務網站

正如所承諾的，我們將向您展示使用 WooCommerce Elementor pro 創建電子商務網站的最簡單但經濟實惠的過程。 以下是如何做到這一點 -

這些是創建在線商店的先決條件：

• 一個WordPress網站
• WooCommerce（免費）
• 元素（免費）
• 元素（專業版）
• HappyAddons – Elementor 插件（免費）

首先，您需要購買自己的域名和主機。 然後配置您的 WordPress 網站並安裝所有必需的插件，例如 WooCommerce、Elementor、HappyAddons 等。

同時，如果您想要一個快速指南來幫助您開始使用 Elementor 和 WooCommerce，請閱讀本初學者指南。

視頻下方顯示瞭如何配置基本的 WooCommerce 設置和頁面。 快速瀏覽一下！

重要提示： WooCommerce 安裝將帶您簡要了解所有必需的設置選項，例如付款、運輸、其他插件協作等。

完成基本配置後，您的 WooCommerce 網站就可以運行了。 現在您可以將產品添加到您的在線商店。 WooCommece 商店頁面的基本佈局如下所示：

儘管 WooCommerce 具有您期望從電子商務商店獲得的所有所需功能，但這裡的設計選項仍然有限。 有時也很複雜！ Elementor 可讓您以自己的方式修改商店設計。

您可能還想閱讀：如何使用 Elementor：一種簡單的入門方法。

使用 Elementor 設計您的產品頁面

這個 WordPress 頁面構建器有許多適用於 WooCommerce 網站的華麗現成模板。 此外，Elementor 支持 10 多個 WooCommerce 小部件，可幫助您非常輕鬆地全面控制您的在線商店。 因此，您永遠不會受到 WooCommerce 元素數量的限制，更重要的是，您可以進行形象化。

在進入設計過程之前，請確保您已成功安裝最新版本的 Elementor、Elementor pro，並在您的網站上激活了 WooCommerce 3.4 或更高版本。 除了您將無法訪問 Elementor 的產品模板。

第一步：創建一個單一的產品模板

首先，導航到 – WordPress Admin Dashboard → Templates → Add New

您將看到 Elementor 模板創建模式表單。 在這裡，選擇您要創建的模板類型。 對於設計商店，您必須選擇單一商店類型。

為您的模板插入一個名稱。 點擊創建模板按鈕。

接下來，您將進入 Elementor 模板庫。 讓我們為您的 WooCommerce 商店頁面選擇模板-

第二步：插入 Elementor 模板

在此步驟中，您必須選擇要使用 Elementor 自定義在線商店的佈局。 或者，您可以從頭開始設計頁面，插入不同的指定小部件和功能。

第三步：使用產品小部件美化您的商店

您可以通過兩種方式自定義您的商店頁面 - 使用您自己的內容填充模板或在添加任何內容之前進一步修改佈局。 如果您選擇第二個選項，請記住在 Elementor 內部自定義您的設計非常容易。

幸運的是，Elementor 提供了一些專為創建 WooCommerce 頁面而構建的小部件。 使用這些 WooCommerce 小部件，您可以自定義在線商店的每個部分。

您的產品頁面需要的可用小部件：

1. 產品名稱和描述
2. 添加到購物車按鈕
3. 產品價格
4. 產品圖片
5. 追加銷售
6. 產品評級
7. 產品數據選項卡
8. 元和附加信息
9. 產品內容
10. 麵包屑
11. 產品相關
12. 產品庫存

現在，您可以使用這些 WooCommerce 小部件直觀地設計您夢想中的在線商店，而無需了解任何代碼。

第四步：配置添加到購物車按鈕

CTA 按鈕是產品頁面上最重要的元素之一。 您必須將其設計得有吸引力並將按鈕放置在中心點，以便任何人都可以輕鬆注意到這一點。 Elementor 為“添加到購物車”按鈕提供了兩個選項：常規和自定義。

使用 Elementor 編輯器，您可以根據您的品牌標識自定義按鈕樣式。 您將獲得多種樣式選項，例如更改顏色、排版、邊框、形狀、懸停效果等。

但是，如果您想完全控制“添加到購物車”按鈕，那麼您應該使用自定義“添加到購物車”選項。

您可以靈活地將此按鈕放置在產品頁面上的任何位置。 您還可以選擇按鈕的類型（默認、信息、成功、警告、危險）、標籤、顏色、對齊方式、大小、圖標、位置和間距。 此外，您可以為 Analytics 中的跟踪事件分配一個按鈕 ID。

接下來，讓我們看看如何使用 WooCommerce Elementor Pro 設計您的產品存檔頁面。

第五步：使用 WooCommerce Elementor Pro 自定義您的產品存檔頁面

上面我們向您展示瞭如何在 Elementor 中自定義您的單個產品頁面。 現在，我們將演示使用 Elementor Pro 設計產品檔案的步驟。

與單個產品頁面相同，轉到 WordPress 管理儀表板 → 模板 → 添加新的。

這次從下拉菜單中選擇 Product Achieve 並為您的模板命名。

接下來，點擊 CREATE TEMPLATE 按鈕並等待編輯器加載。

同樣，您可以選擇預先構建的塊或開始在空白頁面上工作。 除了這裡的所有常規 Elementor 小部件外，您還將獲得一些指定的 WooCommerce 存檔小部件。 如-

1. 檔案標題
2. 存檔產品
3. 產品
4. 存檔說明
5. WooCommerce 麵包屑
6. 自定義添加到購物車
7. WooCommerce 頁面
8. 產品類別
9. 菜單車

使用這些小部件和其他設計工具，您可以輕鬆地以您想要的方式安排您的在線商店。

第六步：使用 HappyAddons 升級您的設計工具

儘管 Elementor 本身是功能最豐富的插件之一，但無需任何編碼技能即可設計您的夢想網站。 仍然使用 HappyAddons，您可以探索更多的設計潛力並進一步擴展核心插件。

由於 Happy Addons 引入了許多有用的小部件和功能，讓您的雙手更加強大。 如浮動效果、動畫文本、跨域複製粘貼、快樂塊等。 這些獨特的設計元素可幫助您使您的產品看起來更具吸引力。 這樣您就可以將最大的客戶吸引到您的電子商務商店。

在這裡，我們使用 HappyAddons 的“Card Widget”為產品頁面提供獨特的外觀。

您可能還想閱讀：如何使用 Elementor 和 HappyAddons 構建商店頁面。

第七步：設置條件並發布您的商店頁面

完成所有自定義後，點擊發布按鈕。 但在此之前設置您的產品頁面應該顯示的條件。

您可以為所有產品、特定類別和/或子類別、標籤或僅針對某個作者的產品配置此設置。 更複雜的條件也適用。

完成一切並保存。 最後，將新設計發佈到現場。 這是您可以使用 WooCommerce Elementor Pro 配置您的第一個電子商務網站的方法

在幾分鐘內自定義您自己的在線商店並大幅增加您的銷售額

電子商務逐漸重組了零售業。 現在沒有回頭路了！ 此外，Covid-19 大流行似乎是對電子商務企業家的祝福。 專家預測，冠狀病毒的影響不僅會在短期內推動電子商務行業，而且還會持續存在。

在這種情況下，啟動電子商務網站對您來說可能是一個改變生活的決定。 如果您可以自己構建網站而不是聘請專業人士，還有什麼比這更令人驚奇的呢？ 使用 WooCommerce，您可以快速創建您夢想中的在線商店。 此外，Elementor 是一個方便的工具，可以讓您的商店設計更加迷人。

使此組合對您有用，以吸引買家並提高電子商務商店的銷售額。

如果您有任何進一步的疑問或在建立自己的在線商店時遇到任何問題，請使用下面的評論部分。