如何使用 WooCommerce 設置 WordPress 購物車

已發表: 2022-10-28

因此，您幾乎完成了創建全新的 WooCommerce 購物網站。您已完成構建主要市場產品佈局、產品類別選擇菜單和帶有功能導航提示的頁眉頁腳。

任何電子商務網站最重要的方面是能夠重定向並幫助客戶從網站上的任何位置將產品添加到他們的購物車中，一直到結帳流程直到訂單確認。

這聽起來像是一個難以集成到 WordPress 電子商務網站的功能，但實際上並非如此。 WordPress 有一個龐大的社區支持其開發，您可以使用WooCommerce 購物車插件將此功能添加到您的網站，該插件可與任何WordPress WooCommerce 主題無縫協作。

WooCommerce 購物車如何工作？

當產品被添加到 WooCommerce 中的購物車時，它們會被添加到一個單獨的列表中，其中包含客戶選擇的變體和數量。這有助於用戶跟踪他們選擇的產品，並且此功能還可以讓他們在結賬時自動查看他們將要處理的訂單的計算總價格。它還為用戶提供了編輯 WooCommerce 購物車頁面的能力。

WooCommerce 中購物車的好處

在 WooCommerce 購物平台中使用購物車有很多好處。在我們深入了解如何創建 WooCommerce 購物車頁面的分步指南之前，其中一些是：

旨在幫助客戶選擇要購買的一種或多種產品並繼續瀏覽其他產品。
當您繼續將產品添加到購物車時，它有助於計算產品的總價值。
顯示您選擇的產品的數量和變化，並相應地計算總值。
它可以通過單擊按鈕將客戶重定向到結帳頁面。
它可以附帶額外的 WooCommerce 購物車功能，例如訂單歷史記錄、保存購物車以備後用等。
用戶可以獲得帶有令人驚嘆的設計元素的 WooCommerce 購物車插件。

如何將購物車添加到 WooCommerce

現在，讓我們來看看將購物車添加到 WooCommerce 的過程。在本文結束時，您將能夠開始使用功能強大的電子商務平台銷售各種產品，該平台具有 WordPress 的最佳購物車插件。

第 1 步：前置要求安裝

要開始創建購物車和 WooCommerce 購物車設置過程，您需要在您的 WordPress 帳戶上安裝並激活某些插件項目。為此，您需要擁有最新版本的 WordPress 、 WooCommerce 、 Elementor page builder和 ShopReady WooCommerce Shop Builder 插件。

要安裝插件，請登錄您的 WordPress 帳戶，前往WordPress Dashboard > Plugins > Add New並一一搜索插件，然後單擊現在在安裝過程完成後單擊激活。 按照相同的步驟安裝所有必需的插件和程序。

第 2 步：使用 WooCommerce 購物車主題

現在，為了進一步推進我們的購物車功能構建過程，您需要安裝一個工作的 WooCommerce 主題以獲取一些附加功能。在這種情況下，我們可以使用 WooCommerce 購物車模板，而不是使用WooCommerce WordPress 主題。

這將大大減少定制和網站發布所需的時間。

要在您的網站上安裝一個有效的電子商務模板，首先創建一個新頁面並從WordPress Dashboard > Pages > Add New中為其命名，然後單擊您將被重定向到Elementor Editor屏幕。在這裡，您會找到ShopReady – Elementor 模板庫圖標。 單擊該圖標以訪問模板庫。挑選適合您品牌標識的任何模板，然後單擊“插入”以應用該模板。

等到模板完成其導入過程。

應該看起來像這樣。

如果您尚未將產品添加到 WooCommerce，您的產品部分可能看起來是空的。您應該立即在您的 WooCommerce 平台上添加您嘗試展示的產品。為此，您可以按照我們之前的指南 -如何將產品添加到 WooCommerce 商店。

每個 WooCommerce 產品都可以使用 WooCommerce 產品儀表板中的產品標題、描述、定價、折扣定價、圖像、元數據、變體等進行自定義。

第三步：產品頁面定制

要開始個性化產品頁面的過程，請前往 ShopReady – WooCommerce Builder 儀表板並選擇模板選項。從那裡，您可以構建一個基本的產品頁面，作為您自定義的起點。打開產品模板類別，然後在該類別中尋找單一產品設置。現在，從工具欄中選擇編輯圖標。

之後，將為您加載顯示Elementor Editor的屏幕。 只需單擊可以在 Elementor 界面右上角看到的加號，您就可以開始自定義頁面的過程。當涉及到您的頁面外觀和您想要使用的小部件時，當您可以插入其中的 Elementor 部分時，您可以使用多種選項。

第 3 步：使用 Elementor 小部件自定義 WooCommerce 商店的產品頁面

添加產品標題

由於您已經使用 Elementor 為您的 WooCommerce 產品頁面建立了主要部分結構，您現在可以開始添加產品標題的過程。您需要使用拖放方法將產品標題小部件放置在產品頁面上您想要的位置，以實現此目標。
通過轉到 Elementor 導航欄，選擇“內容”選項卡，然後在執行此操作後出現的子菜單中查找“編輯器刷新”選項，顯示正確的產品標題。要選擇合適的產品，請在位於演示產品下的下拉菜單中單擊其名稱。
您需要進入 WooCommerce 產品儀表板並在那裡添加或修改基本產品信息，以便此數據顯示正確的產品標題。這可以通過單擊“添加”或“編輯”按鈕來完成。

將特色圖片添加到產品頁面
之後，您需要確保您的產品同時具有圖片庫和特色圖片。為此，您可以使用 Elementor 隨附的電子商務多合一插件中包含的各種圖像小部件中的任何一種。
為了演示，我們將使用 ShopReady Thumbnail with Zoom 小部件，顧名思義，它具有縮放功能。如果您使用此小部件，您將能夠在客戶將鼠標移到您的產品圖像上時向他們顯示您的產品圖像的 WooCommerce 產品懸停縮放版本。
與以前一樣，您可以通過單擊演示產品選項的內容選項卡來選擇適當的產品圖像。
為定價小部件添加塊
產品定價塊是應該出現在您的電子商務產品頁面上的另一個重要組件。為了實現這一點，您需要通過適當的調整來更改 WooCommerce 產品屬性，並使用 ShopReady 價格小部件，該小部件需要位於產品標題下方。

為確保顯示正確的定價，請從“內容”選項卡的“演示產品”選項的下拉菜單中選擇產品標題。
添加產品描述
使用此 WooCommerce 產品插件產品描述小部件，您不僅可以選擇添加產品描述，還可以高度自定義描述。通過使用樣式選項卡，您將能夠更改產品描述向公眾顯示的方式。

添加添加到購物車功能
“添加到購物車”選項有助於客戶在進入結帳頁面之前將其他商品添加到購物車中，這是另一個非常重要的功能。
利用 ShopReady 添加到購物車小部件將允許您為電子商務商店的頁面配備強大的添加到購物車功能版本。在此小部件的幫助下，您將能夠讓您的客戶直接從“添加到購物車”塊中調整他們在購物車中的產品數量。
您還可以通過 WooCommerce 產品樣式 Elementor Style 選項卡修改 Elementor 添加到購物車按鈕的外觀。在這裡，您可以更改字體、顏色、背景、邊距、填充和其他屬性。

將元數據添加到產品頁面
如果您想為您的消費者提供更令人滿意的購物體驗，那麼您應該在添加產品時使用您添加到 WooCommerce 的元數據和產品屬性來實施WooCommerce 產品過濾器。
查找 ShopReady Meta 小部件並將其放在產品專用頁面上的“添加到購物車”按鈕下方。這將允許您顯示相關信息。
當您從位於“內容”選項卡的“演示產品”選項的下拉菜單中選擇適當的產品標題時，您的產品標籤和元數據應該會準確顯示。

將社交媒體分享按鈕添加到產品頁面
通過使用簡單的社交媒體分享按鈕塊，您可以讓您的消費者直接從他們購買的商品的 WooCommerce 產品頁面在社交媒體上分享您的產品帖子。您只能通過使用 Elementor Social Share 小部件提供的拖放功能來製作。

直接從“內容”選項卡，可以使用用戶選擇的任何社交媒體圖標、文本和可共享鏈接對塊進行個性化。此外，Elementor Style 選項卡允許用戶根據需要更改社交分享塊的視覺呈現。
這樣，您就完成了自定義 WooCommerce 產品頁面的基礎知識。
第 4 步：添加 WooCommerce 相關產品
利用 WooCommerce 產品插件中包含的相關產品小部件，您可以在產品頁面上顯示相關產品，這是促進在線銷售的絕佳策略。使用 ShopReady 相關產品小部件，您可以輕鬆構建一個分為多個部分的精美產品滑塊。
要使用小部件，只需將其拖放到單個產品塊下，然後從“內容”選項卡中選擇要在單個產品頁面上顯示的特定產品。

第 5 步：添加 WooCommerce 自定義結帳字段
如前所述，這是一個正常運行的電子商務平台的一個重要方面。使用 ShopReady 之類的 WooCommerce 商店構建器，您可以輕鬆地使用 WooCommerce 購物車短代碼並以這種方式實現功能性電子商務購物車，或者您可以使用 ShopReady 小部件來應用此功能。
要擁有一個正常運行的購物車，您首先需要在產品頁面上添加“添加到購物車”小部件。 我們已經這樣做了。因此，讓我們返回並創建購物車頁面本身，一旦將所有產品添加到購物車中，它們就會在其中顯示。
ShopReady – WooCommerce Shop Builder 允許用戶在兩個不同的購物車模板之間進行選擇，這些模板可從ShopReady 儀表板中使用。 從 ShopReady 儀表板中，單擊模板菜單現在啟用和編輯 ShopReady 提供的 WooCommerce 預設購物車模板。
通過創建新的 WooCommerce 購物車模板或編輯現有的購物車模板，您將被重定向到 Elementor 編輯器屏幕。
從這裡，您可以簡單地添加 ShopReady購物車小部件，您的購物車頁面將自動呈現其形式，並且使用 ShopReady 創建一個沒有插件的 WordPress 購物車就是如此簡單的過程。它不需要額外的插件或工具。
如果您的購物車中已經添加了任何產品，它應該看起來像這樣。
有了它，一個帶有功能性購物車按鈕的功能性 WooCommerce 購物車頁面。您還可以選擇使用 Elementor 進一步自定義購物車頁面。使用 Elementor，您可以自由更改購物車頁面的各個方面，從背景顏色到 Elementor 排版設置。
您還可以使用 WooCommerce 購物車短代碼。在這種情況下，您必須使用 Elementor ShortCode 小部件。
完成自定義商店頁面後，請確保點擊發布/更新以使更改對訪問者和客戶生效。
結論
創建 WooCommerce 自定義添加到購物車按鈕的整個過程似乎是一項艱鉅的任務，但隨著您閱讀本指南，您會發現使用正確的工具集創建此技術功能的過程一點也不難。 ShopReady WooCommerce Shop Builder 是一個完整的軟件包，它提供了從頭開始創建強大的電子商務平台所需的所有工具。
如果您在 ShopReady 或購物車創建過程中遇到任何問題，您可以隨時查看WooCommerce 購物車文檔。
關於 WooCommerce 購物車的常見問題
WordPress 有購物車嗎？
WordPress CMS 是一個準系統網站託管平台。它不包括任何購物車或電子商務相關功能。但由於它是一個開源平台，您可以自由使用其社區創建的任何電子商務工具、插件或模塊來將購物車添加到 WordPress 網站。
WooCommerce 有購物車嗎？
是的，WooCommerce 基礎插件帶有功能性購物車按鈕和購物車頁面。但它本質上非常簡約。要為購物車頁面增添趣味，您可以使用任意數量的WooCommerce 擴展，或者您可以充分利用 Elementor 和 ShopReady WooCommerce 頁面構建器的電子商務購物車頁面自定義選項。從 WooCommerce 購物車圖標到深入的頁面佈局，一切都可以使用 ShopReady 進行自定義。
如何在 WooCommerce 中創建自定義結帳頁面？
下載並安裝 ShopReady – WooCommerce Shop Builder。現在從 ShopReady 儀表板創建一個新的 WooCommerce 結帳頁面模板。您將被重定向到 Elementor 編輯器，從這裡您可以利用 ShopReady Checkout 小部件在 WooCommerce 中創建功能性自定義結帳頁面。