如何使用 WooCommerce 和 Elementor 構建電子商務網站
已發表: 2022-10-17如果您想創建一個專業的電子商務網站，Elementor 和 WooCommerce 是您可以使用的兩個很棒的工具。 在本文中，我們將向您展示如何將兩者結合起來創建一個強大的在線商店。 我們將引導您完成設置 WooCommerce 的步驟，然後我們將向您展示如何使用 Elementor 創建漂亮的頁面。
在本文結束時，您將了解如何使用 WooCommerce、Elementor 和 WooLentor 構建電子商務網站。
另請閱讀： WooCommerce 與 Magento：哪個是最好的電子商務平台
什麼是 WooCommerce 以及它是如何工作的
WooCommerce 是一個基於 WordPress 的開源電子商務平台，可讓您將 WordPress 網站轉換為電子商務業務。 對於希望在沒有太多麻煩或費用的情況下建立在線商店的小型企業和企業家來說，這是一個受歡迎的選擇。 WooCommerce 可免費使用並提供廣泛的功能，使其成為創建在線商店的多功能平台。
設置 WooCommerce 只需幾分鐘，一旦安裝，您就可以立即開始銷售產品。 WooCommerce 配備了您入門所需的一切，包括購物車、支付網關和庫存管理。
您還可以添加其他功能和插件來擴展 WooCommerce 的功能。 總體而言，WooCommerce 是一個用戶友好的平台，在設計和功能方面提供了很大的靈活性，使其成為建立在線商店的理想解決方案。
使用 WooCommerce 和 Elementor 建立您的在線商店的好處
如果您有興趣建立在線商店，WooCommerce 和 Elementor 是兩個值得考慮的絕佳平台。 WooCommerce 是一個流行的電子商務平台，為超過 30% 的在線商店提供支持。
Elementor 是一個強大的頁面構建器，可以輕鬆創建自定義頁面和設計。 超過 500 萬人在他們的 WordPress 網站上積極使用 Elementor 是有充分理由的——它是一個拖放式頁面構建器，無需專業幫助即可創建一個漂亮的網站。 只需點擊幾下，您的網站就可以上線了！
以下是使用 WooCommerce 和 Elementor 構建您的在線商店的一些好處：
- WooCommerce 是一個功能強大的電子商務平台，易於使用和擴展。
- Elementor 提供了用於創建自定義頁面和設計的拖放界面。
- WooCommerce 和 Elementor 都對 SEO 友好，因此搜索引擎很容易找到您的商店。
- WooCommerce 和 Elementor 都具有響應性，因此您的商店在所有設備上都會看起來很棒。
- WooCommerce 提供了廣泛的功能和插件來擴展您商店的功能。
- Elementor 提供了廣泛的小部件和附加組件來擴展您的商店設計。
如果您想建立一個強大而靈活的在線商店，WooCommerce 和 Elementor 是兩個值得考慮的絕佳平台。
使用 WooCommerce 和 Elementor 建立專業在線商店所需的東西
以下是我們將使用的東西來建立一個一流且專業的在線商店：
- 一個WordPress網站
- WooCommerce 插件
- Elementor 頁面構建器
- WooLentor（免費增值 WooCommerce Elementor Page Builder 附加組件插件）
使用 WooCommerce 和 Elementor 建立在線商店：分步指南
WooCommerce 是最受歡迎的 WordPress 插件之一，難怪為什麼。 WooCommerce 允許您將您的 WordPress 網站變成一個功能齊全的在線商店，具備銷售產品和收款所需的所有功能。 最重要的是，WooCommerce 是免費使用的。
在本文中，我們將向您展示如何使用 WooCommerce 和 Elementor 建立在線商店，這兩個強大的工具可以很好地協同工作。 我們將引導您完成該過程的每個步驟，從安裝 WooCommerce 到設置您的付款方式和運輸選項。
在本文結束時，您將擁有開始在線銷售產品所需的一切。 讓我們開始吧！
第 1 步：設置域和主機
在開始使用在線商店之前，您需要購買域名和託管計劃。 您的域名是潛在客戶用來查找您的網站的名稱，因此選擇易於記憶且準確代表您提供的產品或服務的域名至關重要。
選擇域名後，請向託管服務提供商註冊。 您通常可以通過同一個提供商進行此操作，如果您同時購買這兩種服務，許多房東會提供折扣。
在所有步驟中，選擇託管計劃然後購買它是最重要的。 與 WooCommerce 合作的主機數不勝數，每個主機都有不同的優點和缺點。
根據您的預算，有很多選擇供您選擇。 這些服務的費用通常取決於您需要多少空間以及您希望信息傳輸的速度（帶寬）以及您正在製作的網站類型。
在購買之前仔細考慮您的要求至關重要。 例如，如果您想運行一個受歡迎的網站，您將需要一項提供無限帶寬和存儲的服務。 然後，您需要在選擇提供商後獲得託管計劃。
託管計劃的價格可能會有所不同。 通過一些努力，您絕對可以為您的網站找到理想的託管計劃。
第 2 步：安裝 WordPress
現在是時候設置 WordPress 了，您已經擁有了您的網絡託管帳戶和域名。 該過程通常很簡單，只需幾分鐘。 許多網絡主機為 WordPress 提供一鍵式安裝選項，使安裝過程更加方便。 如果您的主機不提供此功能，請不要擔心； 手動安裝 WordPress 還是很簡單的。
您通常可以按照 WordPress.org 的說明進行操作。 從網站獲取他們的軟件，在您的網絡服務器上為其設置數據庫，然後上傳所有內容以運行安裝腳本。 如果你做對了，你將擁有一個完整的 WordPress 網站！
第 3 步：選擇一個 WordPress WooCommerce 主題
下一步是選擇一個主題，然後轉到 WordPress 中的外觀 > 主題頁面。 在這裡，您會看到各種免費和購買的主題。 如果您選擇免費選項，只需單擊“激活”。 但是，如果您選擇高級主題，請先購買，然後再將其上傳到您的網站。 激活主題後，即可開始 WooCommerce 安裝。
要使您的網站在所有設備上都具有吸引力，請選擇一個既適合移動設備又優化搜索引擎的主題。 響應式主題將自動更改其佈局以適應他們正在查看的屏幕大小——無論是手機還是電腦！
Flone – Minimal WooCommerce WordPress 主題是一個響應迅速且富有創意的網站設計。 Flone 考慮市場並預測未來趨勢，以提供高質量的演示網站。 Flone WordPress 主題成功整合了質量和易用性的所有關鍵要素。
對於想要讓自己的網站脫穎而出的企業家來說，Flone 是一個很好的主題。 它帶有 7 種不同的頁眉樣式、25 個以上的部分和 4 個頁腳選項，可讓您隨時了解最新趨勢。
多幣種允許來自世界各地的客戶通過 PayPal 或信用卡輕鬆付款，而無需先轉換貨幣，從而為他們節省佣金費用；
第 4 步：設置 WooCommerce 插件
安裝並激活 WooCommerce 插件
轉到 WordPress 管理儀表板並選擇插件。
然後，在“添加新”部分中搜索“WooCommerce”。 之後，通過單擊“立即安裝”並選擇“激活”來安裝插件。
現在您將獲得一個設置嚮導。 最好仔細檢查所有內容並根據需要進行所有必要的修改。
我們將選擇“繼續”以開始設置嚮導。
把你的店舖的基本信息
首先，它需要有關您商店的基本信息，例如它的位置和您將提供的商品種類，以及您使用的貨幣。 它還詢問您銷售的商品類型：實物商品、數字產品、兩者的組合、面對面交易或其他完全不同的商品。
您還可以確定是否希望 WooCommerce 跟踪您的使用情況以改進商店。 填寫表格後，單擊頁面底部的“繼續”按鈕並繼續進行下一個設置。
配置支付選項、網關和額外選項
完成此操作後，下一步是為您的商店選擇支付網關。 WooCommerce 支持的一些選擇是 PayPal、信用卡和 Stripe。 您的在線商店的付款方式取決於您所在的位置以及您要銷售的產品類型。
如果您沒有選擇“親自銷售產品”選項，那麼您將只有 Stripe 和 Paypal 作為選項。 如果您勾選了該複選框並且居住在加拿大、澳大利亞、美國、日本或英國，那麼您將可以使用 Square、Paypal 和 Stripe，因為這些是這些支付網關運營的國家。
在支付頁面上，從下拉菜單中選擇“離線支付”。 然後，您可以選擇通過支票、銀行轉帳或現金付款。 完成所有設置後，單擊“繼續”並繼續下一步。
接下來，您將專注於運送您的產品詳細信息。 WooCommerce 支持兩 (2) 個運輸區：1 區是美國和加拿大，2 區是世界其他地區。
如果您的商店位於 1 區（美國和加拿大），那麼您可以選擇獲得實時運費。 但是，如果願意，您也可以設置固定運費或免費送貨。 您只需要確保重量和尺寸對於您決定的任何運費都是準確的。
一切就緒後，單擊“繼續”並通過選擇“在家打印運輸標籤”打印出您的憑據。
此時，WooCommerce 安裝嚮導會詢問您是否要安裝某些必要的插件，例如 Jetpack 的自動稅收和用於電子郵件營銷的 MailChimp。 可以選擇您的電子商務網站所需的任何內容。 為此，只需選中每個旁邊的框以將它們自動安裝到您的站點上，或者稍後手動安裝。
將 WooCommerce 與 Jetpack 鏈接並完成設置
如前所述，設置嚮導現在要求您將站點與 Jetpack 鏈接。 這個插件在確保最大的安全性方面非常出色，同時允許自動稅收的所有功能。
單擊“繼續使用 Jetpack”，您將到達嚮導的最後一頁。 您可以從此頁面中獲得多種選擇。 只需檢查並繼續，無需多言。
第 5 步：將產品添加到您的 WooCommerce 商店
您現在可以開始將產品添加到您的在線商店。 您可能知道，有很多方法可以將新項目插入網站，我們將在下面的示例中展示其工作原理：
轉到 WordPress 儀表板並添加新產品
要將產品添加到您的 WordPress 網站，請執行以下步驟：
1. 從您的儀表板轉到產品，然後添加新的。
2. 您可以在此處插入有關您的產品的信息，包括其名稱、類別、圖像、標籤庫描述等。
3. 當您將每件產品一一添加到您的在線商店時，請務必包含所有相關信息
設置產品數據
位於主編輯器下方的面板是您設置產品數據的地方。 在自定義此信息時要密切注意，以確保在您的商店中獲得完美的體驗。
首先，從下拉菜單中選擇產品的數據類型，例如簡單產品、分組產品、外部/附屬產品和可變產品。
根據您的業務利基、行業類型、產品類別和其他因素，將出現不同的配置選項。 相應地設置所有數據，並在完成保存後從“所有產品”中檢查產品。
檢查您的產品外觀
您已完成所有必要的任務。 現在是時候看看您的在線商店和產品對客戶的看法了。 這在很大程度上取決於您選擇的主題。 這也取決於你選擇了哪一個。
第 6 步：安裝並激活 Elementor 以設計您的 WooCommerce 商店
對於那些希望在沒有任何編碼知識的情況下創建具有專業外觀的網站的人來說，Elementor 是完美的解決方案。 使用這個簡單但功能強大的工具，您可以添加文本和圖像，同時還可以在頁面上添加視頻或按鈕 - 只需單擊一下即可！
借助 Elementor 的廣泛功能、選項和小部件，它可以通過多種方式進行自定義！ 您可以輕鬆拖放元素來創建自定義頁面和模板。 您還可以使用 Elementor 來自定義您的 WooCommerce 產品。
如何安裝 Elementor
要安裝 Elementor，請登錄您的 WordPress 儀表板並轉到插件部分。 然後，單擊添加新按鈕並蒐索 Elementor。
找到插件後，單擊立即安裝按鈕並激活插件。 之後，您就可以開始使用 Elementor 設計您的 WooCommerce 商店了！
或者，如果您更喜歡手動過程，請下載 Elementor 並使用“上傳插件”選項上傳文件。 完成後，請按照以下步驟開始設計您的商店頁面：
在開始銷售產品之前，您需要創建一個產品頁面。 使用 Elementor，您可以完全自定義您的在線商店，以更好地匹配您的品牌並滿足客戶的需求。
使用 Elementor 構建產品頁面
要開發產品頁面以顯示特定項目的功能，請按照下列步驟操作：
要使用 Elementor，首先轉到 WordPress 儀表板上的頁面。 然後，單擊“添加新的”。 從右側模板下拉列表中，選擇 Elementor Canvas。 最後，單擊“使用 Elementor 編輯”開始。
您有很多選擇來構建頁面，包括使用預先設計的模板或塊或單獨開發每個組件。 此外，您可以使用第三方插件來擴展模板庫的功能。 要構建一個獨特的組件，您可以使用多種有用的小部件。
我們使用 WooLentor Elementor Add-ons Plugin 來充分利用 Elementor 的強大功能。
完成您的設計
您現在已成功完成所有設置。 下一步是發布頁面，但首先，您需要設置條件以在特定類別下顯示頁面。 這將有助於潛在客戶更輕鬆地找到您的商店，也有助於提高您商店的搜索引擎排名。
您也可以用這種方式設計所有其他頁面——沒有任何限制。 您所要做的就是想出一個設計，然後使用不同的小部件創建它。
第 7 步：使用 WooLentor Elementor 附加組件插件實現廣泛的 Elementor 功能
WooLentor 插件概述
WooLentor 插件提供了創建自己成功的在線商店所需的一切。 它有 19 個模塊和 91 多個小部件可供選擇，因此非常簡單！ 此外，還有強大的頁面構建器，讓用戶可以立即快速製作自定義頁面或模板。
WooLentor 包含許多旨在幫助您提高銷售額和轉化率的功能。 一些關鍵功能包括：
- 許多預先構建的頁面模板可用於 WooCommerce 商店
- 一個可視化的拖放頁面構建器，可以輕鬆創建自定義 WooCommerce 頁面
- 一組強大的 WooCommerce 模塊，可用於為您的商店添加額外功能
- 廣泛的 WooCommerce 小部件，可用於為您的商店添加額外功能
- 適合所有設備的出色響應式設計。
- 專門的客戶支持團隊。
WooLentor 提供了令人難以置信的可定制小部件選擇，能夠以多種不同方式定制您的網站。 您可以使用產品網格和客戶評論系統以及 Ajax 搜索表單來增加您網站上的功能！
WooLentor 還提供了一系列模板來幫助您以簡單有效的方式設計您的網站。 商店模板、我的帳戶模板、結帳模板等 – WooLentor 為您提供了高級模板選項。
此外，這款多功能且功能強大的基於 Elementor 的 WooCommerce 頁面構建器插件使您可以通過各種模塊輕鬆個性化您的 WooCommerce 商店的外觀，例如銷售通知、限時搶購倒計時、產品比較、電子郵件定制器和 Shopify 樣式結帳。
總之，WooLentor 是滿足您所有 WooCommerce 需求的一站式商店。
現在下載
使用 WooLentor 自定義 WooCommerce 商店
在 WooLentor 的幫助下，您可以通過自定義使您的網站更加有趣和有吸引力。 它具有廣泛的功能，例如在幾秒鐘內添加塊或頁面，具有簡單的界面，即使是初學者也能輕鬆理解！
安裝和激活 WooLentor
要開始使用 WooLentor，只需從您的 WordPress 存儲庫安裝並激活插件。
如果您想要更多高級功能，請選擇 WooLentor Pro 版本，該版本根據預算提供不同的軟件包。 您可以從他們的網站獲取專業版。
轉到 WooLentor 菜單
現在前往 WooLentor 的菜單。 此時，您將被帶到一個頁面，其中列出了 WooLentor 的所有不同功能。
導航到模板生成器並轉到添加新
從 WordPress 儀表板中的 WooLentor 菜單導航到模板構建器
並立即添加一個新的！
配置頁面模板設置以構建您想要的頁面
下一步是配置您想要的頁面模板，以便它可以構建優化版本。
單擊“添加新”以創建所需的頁面模板。 執行此操作後，將出現一個頁面模板設置的彈出窗口，您可以在其中選擇給它任何名稱並選擇模板類型。
如果要將模板用作默認頁面，請選中“設置默認值”框，然後保存更改。
使用 Elementor 自定義頁面模板
保存參數後，您可以使用 Elementor 小部件根據您的喜好更改和自定義模板。 有幾個可用的各種頁面的預製模板。
如果您想使用它們，請在彈出窗口中轉到“示例設計”，然後會出現該頁面的預製模板。 您可以立即選擇其中任何一個，甚至可以自定義它們以滿足您的需求。
測試頁面
最後，您應該測試頁面以確保它正常工作並且一切看起來都很好。
WooCommerce 商店的其他重要插件
WooCommerce 商店的一些最重要的插件在這裡。 這些添加了產品評論、批發定價等功能，讓您更好地控制您的在線業務！
聯繫表格 7：
如果您希望在您的網站上擁有一種客戶可以用來輕鬆與您聯繫的方法，那麼您的 WooCommerce 商店需要使用 Contact Form 7 插件。 使用此插件，您可以創建適合您需求的表單，以收集客戶反饋或任何其他所需信息。 其簡單易用的界面讓任何人都可以輕鬆創建自定義表單。
CF7 的擴展：
如果您的 WordPress 站點使用 Contact Form 7 插件，那麼 Contact Form 7 Extensions 插件是必不可少的。 這個功能強大的插件向 Contact Form 7 添加了自定義字段、文件上傳等。它還包括使管理聯繫人表單變得更容易的功能，例如導出/導入表單和創建自定義模板。
整體
Whols 是一個優秀的 WooCommerce 插件，用於設置批發價格。 如果您想建立具有批發功能的在線商店，這將非常有用。 您可以為各種項目和產品類別設置不同的費率，以及最低訂購數量。 Wholes 是一種通過為批發客戶提供折扣來增加銷售額的絕妙方法。
WP插件管理器
“WP 插件管理器”是一個 WordPress 插件，可讓您禁用特定頁面或帖子的插件。 您可能不需要加載網站上的所有插件。 WP Plugin Manager 插件允許您逐頁停用單個 WordPress 插件，以提高站點性能並減少加載時間。
文字圍欄
Wordfence 使用從頭開始創建的端點防火牆和惡意軟件掃描程序來保護 WordPress。 Wordfence 的威脅防禦源提供了確保您的網站安全所必需的最新防火牆規則、惡意軟件簽名和有害 IP 地址。 Wordfence 包含 2FA 和一系列附加功能。
排名數學
借助 Rank Math，您可以使用基於廣泛接受的最佳實踐的內置建議輕鬆優化搜索引擎的內容。 您可以輕鬆自定義重要的 SEO 設置，控制哪些頁面可索引，並使用此插件確定您希望您的網站如何出現在搜索結果中。
W3 總緩存
W3 Total Cache 通過使您的網站更快並減少加載時間來增強您網站的 SEO、Core Web Vitals 和整體用戶體驗。 這是通過使用內容交付網絡 (CDN) 集成等功能並遵循最新的最佳實踐來完成的。
經常問的問題
Q1。 什麼是 WooCommerce？
WooCommerce 是一個插件，可將您的 WordPress 網站變成在線商店。 它允許您在線銷售產品和服務，並包括庫存管理、訂單處理和支付等功能。
Q2。 什麼是元素？
Elementor 是一個拖放式頁面構建器插件，可以輕鬆為您的 WooCommerce 商店創建自定義頁面和帖子。 使用 Elementor，您可以在頁面上添加、刪除和重新排列元素，而無需編寫任何代碼。
Q3。 如何設置 WooCommerce？
要設置 WooCommerce，您首先需要在您的 WordPress 網站上安裝 WooCommerce 插件。 安裝插件後，您可以激活它並開始設置您的商店。
Q4。 使用 Elementor 創建網站的流程是什麼？
開始使用 Elementor 很簡單。 它可以以與任何其他 WordPress 插件相同的方式安裝。 安裝後，您可以激活它並開始為您的 WooCommerce 商店創建自定義頁面和帖子。
Q5。 如何將 WooCommerce 與 Elementor 集成？
要將 WooCommerce 與 Elementor 集成，您需要安裝並激活 WooCommerce Elementor 插件。 激活後，您可以開始使用 Elementor 創建自定義 WooCommerce 頁面和帖子。
Q6。 使用 WooCommerce 是否需要付費？
不，WooCommerce 是一個免費插件。 但是，您需要支付託管、域名以及與設置在線商店相關的其他必要費用。
問題 7。 Elementor 的價格是多少？
不，Elementor 是一個免費插件。 但是，您可以選擇從他們的網站購買高級模板或附加組件。
Q8。 哪個更好：WooCommerce 或 Elementor？
WooCommerce 和 Elementor 都是很棒的插件，具有自己獨特的功能和優勢。 這一切都取決於您的要求。
Q9.WooLentor 是什麼？
Woolentor 是一個 WordPress 插件，可讓您使用 Elementor 的拖放構建器創建自定義 WooCommerce 產品。
Q10.WooLentor 是如何工作的？
安裝並激活後，您就可以將新的“WooCommerce 產品”模板添加到您的 Elementor 庫中。 這將使您能夠訪問所有 WooCommerce 產品字段，以及 Woolentor 獨有的一些自定義字段。
Q11.我需要知道如何編碼才能使用 WooLentor 嗎？
不！ Woolentor 是一個拖放式構建器，因此您不需要任何編碼知識即可使用它。
Q12.WooLentor 是免費的嗎？
是的，Woolentor 是一個免費的 WordPress 插件。 但是，如果您想要額外的高級和高級功能，您可以購買不同定價包的 Pro 版本。
最後的想法
WooCommerce 是一個流行的可定制的開源電子商務平台，基於 WordPress，可讓您將 WordPress 網站變成電子商務商店。 WooCommerce 為您提供運行在線商店所需的所有功能，例如產品管理、訂單跟踪、付款處理、運輸和稅收計算。
Elementor 是一個可視化頁面構建器，無需任何編碼知識即可輕鬆創建漂亮的頁面和帖子。 Elementor 可讓您使用拖放界面創建令人驚嘆的頁面和帖子。
WooCommerce 和 Elementor 一起使無需任何技術專長即可輕鬆構建具有專業外觀的在線商店。 使用 WooCommerce 和 Elementor，您可以建立一個看起來很棒且易於使用的在線商店。 WooCommerce 和 Elementor 都是免費的，因此您無需花錢就可以開始使用！