如何在 Elementor 中設計 WooCommerce 購物車 [無需編碼]

您的客戶是否在購買過程中放棄了他們的WooCommerce 購物車？ 您是否知道這背後的一個極其常見的原因可能是購物車頁面雜亂無章，用戶覺得購物時會感到困惑？ 但是再也不用擔心了； 隨著Elementor 基本插件的最新更新，我們為您提供了降低購物車放棄率和促進銷售的最簡單的解決方案。

在此博客中，我們將向您介紹為什麼在您的商店網站上定制設計WooCommerce 購物車頁面是最佳方法的原因。 但不僅如此，我們還將向您介紹我們最新的 Essential Addons 元素，這些元素旨在幫助您創建專業設計的購物車，一定會帶來銷售。 因此，事不宜遲，讓我們直接潛入並了解更多信息。

為什麼要設計自定義 WooCommerce 購物車頁面？

研究表明，每10 位顧客中就有近 7 位會放棄您的購物車並且再也不會回來，即使他們對您銷售的產品感到滿意。 正如我們在一開始提到的那樣，其主要原因是客戶無法瀏覽的混亂或雜亂的購物車頁面。

有時，您的潛在客戶可能無法返回購物頁面並添加他們需要的其他產品。 而在其他時候，附加他們希望使用的銷售優惠券代碼可能會出現問題。 當他們已經在WooCommerce 購物車頁面上無法添加更多數量的相同產品時，買家甚至可能會感到沮喪。

可以理解的是，提供出色的產品和服務可能會令人非常失望，並且仍然會觀察到很高的購物車放棄率——尤其是由於簡單的頁面設計問題。 但是，隨著我們Elementor 基本插件團隊的最新版本，您的擔憂現在即將結束。 閱讀更多內容，了解如何通過 Elementor 中設計精美、外觀專業的電子商務購物車頁面輕鬆提升銷售額。

使用 Essential Addons 5.0 設計專業的 WooCommerce 購物車

2021 年對於我們 Elementor 的 Essential Addons 團隊來說是令人驚嘆的一年。 我們已經達到了最大的里程碑，並且發展得比我們想像的要快。 這一切都歸功於你。 因此，為了以同樣的高調結束這一年並為您提供最佳的 Web 構建體驗，我們為您帶來了我們最新的更新Essential Addons 5.0。

最新版本包含許多改進、新元素和擴展，可幫助您在 Element 中輕鬆發揮網頁設計技能。 我們很高興地通知您，此更新還附帶了一個獨家小部件 - EA Woo Cart 。

這個令人難以置信的新元素可讓您使用 Elementor 在您的商店中輕鬆創建設計師 WooCommerce 購物車頁面，只需點擊幾下，無需編碼。 因此，無論您是電子商務行業的新手，還是經驗豐富的店主，您都可以輕鬆使用此 Essential Addons 小部件將潛在的櫥窗購物者轉變為付費客戶。

它最大的亮點是它在 Elementor 中完全可定制，並帶有許多不同的設計佈局供您選擇，並且與您的 WooCommerce 商店的美學完全匹配。 繼續閱讀以了解更多信息。

在 Elementor 中設置平滑的 EA Woo 購物車，無需編碼

不用說，您必須確保您已經安裝並配置了WooCommerce 插件，以完美地構建您的商店。 但在這種情況下很重要，因為要讓這個高級小部件在 Elementor Editor 中工作，您需要從 WooCommerce 商店將一些產品添加到購物車中。 一旦完成，我們就可以毫不費力地在您的商店中使用 EA Woo Cart 小部件。 請按照以下步驟了解如何操作：

第 1 步：設置您想要的 WooCommerce 購物車頁面

首先，直接從您的 WordPress 儀表板導航到WooCommerce → 設置頁面，然後轉到“高級”選項卡。 從這裡，您可以將任何所需的頁面分配為新的購物車頁面。

只需單擊“購物車頁面”選項，然後從下拉菜單中選擇任何頁面作為您的 WooCommerce 購物車頁面，如下圖所示。 您將一切就緒。

第 2 步：在 Elementor 中編輯 WooCommerce 購物車

下一步是使用 Elementor Editor 只需單擊幾下即可編輯您的WooCommerce 購物車頁面。 但在您這樣做之前，您必須使用 Elementor 的基本插件啟用 EA Woo Cart 元素。

確保您已安裝最新版本的Essential Addons 5.0 PRO ，然後從 Essential Addons for Elementor 用戶界面轉到“元素”選項卡。 您將在這裡找到 80 多個可用元素，但您只需切換“ EA Woo Cart ”選項並點擊“ Save Settings ”即可開始使用。

第 3 步：在 Elementor 中編輯 WooCommerce 購物車

現在，您已準備好在 Elementor 中設計一個令人驚嘆的購物車頁面。 因此，只需轉到您的 WooCommerce 購物車頁面，然後點擊“使用 Elementor 編輯”。

進入 Elementor 編輯器後，從“元素”選項卡下的“搜索”選項中找到“ EA Woo Cart ”元素。 然後，只需將“EA Woo Cart”元素拖放到 Elementor Editor 中所需的任何部分，如下所示。 這真的很容易。

輕鬆配置 EA Woo 購物車的各個方面

您的 WooCommerce 購物車現已設置好，但需要對其進行樣式設置和定制，以使其看起來專業且易於客戶理解。 本節將重點介紹如何輕鬆做到這一點。

第 1 步：配置 EA Woo 購物車常規設置

在 Elementor 編輯器側面板上，您會在“內容設置”選項卡下找到多個選項，例如“常規設置” 、 “表格生成器”或“購物車組件” 。

在“常規設置”中，您會發現 2 種不同風格的佈局供您的 EA Woo 購物車選擇並根據自己的喜好進行自定義，如下所示。

第 2 步：從表生成器更改標籤

接下來，從“表格生成器”中，您可以更改表格標籤並拖動部分以重新排列您的 EA Woo Cart 價格表。 這使您可以完全靈活地更改已添加到購物車頁面的所有列中的每個標籤——“產品”、“價格”、“數量”等。

第 3 步：自定義購物車組件功能

然後，我們轉到“購物車組件”部分，您可以在其中簡單地​​切換“購物車更新按鈕”，讓您的客戶能夠將更多產品添加到他們的購物車中。

但不僅如此，您還可以切換“優惠券表格”，讓客戶在結賬時輕鬆添加他們想要的任何優惠券在 WooCommerce 購物車頁面上。 除此之外，您還可以啟用“繼續購物”選項，以幫助客戶再次返回商店頁面進行更多購物。 此外，您甚至可以從此部分更改“結帳按鈕”文本，使您的號召性用語更具交互性。

所有這些按鈕和選項將幫助您的客戶徹底了解 WooCommerce 購物車頁面，並輕鬆瀏覽此頁面。 因此，使用 EA Woo 購物車小部件，您可以立即降低購物車放棄率和跳出率。

只需點擊幾下即可完全自定義 EA Woo 購物車的樣式

最後，一旦您為您的EA Woo 購物車頁面配置了內容，就可以對其進行樣式設置以匹配您的 WooCommerce 網站或品牌美學。 為此，您只需單擊 Elementor 編輯器的“樣式”選項卡即可自定義頁面的不同區域。

第 1 步：風格化常規設置

在“常規”部分，您可以更改整個 EA Woo 購物車部分的背景顏色。 您將能夠手動調整 EA Woo 購物車背景的顏色或選擇全局顏色。

第 2 步：通過表格部分了解詳細信息

從“表格”部分，您可以更改整個購物車部分的填充、邊距、排版、邊框類型等。 它最終將使您的 EA Woo 購物車頁面從其他 WooCommerce 商店中脫穎而出，並且看起來完全定制。

第 3 步：改變其他設計方面

但這還不是全部。 同樣，您可以更改“購物車總計”、“優惠券表格” 、“繼續購物”、 “按鈕”和“通知”的外觀。 您甚至可以更改裡面的文本。

要添加更多功能並使您的 EA Woo 購物車頁面看起來更具交互性和吸引力，您還可以探索“高級”設置選項。

外觀專業的設計師 WooCommerce 購物車頁面

就是這樣。 通過這些小步驟和簡單的自定義，您可以根據自己的喜好輕鬆為您的網站創建令人驚嘆的WooCommerce 購物車頁面。 這也是，無需使用任何一行代碼。

查看下面的最終結果，並在高級 Essential Addons EA Woo Cart 小部件的幫助下，了解您在 WooCommerce 中具有專業外觀的設計師購物車頁面。

WooCommerce 商店的其他獨家小部件

有了這個，我們想結束我們關於如何在 Elementor 中設計 WooCommerce 購物車的終極指南，無需編碼且完全輕鬆。 但在我們離開之前，我們想讓您了解您可以從 Elementor 的 Essential Addons 訪問的所有其他 WooCommerce 小部件。

這個出色的插件為您帶來了一個小部件，只需單擊幾下即可改善 WooCommerce 商店的各個方面。 您可以查看另外7 個元素：

Woo 產品庫

Woo 產品滑塊

Woo 產品旋轉木馬

Woo 產品網格

Woo 產品比較

Woo 產品系列

哇結帳

從 Essential Addons 網站查看它們，並立即輕鬆提升您的 WooCommerce 商店的銷售額。

更新 Essential Addons 5.0 並促進 WooCommerce 銷售

那你還在等什麼？ 別等了！ 立即更新到 Essential Addons 5.0 ，加入我們創建一個獨特且轉化率高的 WooCommerce 商店。 或者，查看我們的任何 PRO 套餐，以僅 39.97 美元的獨家價格開始，並使用我們所有的高級功能使流量、銷售額和轉化率飆升！

如果您有任何建議，請在下面的評論中告訴我們或聯繫我們的支持團隊； 我們很高興知道您的反饋。 如需更多更新、教程以及提示和技巧，請訂閱我們的博客或加入我們友好的Facebook 社區。