如何在 WooCommerce 商品列表页中动态随机插入自定义内容-php教程-PHP中文网

如何在 WooCommerce 商品列表页中动态随机插入自定义内容

本文介绍如何在 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="'%20.%20esc_url(%20wp_get_attachment_image_url(%20123,%20'full'%20)%20)%20.%20'" 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="'%20.%20esc_url(%20get_template_directory_uri()%20.%20'/assets/images/banner-03.svg'%20)%20.%20'" 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; 
}