如何在 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 商店中使用此插件，那么如果您能抽出一些时间来查看该插件，我将不胜感激。

如果您有任何反馈，那么您可以在下面的评论中告诉我，或者您可以在插件的支持论坛上发帖。