如何在 WooCommerce 結帳頁面上修改購物車詳細信息

你們中的大多數人都知道 WooCommerce 不允許客戶從結帳頁面更新購物車。 這意味著您無法從結帳頁面更改數量或刪除產品。 客戶需要返回購物車頁面，更新購物車，然後再次進入結帳頁面。 這導致客戶不得不再次填寫所有必需的信息。 這對客戶來說有點令人沮喪，尤其是對於來賓用戶（佔絕大多數）。

在這篇文章中，我們將討論如何在 WooCommerce 的結帳頁面上更新購物車。 我在辦公室的有趣星期五活動中開發了此功能。 在Fun Fridays中，我們嘗試用一整天的時間做與人的核心工作活動無關的事情。

首先，讓我們看一下 WooCommerce Checkout 頁面上的購物車詳細信息表：

在這裡，客戶不能編輯產品的數量或刪除它。 因此，我們希望提供更改數量和刪除產品的功能，而無需讓您的客戶離開結帳頁面。

讓我們開始

如果您想跳過此說明，而是想在您的商店中實現該功能，那麼您可以下載我創建的插件。

1.在結帳頁面的購物車部分進行UI更改

我們需要修改“您的訂單”表中的“產品”列。 我們需要為購物車中的每個商品添加“刪除”圖標和“數量選擇器”。

為此，WooCommerce 提供了一個過濾器，允許您修改每個購物車項目的產品名稱行： woocommerce_cart_item_name 。

您的訂單表上顯示的選定數量也可以使用另一個 WooCommerce 過濾器進行修改： woocommerce_checkout_cart_item_quantity 。

我們將使用這兩個過濾器，並允許客戶在結帳頁面上編輯購物車詳細信息。 您可以通過創建新插件來實現以下更改。

首先，我們不需要您的訂單表中顯示的每件商品的數量。 所以我們將使用過濾器並返回一個空白字符串，這樣它將覆蓋 WooCommerce 數據。

在此之後，我們將使用過濾器woocommerce_cart_item_name修改產品名稱行並添加數量字段和刪除圖標。

在這裡，我們使用is_checkout()函數來確保我們僅在結帳頁面上應用更改。 如上面的代碼片段所述，我已將其分為 3 個步驟。

第 1 步：添加刪除圖標
在此步驟中，我們將為購物車中的每個項目添加刪除圖標。 這與 WooCommerce 購物車中使用的圖標相同。

在這裡，我們使用了 WooCommerce 函數get_remove_url() 。 我們需要為每個購物車項目傳遞 $cart_key。 因此 get_remove_url() 函數將返回一個唯一的 URL 來刪除每個購物車項目。

第 2 步：添加產品名稱
由於我們正在修改產品名稱行，我們還需要在行中添加產品名稱以及新字段。 我們將從過濾器本身獲取產品名稱，它作為第一個參數傳遞。 在我們的例子中是 $product_title。

增加 WooCommerce 商店的銷售額

“有趣的是，WooCommerce Abandoned Cart Pro 增加了高價值產品的銷售量。我原以為該插件會增加客戶不介意是否購買的低價值產品（例如食品）的銷售，但我看到它可以為需要如此重大購買決定的產品帶來不同，我感到更加驚訝。” - Barn2 Media 運營總監 Katie Keith

第 3 步：添加數量選擇器
最後，我們將添加數量選擇器。 在這裡，我們將使用 WooCommerce 函數woocommerce_quantity_input() 。

我們需要為函數“input_name”、“input_value”、“max_value”、“min_value”提供四個參數。

• input_name：它將包含名稱為“cart”的數組，在此您需要傳遞購物車項目鍵和數量。
• input_value：它將包含產品的選定數量。
• max_value：這將是產品的最大庫存數量。
• min_value：它將是數量選擇器的最小值。

完成上述所有步驟後，它現在將在結帳頁面的您的訂單表上顯示刪除按鈕和數量選擇器。

在這裡，我們有一個條件if ( is_checkout() ) {條件。 這是必要的，原因如下所述。

我們用於修改產品名稱列值 (woocommerce_cart_item_name) 的過濾器也會在您商店的購物車頁面上調用。 因此，為了確保我們編寫的代碼不會破壞購物車頁面的功能，我們確保更改僅應用於結帳頁面。

2. 通過 Ajax 調用更新購物車

添加這麼多是行不通的，我們需要確保當客戶更改數量時，它將反映在購物車總數中。

改變數量

我們需要 Ajax 調用來更改購物車總數。 因此，當客戶更改數量時，我們需要採取行動並更改購物車總數。

現在，我們將“add_quantity.js”文件排入網站頁腳，並確保在結帳頁面時包含該文件。

現在我們需要在 Javascript 文件中添加函數，該函數將調用 ajax 來更改購物車總數。

上面的 javascript 將調用 ajax，我們將在其中傳遞修改後的結帳表單的數據。 但是當我們點擊數量圖標時它會調用。 因此它將包含數量的修改值。

現在，我們需要為 ajax 添加功能，它將根據修改的數量更改購物車總數。

當我們在結帳頁面修改數量時，將調用上述函數並更改購物車總數。 我們在函數中使用了 WooCommerce 函數。

我們使用“set_quantity()”、“calculate_totals()”、“woocommerce_cart_totals()”函數來修改購物車總數並將其顯示在結帳頁面的 Your Order 表中。

set_quantity() ：此函數將修改後的數量設置到購物車。

我們已經從 javascript 函數發送了數據，該函數將具有修改後的數量值，因此我們將使用該修改後的值並將其設置到購物車。

calculate_totals() ：使用此函數，我們指示再次計算購物車的總數。

woocommerce_cart_totals() ：該函數用於顯示修改後的購物車。

一旦完成上述所有計算，它將返回到我們從中調用 ajax 函數的 javascript。 在該函數的響應中，我們將“觸發” “update_checkout”函數，該函數將依次修改購物車並將其顯示給用戶。

我們需要您的訂單表的“刪除”按鈕的 CSS。 所以它應該看起來像 WooCommerce 購物車刪除按鈕。 所以我們需要為它添加CSS。 您可以在網站的頁腳中添加 CSS。

添加後，我們需要將 CSS 賦予 CSS 文件中的刪除按鈕。 CSS 如下所示。

因此，我們已經準備好可以在 WooCommerce 的結帳頁面上修改數量的功能。

執行上述操作後，結帳頁面上的 Your order 表將如下所示：

它將為結帳頁面的您的訂單表的每個項目添加數量選擇器和刪除圖標。

我將其構建為一個插件，名為 Change Quantity on Checkout for WooCommerce，於 2016 年 9 月發布。它用於 400 多家 WooCommerce 商店。 如果您已經在您的 WooCommerce 商店中使用此插件，那麼如果您能抽出一些時間來查看該插件，我將不勝感激。

如果您有任何反饋，那麼您可以在下面的評論中告訴我，或者您可以在插件的支持論壇上發帖。