本文介绍如何在 woocommerce 商品归档页（shop loop）中，每隔 n 个商品随机插入一张 banner 图片，避免硬编码、提升展示多样性，并提供可直接复用的健壮代码实现。
本文介绍如何在 woocommerce 商品归档页（shop loop）中，每隔 n 个商品随机插入一张 banner 图片，避免硬编码、提升展示多样性，并提供可直接复用的健壮代码实现。
在 WooCommerce 主题开发中，常需在商品列表页（如首页 Shop 页面）的循环中穿插营销 Banner、广告位或个性化提示。原方案虽能按固定间隔（如每 3 个商品后）插入内容，但始终显示同一张图片，缺乏灵活性与用户新鲜感。要实现“每次插入都从预设选项中真正随机选取一项”，关键在于：正确构建 HTML 字符串数组 + 安全调用 array_rand() + 精准控制触发时机。
以下是优化后的完整解决方案（已适配 WooCommerce 7.0+ 及 PHP 8.x）：
add_action( 'woocommerce_shop_loop', 'add_random_custom_content_to_shop_loop' );
function add_random_custom_content_to_shop_loop() {
global $wp_query;
// ✅ 预设多组 HTML 内容（支持任意 HTML，不限于 img）
$banners = [
'<img src="' . esc_url( wp_get_attachment_image_url( 123, 'full' ) ) . '" alt="Promo Banner 1" loading="lazy">',
'<div class="custom-banner"><h4>✨ Limited Time Offer!</h4><p>Free shipping on orders over $50</p></div>',
'<img src="' . esc_url( get_template_directory_uri() . '/assets/images/banner-03.svg' ) . '" alt="Seasonal Deal" loading="lazy">'
];
// ✅ 获取当前循环列数（用于响应式对齐参考，非必需但推荐）
$columns = wc_get_loop_prop( 'columns', 4 );
// ✅ 每隔 3 个商品插入一次（跳过第 0 个位置，即首商品前不插）
// 注意：$wp_query->current_post 从 0 开始计数，因此 % 3 == 0 对应第 1、4、7... 个商品（索引 0,3,6...）
// 若希望插在「第 3、6、9... 个商品之后」，应改为 ( $wp_query->current_post + 1 ) % 3 === 0
if ( $wp_query->current_post > 0 && ( $wp_query->current_post % 3 ) === 0 ) {
// ✅ 真正随机选取一个 Banner
$random_key = array_rand( $banners );
echo '<div class="woocommerce-random-banner">' . $banners[ $random_key ] . '</div>';
}
}关键改进说明：
- 安全构建数组：直接将 HTML 字符串存入数组，而非拼接赋值语句（原错误写法 $input = array("$input1 = '...'") 会把变量声明当字符串存储，导致无法调用）；
- 单次随机抽取：array_rand($banners, 1) 返回单个键名（非数组），直接 $banners[$random_key] 即可获取对应 HTML；
-
输出安全加固：使用 esc_url() 处理图片路径，避免 XSS 风险；为 Banner 包裹语义化 并添加 class 便于 CSS 控制；
- 逻辑健壮性：显式检查 $wp_query->current_post > 0，确保不在首个商品前插入（避免干扰布局）；
- 扩展友好：$banners 数组可随时增删项，支持纯 HTML 片段（如带按钮的促销模块），无需修改核心逻辑。
注意事项：
- 若 Banner 需响应式宽度，请在主题 CSS 中添加：
.woocommerce-random-banner { grid-column: 1 / -1; /* 横跨整行（配合 CSS Grid 布局） */ margin: 2rem 0; } .woocommerce-random-banner img { width: 100%; height: auto; } - 避免在 woocommerce_shop_loop 中执行耗时操作（如数据库查询），本方案纯内存操作，性能无压力；
- 如需「不重复随机」（即一轮内不连续出现相同 Banner），需额外维护已用键名状态，但对普通营销场景非必需。
通过此方案，你不仅实现了动态随机 Banner 插入，更构建了一套可维护、可扩展、符合 WordPress 最佳实践的内容注入模式。
