WooCommerce商品分类页无法将加入购物车按钮放入自定义div类

问题根因 #

woocommerce_template_loop_add_to_cart() 函数默认行为是直接输出HTML内容，而非返回可拼接的字符串。你在echo语句中直接拼接该函数时，函数会先执行输出加购按钮代码，之后才会输出你拼接的mywrapper容器内容，因此按钮始终渲染在容器外部。

解决方案 #

步骤1：调整PHP代码，捕获加购按钮的输出内容 #

使用PHP输出缓冲功能，将woocommerce_template_loop_add_to_cart()的输出转为字符串，再拼入容器结构中：

// 开启输出缓冲
ob_start();
// 调用加购按钮函数，此时内容会被缓冲而非直接输出
woocommerce_template_loop_add_to_cart();
// 获取缓冲内容并清空缓冲
$add_to_cart_btn = ob_get_clean();

// 拼接输出完整容器结构
echo '<div class="mywrapper">
        <div class="star-rating">
            <span style="width:'.( ( $average / 5 ) * 100 ) . '%">
                <strong itemprop="ratingValue" class="rating">'.$average.'</strong> '.__( 'out of 5', 'woocommerce' ).'
            </span>
        </div>
        '.$add_to_cart_btn.'
      </div>';

注：你之前写的第二段代码存在语法错误，不可以在已经开启的PHP标签内再次嵌套<?php ?>标签，直接调用函数即可

步骤2：添加CSS实现布局效果 #

给mywrapper类添加flex布局属性，实现评分靠左、加购按钮靠右，垂直对齐的效果：

.mywrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* 确保容器占满可用宽度 */
  margin: 8px 0; /* 可按需调整上下边距 */
}

内容的提问来源于stack exchange，提问作者N Miaoulis