本文介绍如何在WooCommerce结账页面实现一个智能的商品推荐区块。当用户购物车中包含特定商品变体时，该区块会推荐另一个相关变体。关键在于，一旦用户点击推荐并成功将新变体添加到购物车，该推荐区块将自动隐藏，避免重复推荐，确保用户体验流畅。通过PHP后端逻辑判断购物车状态，而非依赖易受页面刷新影响的JavaScript，实现这一持久化控制。
在电子商务网站中，通过在结账页面提供相关商品的推荐或加购选项，可以有效提升平均订单价值。然而，一个常见的用户体验问题是，当用户点击推荐并成功将商品添加到购物车后，由于页面刷新，推荐区块可能会再次出现，造成重复推荐和用户困扰。为了解决这个问题，我们需要一个基于服务器端（PHP）的解决方案，以确保推荐区块的显示状态能够准确反映当前购物车的实际内容。
问题分析：JavaScript解决方案的局限性
许多开发者可能会首先想到使用JavaScript来隐藏点击后的区块。例如，在用户点击“添加新商品”按钮后，通过JavaScript移除或隐藏对应的HTML元素。然而，这种方法存在一个核心缺陷：当商品被添加到购物车时，页面通常会重新加载（或者通过AJAX更新后仍可能触发DOM重绘），导致JavaScript所做的修改失效，区块重新显示。因此，我们需要一种能够在页面加载时就判断是否显示区块的机制，这正是PHP的优势所在。
解决方案：基于PHP的购物车状态判断
WooCommerce提供了强大的PHP API来访问和操作购物车数据。我们可以利用这一点，在渲染结账页面之前，检查购物车中是否已经包含了我们想要推荐的商品。如果已经存在，则不显示推荐区块；如果不存在，并且满足其他推荐条件，则显示。
核心逻辑如下：
- 定义触发条件： 首先，确定什么情况下应该显示推荐区块。例如，当购物车中包含特定商品ID和变体ID（如商品ID 100，变体ID 111）时。
- 定义排除条件： 其次，确定什么情况下不应该显示推荐区块。例如，当购物车中已经包含了被推荐的商品ID和变体ID（如商品ID 100，变体ID 112）时。
- 优先级处理： 排除条件应优先于触发条件。也就是说，即使触发条件满足，但如果排除条件也满足，则最终结果是不显示区块。
实现代码
以下PHP代码片段应放置在您的主题 functions.php 文件中，或通过自定义插件实现。
add_action('woocommerce_review_order_before_submit', 'displays_cart_products_feature_image');
/**
* 根据购物车内容动态显示或隐藏商品推荐区块。
* 该函数挂载到 'woocommerce_review_order_before_submit' 动作，
* 在结账页面的订单总览区域提交按钮前执行。
*/
function displays_cart_products_feature_image() {
// 定义需要监控的商品ID，这里是基础商品ID
$target_product_id = 100;
// 定义触发推荐的变体ID (例如，当购物车有变体111时，推荐112)
$trigger_variation_id = 111;
// 定义被推荐的变体ID (如果购物车已有此变体，则不再推荐)
$recommended_variation_id = 112;
$should_display_block = false; // 初始假设不显示区块
// 第一次遍历购物车：检查是否满足触发推荐的条件
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
$item_data = $cart_item['data']; // 获取商品数据对象
// 检查商品ID是否匹配，并且变体ID是否为触发推荐的变体
if ( $item_data->get_id() == $target_product_id && $cart_item['variation_id'] == $trigger_variation_id ) {
$should_display_block = true; // 满足触发条件，标记为应该显示
break; // 找到即停止遍历，提高效率
}
}
// 第二次遍历购物车：检查是否满足排除推荐的条件
// 如果购物车中已经包含被推荐的商品变体，则不应显示推荐区块
if ( $should_display_block ) { // 只有在满足触发条件的情况下才进行排除判断
foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
$item_data = $cart_item['data'];
// 检查商品ID是否匹配，并且变体ID是否为被推荐的变体
if ( $item_data->get_id() == $target_product_id && $cart_item['variation_id'] == $recommended_variation_id ) {
$should_display_block = false; // 满足排除条件，标记为不显示
break; // 找到即停止遍历
}
}
}
// 根据最终的 $should_display_block 状态决定是否输出HTML区块
if ( $should_display_block ) {
echo '
<div id="u-1" class="your-custom-upsell-block">
<p>您可能还喜欢：</p>
<a href="/?add-to-cart=' . esc_attr($target_product_id) . '&variation_id=' . esc_attr($recommended_variation_id) . '" class="button alt">添加新商品</a>
</div>';
}
}代码解析与注意事项
- add_action('woocommerce_review_order_before_submit', ...): 这个WordPress动作钩子确保我们的函数在WooCommerce结账页面的订单总览（Review Order）部分、提交按钮之前执行。这是一个常见的放置加购或推荐内容的区域。
-
变量定义:
- $target_product_id: 定义了我们关注的商品基础ID。
- $trigger_variation_id: 当购物车中存在此变体时，会触发推荐逻辑。
- $recommended_variation_id: 这是我们希望推荐给用户的变体ID。
- $should_display_block 标志: 这是一个布尔变量，用于控制推荐区块的最终显示状态。它初始设置为 false。
-
第一次购物车遍历 (触发条件):
- 我们遍历购物车中的每一个商品项 (WC()->cart->get_cart())。
- $item_data->get_id() 用于获取当前购物车商品的ID。
- 如果找到商品ID和变体ID都匹配 $target_product_id 和 $trigger_variation_id 的商品，说明触发了推荐条件，将 $should_display_block 设置为 true，并立即跳出循环。
-
第二次购物车遍历 (排除条件):
- 只有当 $should_display_block 已经是 true（即触发条件已满足）时，我们才进行第二次遍历。
- 这次遍历的目的是检查购物车中是否已经包含了 $recommended_variation_id。
- 如果找到，说明用户已经添加了推荐的商品，此时应将 $should_display_block 重新设置为 false，并跳出循环。
- 条件输出: 最后，根据 $should_display_block 的最终值，决定是否通过 echo 输出HTML区块。
- 推荐链接: href="/?add-to-cart=100&variation_id=112" 是WooCommerce添加商品到购物车的标准URL格式。esc_attr() 函数用于确保输出的属性值是安全的。
- CSS样式: 在输出的 div 标签中，我们添加了 id="u-1" 和 class="your-custom-upsell-block"。您可以根据这些ID或类名在主题的CSS文件中添加样式，以美化推荐区块的显示。
总结
通过上述PHP后端逻辑，我们能够可靠地控制WooCommerce结账页面上推荐区块的显示。这种方法克服了JavaScript解决方案在页面刷新时状态丢失的限制，确保了推荐逻辑的持久性和用户体验的一致性。开发者可以根据自己的业务需求，灵活调整 $target_product_id、$trigger_variation_id 和 $recommended_variation_id，甚至扩展逻辑以处理更复杂的推荐场景，例如基于商品分类、标签或用户历史行为的推荐。始终建议在子主题的 functions.php 文件中添加此类代码，或创建一个自定义插件，以避免主题更新时代码被覆盖。
