WooCommerce短代码展示指定变体产品：问题排查与方案咨询

当前实现不正确，核心问题在于误用了WooCommerce的模板和数据处理逻辑：

1. 产品变体（product_variation）是依附于父变量产品（product类型，product_type为variable）的子帖子，本身并非独立的“可直接渲染的产品”，wc_get_template_part('content', 'product')是为父产品设计的模板，无法正确识别变体数据，导致标题、链接错误。
2. 直接循环变体帖子时，WooCommerce的循环属性（如产品类型、变体上下文）未正确设置，导致样式和功能逻辑失效。

针对你遇到的3个具体问题：

• 标题和链接错误：content-product模板默认读取父产品的标题和链接，而非变体数据；且变体帖子的post_parent是父产品ID，直接setup_postdata($variation)后，部分WooCommerce函数仍会优先调用父产品信息。
• 样式未正确应用：WooCommerce的产品样式依赖woocommerce类下的产品结构，且循环中未正确设置变体的上下文，导致样式规则不匹配。
• 加入购物车链接冗余：变体的加入购物车逻辑需要关联父产品ID，直接渲染变体时，模板错误拼接了参数，导致URL冗余。

正确的思路是：先查询所有包含“blue”颜色变体的父变量产品，再在每个父产品中提取对应变体，然后用自定义逻辑或WooCommerce提供的变体渲染方法展示。

以下是修正后的完整代码：

// 短代码函数
function custom_blue_variations_shortcode() {
    ob_start();

    // 查询所有包含蓝色颜色变体的父变量产品
    $parent_products = new WP_Query(array(
        'post_type' => 'product',
        'post_status' => 'publish',
        'posts_per_page' => -1,
        'tax_query' => array(
            array(
                'taxonomy' => 'product_type',
                'field' => 'slug',
                'terms' => 'variable'
            )
        ),
        'meta_query' => array(
            array(
                'key' => '_product_attributes',
                'value' => 'pa_color',
                'compare' => 'LIKE'
            )
        )
    ));

    if ($parent_products->have_posts()) {
        echo '<div class="woocommerce columns-3">'; // 设置列数和WooCommerce容器类
        woocommerce_product_loop_start();

        while ($parent_products->have_posts()) {
            $parent_products->the_post();
            $product = wc_get_product(get_the_ID());
            
            // 获取当前产品中颜色为blue的变体
            $blue_variations = $product->get_children(array(
                'meta_query' => array(
                    array(
                        'key' => 'attribute_pa_color',
                        'value' => 'blue'
                    )
                )
            ));

            foreach ($blue_variations as $variation_id) {
                $variation = wc_get_product($variation_id);
                
                // 跳过未发布的变体
                if (!$variation || !$variation->is_publish()) continue;

                // 自定义渲染变体（替代content-product模板）
                ?>
                <li class="product">
                    <a href="<?php echo esc_url($variation->get_permalink()); ?>" class="woocommerce-loop-product__link">
                        <!-- 变体图片 -->
                        <?php if ($variation_image = $variation->get_image()) : ?>
                            <?php echo $variation_image; ?>
                        <?php else : ?>
                            <?php echo $product->get_image(); ?>
                        <?php endif; ?>
                        <!-- 变体标题：父产品标题 + 变体属性 -->
                        <h2 class="woocommerce-loop-product__title">
                            <?php echo esc_html($product->get_name()); ?> - <?php echo esc_html($variation->get_attribute('pa_color')); ?>
                        </h2>
                        <!-- 变体价格 -->
                        <span class="price"><?php echo $variation->get_price_html(); ?></span>
                    </a>
                    <!-- 加入购物车按钮 -->
                    <?php
                    woocommerce_template_loop_add_to_cart(array(
                        'quantity' => 1,
                        'class' => '',
                        'attributes' => array(
                            'data-product_id' => $product->get_id(),
                            'data-product_variation_id' => $variation->get_id(),
                        )
                    ));
                    ?>
                </li>
                <?php
            }
        }

        woocommerce_product_loop_end();
        echo '</div>';

        wp_reset_postdata();
    } else {
        echo '<p>No blue variations found.</p>';
    }

    return ob_get_clean();
}
add_shortcode('custom_blue_variations', 'custom_blue_variations_shortcode');

1. 查询优化：
   • 先筛选出所有变量类型的父产品，确保只处理支持变体的产品。
   • 通过meta_query确保产品包含pa_color属性，减少无效查询。
2. 变体提取：使用$product->get_children()方法精准获取父产品下的蓝色变体，避免直接查询product_variation帖子的兼容性问题。
3. 自定义渲染：
   • 手动构建产品卡片结构，确保标题显示父产品名+变体属性，链接指向正确的变体页面。
   • 调用WooCommerce原生的woocommerce_template_loop_add_to_cart()生成正确的加入购物车按钮，参数自动关联父产品和变体ID，避免URL冗余。
   • 保留WooCommerce的核心样式类（如product、woocommerce-loop-product__link），确保样式正常应用。
4. 样式兼容：外层容器添加columns-3类（可根据需求修改数字），匹配WooCommerce的产品列布局样式。

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