如何在WooCommerce产品目录的6个产品后插入USP模块

我的需求是在顾客浏览店铺产品列表时，在产品行之间插入“免费配送”这类独特卖点（USP）模块，预期效果如下：

目前尝试用woocommerce_before_shop_loop_item或woocommerce_after_shop_loop_item钩子，但没法精准插入到产品行之间。当前的PHP代码会在指定分类（propagation-trays、garden-accessories）下，第4个产品上方显示USP模块，之后每9个产品重复一次：

function display_divs_after_six_products() {
  global $woocommerce_loop;
 if ( is_product_category( array( "propagation-trays", "garden-accessories" ) ) ) { 
  if ( 0 == ( $woocommerce_loop['loop'] - 4 ) % 9 ) {
   echo '<div class="productbreak">';
    echo '<div class="productcontainerfirst">';
      echo '<div class="producticon">';
        echo '<img src="https://thefarmdream.com/wp-content/uploads/2022/12/Checkmark.png" alt="Checkmark">';
      echo '</div>';
      echo '<div class="producttext">';
        echo '<p><a href="https://thefarmdream.com/packaging-shipping/">Shipping within the <span style="color:#eebb70; font-weight:700;">EU</span></a></p>';
      echo '</div>';
    echo '</div>';
   echo '</div>';
  }
 }
}
add_action( 'woocommerce_before_shop_loop_item', 'display_divs_after_six_products', 10 );

搭配的CSS：

.productbreak {
    height: 50px;
    overflow: hidden;
    width: 100%;
    padding: 16px;
    font-size: 14px;
    }
    
.productcontainerfirst {
    overflow: hidden;
    float:right;
}       
    
.producticon {
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    }
    
.producttext {
    display:inline-block;
}

我感觉方向可能有误，希望修复现有代码或者提供新思路，也考虑过拆分现有产品列表的UL，插入USP的div后让列表继续显示，求相关解决方案。

修正方案：精准插入行间USP模块 #

WooCommerce产品列表以<ul>包裹，每个产品是<li>。要实现行与行之间的插入，需利用循环计数配合合适的钩子，同时通过CSS确保模块占满整行：

修正后的PHP代码

function display_usp_between_product_rows() {
    global $woocommerce_loop;
    
    // 仅在指定分类页面生效
    if ( !is_product_category( array( "propagation-trays", "garden-accessories" ) ) ) {
        return;
    }
    
    // 根据你的布局修改每行产品数量
    $products_per_row = 3;
    // 触发位置：第4个产品后（第一行结束），之后每9个产品（3行）重复一次
    $trigger_point = ( $woocommerce_loop['loop'] - $products_per_row ) % 9 == 0;
    
    if ( $trigger_point && $woocommerce_loop['loop'] > $products_per_row ) {
        // 输出USP模块，添加clearfix确保换行
        echo '<div class="product-break usp-module clear">';
            echo '<div class="usp-container">';
                echo '<div class="usp-icon">';
                    echo '<img src="https://thefarmdream.com/wp-content/uploads/2022/12/Checkmark.png" alt="Checkmark">';
                echo '</div>';
                echo '<div class="usp-text">';
                    echo '<p><a href="https://thefarmdream.com/packaging-shipping/">Shipping within the <span style="color:#eebb70; font-weight:700;">EU</span></a></p>';
                echo '</div>';
            echo '</div>';
        echo '</div>';
    }
}
// 选择woocommerce_after_shop_loop_item钩子，确保在产品<li>之后输出
add_action( 'woocommerce_after_shop_loop_item', 'display_usp_between_product_rows', 15 );

优化后的CSS

/* 确保USP模块占满整行，清除浮动 */
.product-break.usp-module {
    width: 100%;
    padding: 16px;
    font-size: 14px;
    margin: 15px 0;
    clear: both;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.usp-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.usp-icon img {
    width: 20px;
    height: 20px;
}

.usp-text {
    margin: 0;
}

.clear {
    clear: both;
}

进阶思路：直接修改产品列表模板 #

如果需要更极致的控制，可以通过重写WooCommerce模板实现：

1. 将WooCommerce核心的archive-product.php复制到主题目录的woocommerce文件夹下
2. 找到产品循环区域，在循环内插入计数判断：

if ( woocommerce_product_loop() ) {
    woocommerce_product_loop_start();
    while ( have_posts() ) {
        the_post();
        wc_get_template_part( 'content', 'product' );
        
        global $woocommerce_loop;
        $products_per_row = 3;
        // 每3行（9个产品）插入一次，第一行后首次显示
        if ( ( $woocommerce_loop['loop'] - $products_per_row ) % 9 == 0 && $woocommerce_loop['loop'] > $products_per_row ) {
            // 直接在这里输出USP模块HTML代码
        }
    }
    woocommerce_product_loop_end();
}

这种方式能完全控制插入时机和位置，适合高度定制的场景。

内容的提问来源于stack exchange，提问作者Raymond Meijer