如何在循环中以列表视图显示WooCommerce产品并调用指定动作

我来帮你搞定这个需求！你的核心目标是在自定义循环里用列表展示指定分类的WooCommerce产品，同时调用单个产品的summary动作——这个动作会输出产品标题、价格、添加到购物车按钮等核心信息。下面是调整后的完整代码和关键说明：

修改后的完整代码 #

<ul class="products">
    <?php
    // 自定义查询参数：可添加分类条件，指定产品分类展示
    $args = array(
        'post_type'      => 'product',
        'posts_per_page' => 3,
        // 如果需要指定分类，取消注释并替换分类slug
        // 'tax_query'      => array(
        //     array(
        //         'taxonomy' => 'product_cat',
        //         'field'    => 'slug',
        //         'terms'    => 'your-category-slug', // 替换为你的目标分类slug
        //     ),
        // ),
    );

    $loop = new WP_Query( $args );
    $interval = 1;

    // 声明全局$product变量，确保woocommerce钩子能正确识别当前产品
    global $product;

    if ( $loop->have_posts() ) :
        while ( $loop->have_posts() ) : $loop->the_post();
            // 用WooCommerce推荐的函数获取产品对象
            $product = wc_get_product( get_the_ID() );
    ?>

            <?php if ( $interval % 2 != 0 ) : ?>
                <img class="arch" src="/wp-content/uploads/2019/02/main-pages-blue-background-arch-top.png">
            <?php endif; ?>

            <li class="product" style="<?php echo ( $interval % 2 != 0 ? 'background-color: #f2fafd' : '' ); ?>">
                <div class="content">
                    <a href="<?php echo get_permalink(); ?>" title="<?php echo esc_attr( get_the_title() ?: get_the_ID() ); ?>">
                        <?php do_action( 'woocommerce_before_single_product' ); ?>
                    </a>

                    <!-- 调用单个产品summary动作，输出核心产品信息 -->
                    <div class="product-summary">
                        <?php do_action( 'woocommerce_single_product_summary' ); ?>
                    </div>
                </div>
            </li>

            <?php if ( $interval % 2 != 0 ) : ?>
                <img class="arch arch-bottom" src="/wp-content/uploads/2019/02/main-pages-white-background-arch-top.png">
            <?php endif; ?>

            <?php $interval += 1; ?>
        <?php endwhile; ?>
        <?php wp_reset_postdata(); // 自定义WP_Query后用此函数重置数据，替代wp_reset_query()更规范 ?>
    <?php else : ?>
        <li class="no-products">暂无产品</li>
    <?php endif; ?>
</ul>

关键调整说明 #

1. 产品对象初始化：

   • 替换了过时的get_product()为WooCommerce官方推荐的wc_get_product()
   • 声明全局$product变量，确保woocommerce_single_product_summary钩子能正确读取当前产品的数据

2. 分类筛选（可选）：

   • 代码中注释了tax_query配置块，取消注释并修改terms为你的产品分类slug，就能精准展示指定分类的产品

3. 钩子调用修复：

   • 修正了原代码中do_action未用PHP标签包裹的错误
   • 将woocommerce_single_product_summary放在独立容器中，方便后续样式自定义

4. 数据重置优化：

   • 用wp_reset_postdata()替代wp_reset_query()，这是自定义WP_Query后重置全局数据的标准做法

5. 容错处理：

   • 添加了空产品判断，避免无产品时输出空列表

额外自定义建议 #

如果想调整woocommerce_single_product_summary的输出内容，可以在主题functions.php中添加钩子调整代码，比如：

// 移除添加到购物车按钮
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

// 调整产品标题的显示优先级
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 10 );

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