如何用短代码显示WooCommerce产品变体下拉菜单？问题求助

让我来帮你排查这段短码的问题，主要有几个关键原因导致它没达到预期效果，我会逐一说明并给出修正后的完整代码：

问题分析 #

• 全局$product变量不可靠：短码可能在非产品页面、产品循环外使用，这时候global $product会返回空值，根本无法获取目标产品的变体数据。
• 缺少WooCommerce变体交互依赖：变体下拉的动态切换（比如实时更新价格、库存状态）需要WooCommerce的variations.js脚本和配套样式，你的代码没触发这些资源加载，选了变体也不会有任何交互反馈。
• 过时代码写法：比如$product->id是WooCommerce旧版写法，现在应该用$product->get_id()；同时表单缺少核心元素（比如隐藏的variation_id输入框、添加到购物车按钮），导致JS无法正常工作。
• 表单逻辑不完整：没有处理变体选中后的提交逻辑，用户选完变体没法添加到购物车。

修正后的完整代码 #

add_shortcode( 'test_shortcode', 'woo_display_variation_dropdown' );
function woo_display_variation_dropdown( $atts ) {
    // 接收短码参数，指定要显示的产品ID
    $atts = shortcode_atts( array(
        'product_id' => '',
    ), $atts, 'test_shortcode' );

    // 验证产品ID有效性
    if ( empty( $atts['product_id'] ) || ! is_numeric( $atts['product_id'] ) ) {
        return '<p>请指定有效的产品ID</p>';
    }

    // 获取产品对象，替代不可靠的全局变量
    $product = wc_get_product( $atts['product_id'] );

    // 检查是否是可变产品
    if ( ! $product || ! $product->is_type( 'variable' ) ) {
        return '<p>该产品不是可变产品或不存在</p>';
    }

    // 加载WooCommerce变体所需的JS和样式
    wp_enqueue_script( 'wc-add-to-cart-variation' );
    wp_enqueue_style( 'woocommerce-general' );

    $attribute_keys = array_keys( $product->get_attributes() );
    ob_start(); // 开启输出缓存，确保短码返回内容而非直接输出
    ?>
    <form class="variations_form cart" method="post" enctype='multipart/form-data' 
          data-product_id="<?php echo absint( $product->get_id() ); ?>" 
          data-product_variations="<?php echo htmlspecialchars( wp_json_encode( $product->get_available_variations() ) ); ?>">
        <?php do_action( 'woocommerce_before_variations_form' ); ?>

        <?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
            <p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
        <?php else : ?>
            <table class="variations" cellspacing="0">
                <tbody>
                    <?php foreach ( $product->get_attributes() as $attribute_name => $options ) : ?>
                        <tr>
                            <td class="label"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></td>
                            <td class="value">
                                <?php
                                // 安全获取选中的属性值
                                $selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) 
                                    ? wc_clean( wp_unslash( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) 
                                    : $product->get_variation_default_attribute( $attribute_name );

                                wc_dropdown_variation_attribute_options( array(
                                    'options'   => $options,
                                    'attribute' => $attribute_name,
                                    'product'   => $product,
                                    'selected'  => $selected
                                ) );
                                echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
                                ?>
                            </td>
                        </tr>
                    <?php endforeach;?>
                </tbody>
            </table>

            <!-- 隐藏的变体ID输入框，WooCommerce JS需要这个元素 -->
            <input type="hidden" name="variation_id" class="variation_id" value="" />
            
            <!-- 添加到购物车按钮及变体信息展示区域 -->
            <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
            <div class="single_variation_wrap">
                <?php
                do_action( 'woocommerce_before_single_variation' );
                do_action( 'woocommerce_single_variation' ); // 输出加购按钮和变体数据占位符
                do_action( 'woocommerce_after_single_variation' );
                ?>
            </div>
            <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
        <?php endif; ?>

        <?php do_action( 'woocommerce_after_variations_form' ); ?>
    </form>
    <?php
    return ob_get_clean(); // 返回缓存的输出内容
}

使用说明 #

在页面/post中使用短码时，需要指定目标可变产品的ID：

[test_shortcode product_id="123"]

把123替换为你实际的可变产品ID即可。

关键修改点说明 #

1. 添加product_id短码参数：不再依赖不可靠的全局$product，可以在任意页面指定任意可变产品显示下拉。
2. 手动加载必要资源：通过wp_enqueue_script和wp_enqueue_style加载变体交互所需的JS脚本和样式，确保下拉选择有动态反馈。
3. 修复过时函数：将$product->id替换为$product->get_id()，用wp_json_encode替代原生json_encode更符合WordPress安全规范。
4. 完善表单结构：添加了隐藏的variation_id输入框、加购按钮及相关钩子，确保WooCommerce的JS能正常处理变体选择和加购逻辑。
5. 安全处理请求参数：使用wp_unslash和wc_clean过滤用户输入，避免安全风险。
6. 输出缓存处理：短码要求返回内容而非直接输出，通过ob_start()和ob_get_clean()处理输出逻辑，符合WordPress短码规范。

内容的提问来源于stack exchange，提问作者Lê Nghĩa