如何添加产品图片 WooCommerce 结帐页面

已发表: 2022-01-08

添加产品图片结帐 WooCommerce 如果您熟悉 WooCommerce，那么您就知道开设在线商店是一个不错的选择。 与其他在线商店平台相比，购物车功能脱颖而出。 但是，它缺少一些几乎所有其他电子商务软件中开箱即用的基本功能，例如结帐页面上的产品图片。

如果您查看结帐页面，您将看到订单审核表显示产品名称、库存和价格，但不显示每个产品的图像。 如果您是 WooCommerce 店主，您必须知道默认结帐页面并没有那么优化。

优化 WooCommerce Checkout 客户体验

因此，这意味着 WooCommerce 结帐页面需要大量自定义，以使其对转换更加友好并增加您的转换。

如果您在 WooCommerce 结账时自定义客户用户体验，您可能还想查看这篇关于如何在结账后创建 WooCommerce 重定向的文章，并可能使用此插件——WooCommerce 结账后重定向插件以增强客户结账体验。

默认 WooCommerce 结帐页面

这是结帐页面的默认外观： 订单详情的默认外观

这就是我进来的地方； 我会给你一个专家的解决方案，这将帮助你提高结帐页面的转化率。

这个简短的教程将向您展示如何在不覆盖模板的情况下在结帐页面上添加产品图片。 一些解决方案可以帮助您覆盖模板，但这可能会与主题产生冲突。 使用过滤器可以轻松完成。

在 WooCommerce 商店的结帐页面上添加产品图片的步骤。

以下是您需要遵循的步骤：

  1. 登录您的 WordPress 站点并以管理员用户身份访问仪表板。
  2. 从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。 当主题编辑器页面打开时，查找主题函数文件，我们将在其中添加将在结帐页面显示产品图像的函数。
  3. 将以下代码添加到php文件中：
 /**
 * @snippet WooCommerce 显示产品图片@结帐页面
*/

add_filter('woocommerce_cart_item_name', 'ts_product_image_on_checkout', 10, 3);

功能 ts_product_image_on_checkout( $name, $cart_item, $cart_item_key ) {  

    /* 如果不是结帐页面则返回 */
    如果（！is_checkout（））{
        返回$名称；
    }

    /* 获取产品对象 */
    $_product = apply_filters('woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key);

    /* 获取产品缩略图 */
    $thumbnail = $_product->get_image();

    /* 将包装器添加到图像并添加一些 css */
    $image = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'
                . $缩略图。
            '</div>';

    /* 将图像添加到名称并返回它 */
    返回 $image 。 $名称;

}
  1. 要查看此代码的结果，您需要刷新结帐页面，您应该会看到： 结果

您现在应该能够看到如上所示的所有产品图片。

此外，您可以选择在用户下订单后将图像添加到订单支付页面。 这是订单支付页面的默认设置： 默认订单支付页面添加产品图片 WooCommerce 结帐页面

这可以用来优化页面，用户可以看到他们购买的商品的图片，除了简短的描述。 执行此操作非常简单，您只需按照以下步骤操作即可。

在 WooCommerce 商店的订单支付页面上添加产品图片的步骤。

  1. 登录您的 WordPress 站点并以管理员用户身份访问仪表板。
  2. 从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。 当主题编辑器页面打开时，查找主题函数文件，我们将在其中添加将在订单支付页面显示产品图像的函数。
  3. 将以下代码添加到php文件中：
 /**
* @snippet WooCommerce 显示产品图片@订单支付页面
*/

add_filter('woocommerce_order_item_name', 'ts_product_image_on_order_pay', 10, 3);

功能 ts_product_image_on_order_pay( $name, $item, $extra ) {

/* 如果不是结帐页面则返回 */

如果（！is_checkout（））{

返回$名称；

}

$product_id = $item->get_product_id();

/* 获取产品对象 */

$_product = wc_get_product($product_id);

/* 获取产品缩略图 */

$thumbnail = $_product->get_image();

/* 将包装器添加到图像并添加一些 css */

$image = '<div class="ts-product-image" style="width: 52px; height: 45px; display: inline-block; padding-right: 7px; vertical-align: middle;">'

. $缩略图。

'</div>';

/* 将图像添加到名称并返回它 */

返回 $image 。 $名称;

}
  1. 要查看此代码的结果，您需要刷新 Order Pay 页面，您应该会看到： 为订单支付页面添加产品图片 WooCommerce 结帐页面结果

结论

在这篇文章中，我强调了两个可以添加产品图片的区域，即订单支付页面和结帐页面。 我不建议覆盖主题，因为这会与主题产生冲突。 建议使用过滤器来执行此操作，如上面的简单步骤所示。

类似文章

  1. 用于结帐页面定制的 23 个最佳 WooCommerce 插件
  2. 如何在 WooCommerce 中设置特色产品
  3. 如何添加自定义 WooCommerce 付款图标结帐页面
  4. 如何按类别显示 WooCommerce 产品
  5. 如何在 WooCommerce 结帐页面上更改 PayPal 图标
  6. 如何删除已添加到您的购物车消息 WooCommerce
  7. WooCommerce 结帐后重定向：结帐后如何自动重定向到自定义页面
  8. 如何删除默认产品排序 WooCommerce
  9. 如何调整 WooCommerce 产品图像的大小
  10. 如何在 WooCommerce 中的产品上添加 GTIN 编号
  11. 如何在 WooCommerce 的商店页面中隐藏所有产品
  12. 如何对 WooCommerce 类别进行排序以获得更好的用户体验
  13. 如何使用 WooCommerce 销售数字产品
  14. 如何隐藏 WooCommerce 优惠券代码字段
  15. 如何在 WooCommerce 结帐页面上隐藏 PayPal 图标
  16. 如何从 WooCommerce 结帐中删除帐单详细信息
  17. 如何跳过购物车并重定向到结帐页面 WooCommerce
  18. 如何在 WooCommerce 中更改结帐按钮文本 [下订单]
  19. 如何检查插件在 WordPress 中是否处于活动状态 [3 种方式]
  20. 如何将删除图标添加到 WooCommerce 结帐页面