如何使用適用於 Elementor 的 WooCommerce Builder 構建商店
已發表: 2022-09-27您正在搜索適用於 Elementor 的 WooCommerce 構建器，以便您可以使用 Elementor 強大的可視化構建器創建和自定義您的商店。
借助 ShopReady，您可以使用 Elementor 創建和自定義整個 WooCommerce 商店——即使您只是使用 Elementor 的免費版本！
如果您想了解有關 ShopReady 的更多信息，可以查看我們完整的 ShopReady 評論。
不過，在本文中，我們更關注如何將 ShopReady 用作 Elementor 的 WooCommerce 構建器。
下面，我們將逐步向您展示如何使用 ShopReady 來構建和自定義您的商店，包括添加高級功能，例如願望清單、產品快速查看、優化的結賬等等。
您將能夠創建一個如下所示的商店：
您將能夠使用 Elementor 自定義所有內容，包括您的產品、購物車和結帳頁面（以及更多）：
如何將 ShopReady 用作 Elementor 的 WooCommerce 生成器
事不宜遲，讓我們直接進入我們的分步教程。
同樣，如果您想在進入本教程之前詳細了解 ShopReady 中的許多功能，您可以閱讀我們完整的 ShopReady 評論。
無論何時選擇試用，結賬時使用獨家優惠券代碼WPMayor30即可享受 30% 的折扣。
1. 創建您的基本 WooCommerce 商店並安裝 Elementor
如果您還沒有這樣做，您的第一步是設置您的基本 WooCommerce 商店。
您需要選擇優質的 WooCommerce 託管、安裝 WooCommerce、完成設置嚮導、添加一些產品等。
如果您在這裡需要幫助，可以查看我們的 WooCommerce 商店設置指南。
不要擔心選擇 WooCommerce 主題或自定義設計，因為這就是 Elementor 和 ShopReady 的用途。 只需專注於在後端設置東西，這樣您就可以擁有一個正常運行的商店，儘管它是基本的。
完成後，您還需要安裝 Elementor 插件。
借助 ShopReady，您可以免費使用 Elementor 的免費版本。
或者，如果您已經擁有 Elementor Pro，您也可以安裝它 – ShopReady 適用於這兩個版本。
2. 安裝 ShopReady 並啟用一切
設置基本 WooCommerce 商店並安裝 Elementor 後，您就可以為 Elementor 安裝 ShopReady WooCommerce 構建器。
WordPress.org 提供了 ShopReady 的免費版本，以及添加了更多功能的高級版本，起價為 75 美元。
對於本教程，我們安裝了專業版。 但是，相同的基本步驟也適用於免費版本，因此即使您使用免費版本也應該能夠按照以下步驟進行操作（您可能無法訪問某些更高級的功能，而且您也不會能夠自定義盡可能多的模板）。
激活插件後，您將在 WordPress 儀表板中獲得一個新的ShopReady菜單。
如果您轉到主ShopReady菜單，您將獲得一個包含不同區域的界面，您可以在其中啟用各種小部件、模塊和模板。
現在，我建議啟用所有小部件和模塊，以便您在創建商店時可以訪問所有功能。
一旦您建立了您的商店，您可以隨時返回並禁用您不使用的任何元素，以保持輕量級並加快您的商店。
啟用Demo Importer模塊尤為重要，因為這將使您可以訪問 ShopReady 的預製商店模板（儘管您始終可以從頭開始自定義所有內容）。
啟用Demo Importer模塊後，它會提示您安裝配套的 Demo Importer 插件，您應該這樣做。
執行此操作後，轉到 WordPress 儀表板中的新Unyson區域並啟用備份和演示內容擴展，以便您可以導入 ShopReady 的模板。
注意 – 如果您想使用 Elementor 從頭開始設計模板，則可以跳過此過程。
3.導入模板作為您商店的基礎
現在，您可以前往工具 → 演示內容安裝來安裝預製 ShopReady 演示站點之一。
同樣，您也可以跳過此步驟，直接從頭開始設計您商店的模板，我們將在下一節中介紹。
導入演示後，您將能夠使用 Elementor 完全自定義所有內容。
查看不同的演示選項，然後單擊要用作商店基礎的演示的安裝按鈕。
對於本教程，我們將使用Demo V1 ：
就像那樣，您的商店應該看起來與演示完全一樣：
4. 使用 Elementor 自定義商店的模板
現在，您已準備好開始使用 Elementor 的 WooCommerce 構建器來自定義商店的內容。
要訪問您商店的所有不同模板，請轉到 WordPress 儀表板中的ShopReady區域，然後選擇模板選項卡。
在這裡，您會看到與您的商店關聯的所有不同模板的列表。 以下是一些需要考慮的最重要的模板：
- 產品——單個產品頁面的模板。
- 商店– 商店主頁面的模板。
- Shop Archive – 列出所有產品的頁面模板。
- 購物車/空購物車——購物車各個階段的模板。
- 結賬——結賬頁面的模板。
- 我的賬戶——購物者前端賬戶頁面的模板。
然而，ShopReady 的好處在於它還可以讓您控制許多其他模板，例如產品快速查看、願望清單等。
要編輯任何模板並啟動 Elementor，您只需選擇相關模板，然後單擊鉛筆圖標。
您還可以創建新模板並在商店的不同部分使用多個模板：
ShopReady 現在將啟動 Elementor 界面。
要控制設計，您可以使用普通的 Elementor 界面及其所有設計選項。
關鍵區別在於 ShopReady 還將為您提供大量可在設計中使用的通用小部件和專用 WooCommerce 小部件。 您可以在 Elementor 界面的各個Shop Ready區域中找到這些：
每個小部件也將有自己獨特的設置。
例如，帶縮放的縮略圖小部件可讓您顯示具有不同佈局和設置的產品圖像：
完成後，請確保保存更改。
然後，您可以重複相同的過程來編輯商店的所有模板。 頁面右側的藍色儀表板鏈接可讓您輕鬆返回 ShopReady 模板界面。
不同的模板可能包含它們自己的特殊小部件。 例如，當您創建結帳頁面模板時，您將獲得特殊的小部件來幫助您做到這一點：
5.自定義站點設置
除了讓您使用 Elementor 自定義單個模板外，ShopReady 還向 Elementor 站點設置菜單添加了一些選項。 您可以通過單擊 Elementor 界面左上角的漢堡包圖標並選擇站點設置來訪問 Elementor 站點設置。
您可以在此處訪問商店行為的許多重要設置。
首先，設置分為兩個區域——ShopReady和ShopReady General & PopUp。
如果單擊這些區域，您將獲得許多其他選項。 例如，您可以控制可以使用 ShopReady 添加的站點範圍內的迷你購物車的行為：
我們建議探索所有這些選項，因為在這裡您可以為您的商店找到大量很酷的功能。
您還可以通過 WordPress 儀表板中的ShopReady → 頁眉頁腳來控制頁眉和頁腳。
立即開始為 Elementor 使用 WooCommerce Builder
用戶喜歡 Elementor，因為它具有強大的可視化拖放式構建器界面。
借助 ShopReady，您可以利用該構建器的強大功能來全面設計和自定義您的 WooCommerce 商店，即使您只使用免費版的 Elementor 也是如此。
如果您已準備好開始，請使用下面的按鈕下載 ShopReady，然後按照本教程創建您的 WooCommerce 商店。
獎勵：結賬時使用獨家優惠券代碼WPMayor30可享受 ShopReady 30% 的折扣！