WooCommerce产品画廊每3行后添加循环横幅的技术实现问询

嘿，我刚好帮朋友实现过一模一样的需求，下面给你一步步拆解怎么在WooCommerce里搞定这个效果：

1. 先准备好你的静态横幅/区块内容 #

先在WordPress后台把要展示的横幅做好：

• 如果你喜欢用区块编辑器，直接新建一个「自定义HTML」或者「图像」区块，编辑好横幅的图片、链接和文案，然后复制这个区块的短代码（或者直接存好HTML代码）；
• 也可以去「外观」→「小工具」里新建一个自定义HTML小工具，把横幅内容放进去，记住小工具的ID。

2. 用代码实现每3行后插入横幅 #

这里有两种方案，选你顺手的来：

方案一：通过钩子函数（不用修改模板，更安全） #

把下面的代码粘贴到你当前主题（一定要用子主题！）的functions.php文件末尾：

add_action('woocommerce_after_shop_loop', 'insert_banner_after_three_rows', 10);
function insert_banner_after_three_rows() {
    global $woocommerce_loop;
    
    // 只在产品画廊页面生效（店铺页、分类页、标签页）
    if ( is_shop() || is_product_category() || is_product_tag() ) {
        // 每行2个产品 → 每6个产品就是3行，判断是否是6的倍数，且不是最后一个产品
        if ( ( $woocommerce_loop['loop'] % 6 == 0 ) && ( $woocommerce_loop['loop'] != $woocommerce_loop['total'] ) ) {
            echo '<div class="product-gallery-banner">';
            // 👇这里替换成你的横幅内容，二选一即可
            // 方式1：用区块短代码（比如你创建的区块ID是123）
            // echo do_shortcode('[block id="123"]');
            // 方式2：直接写HTML代码
            echo '<a href="https://你的横幅链接地址"><img src="https://你的横幅图片地址" alt="促销横幅"></a>';
            echo '</div>';
        }
    }
}

方案二：修改WooCommerce模板文件 #

如果你习惯改模板，就把WooCommerce的content-product.php文件复制到子主题的woocommerce/loop/目录下（没有的话就新建对应文件夹），然后在产品卡片的HTML结束后，添加这段代码：

global $woocommerce_loop;

// 每行2个产品，每3行（6个产品）后插入横幅，排除最后一个产品
if ( ( $woocommerce_loop['loop'] % 6 == 0 ) && ( $woocommerce_loop['loop'] != $woocommerce_loop['total'] ) ) {
    echo '<div class="product-gallery-banner">';
    // 这里放你的横幅内容，和上面一样选区块短代码或HTML
    echo '<a href="你的链接"><img src="你的图片地址" alt="横幅"></a>';
    echo '</div>';
}

3. 调整样式让横幅更美观 #

最后给横幅加一点CSS，确保它和产品画廊宽度一致，比如把下面的代码放到子主题的style.css里：

.product-gallery-banner {
    width: 100%;
    margin: 2.5rem 0;
    text-align: center;
}
.product-gallery-banner img {
    max-width: 100%;
    height: auto;
    border-radius: 4px; /* 可选：给图片加圆角 */
}

效果验证 #

设置好后，去你的产品画廊页看看：每页16个产品（8行），正好会在第3行和第6行下方各插入一个横幅，完全符合你要的「ROW1-3 → 横幅 → ROW4-6 → 横幅 → ROW7-8」的逻辑~

内容的提问来源于stack exchange，提问作者Manish Verma