使用变体色卡时在尺码属性下拉菜单添加库存状态

网站多数产品使用Variation Swatches（变体色卡），需在尺码变体的下拉选项旁添加库存状态。未启用色卡时，通过woocommerce_dropdown_variation_attribute_options_html原生钩子可实现，但启用色卡插件后该方法失效。现有代码片段如下：

add_filter( 'woocommerce_dropdown_variation_attribute_options_html', 'variations_options_html_callback', 30, 2);

function variations_options_html_callback( $html, $args ){

$args = wp_parse_args( apply_filters( 'woocommerce_dropdown_variation_attribute_options_args', $args ), array(
        'options' => false,
        'attribute' => false,
        'product' => false,
        'selected' => false,
        'name' => '',
        'id' => '',
        'class' => '',
        'show_option_none' => __( 'Choose an option', 'woocommerce' ),
    ));
// 原有逻辑省略
}

解决方案 #

方法1：利用Variation Swatches插件自带钩子 #

主流Variation Swatches插件（如WooCommerce Variation Swatches）提供了woo_variation_swatches_dropdown_html过滤器，可直接修改下拉选项HTML，追加库存状态：

add_filter( 'woo_variation_swatches_dropdown_html', 'custom_size_dropdown_with_stock', 10, 4 );
function custom_size_dropdown_with_stock( $html, $args, $attribute, $product ) {
    // 仅处理尺码属性，替换为你的尺码属性slug（如'pa_size'）
    if ( $attribute !== 'pa_size' ) {
        return $html;
    }

    $options = $args['options'];
    $selected = $args['selected'];
    $show_option_none = $args['show_option_none'];
    $html = '';

    // 添加默认占位选项
    if ( $show_option_none ) {
        $html .= '<option value="">' . esc_html( $show_option_none ) . '</option>';
    }

    // 遍历尺码选项，计算对应库存
    foreach ( $options as $option ) {
        $is_selected = selected( $selected, sanitize_title( $option ), false );
        $stock_qty = 0;
        // 累加该尺码下所有变体的库存
        foreach ( $product->get_available_variations() as $variation ) {
            if ( $variation['attributes']['attribute_' . $attribute] === sanitize_title( $option ) ) {
                $stock_qty += $variation['max_qty'];
            }
        }
        $stock_text = $stock_qty > 0 ? " (库存: {$stock_qty})" : " (缺货)";
        // 组装选项HTML
        $html .= sprintf(
            '<option value="%s" %s>%s%s</option>',
            esc_attr( sanitize_title( $option ) ),
            $is_selected,
            esc_html( $option ),
            esc_html( $stock_text )
        );
    }

    return $html;
}

方法2：自定义公共函数生成带库存的下拉 #

若插件无对应钩子，可直接自定义函数生成尺码下拉，替换默认输出：

// 生成带库存的尺码下拉的公共函数
function get_size_dropdown_with_stock( $product_id ) {
    $product = wc_get_product( $product_id );
    if ( ! $product || ! $product->is_type( 'variable' ) ) {
        return '';
    }

    $attribute = 'pa_size'; // 替换为你的尺码属性slug
    $options = $product->get_variation_attributes()[ $attribute ] ?? [];
    $selected = isset( $_GET['attribute_' . $attribute] ) ? sanitize_title( $_GET['attribute_' . $attribute] ) : '';

    ob_start();
    ?>
    <select id="pa_size" name="attribute_pa_size" class="variation-select">
        <option value="">选择尺码</option>
        <?php foreach ( $options as $option ) : ?>
            <?php
            $stock_qty = 0;
            foreach ( $product->get_available_variations() as $variation ) {
                if ( $variation['attributes']['attribute_' . $attribute] === sanitize_title( $option ) ) {
                    $stock_qty += $variation['max_qty'];
                }
            }
            $stock_text = $stock_qty > 0 ? " (库存: {$stock_qty})" : " (缺货)";
            $is_selected = selected( $selected, sanitize_title( $option ), false );
            ?>
            <option value="<?php echo esc_attr( sanitize_title( $option ) ); ?>" <?php echo $is_selected; ?>>
                <?php echo esc_html( $option ) . esc_html( $stock_text ); ?>
            </option>
        <?php endforeach; ?>
    </select>
    <?php
    return ob_get_clean();
}

// 替换产品页面的默认尺码下拉
add_action( 'woocommerce_single_product_summary', 'replace_size_dropdown_with_custom', 25 );
function replace_size_dropdown_with_custom() {
    global $product;
    if ( $product->is_type( 'variable' ) ) {
        // 移除插件默认的尺码下拉（根据实际情况调整钩子优先级）
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
        // 输出自定义下拉
        echo get_size_dropdown_with_stock( $product->get_id() );
        // 重新渲染加入购物车按钮
        do_action( 'woocommerce_single_variation_add_to_cart_button' );
    }
}

注意事项 #

• 务必将代码中的pa_size替换为你网站实际使用的尺码属性slug（可在WooCommerce后台“产品 > 属性”中查看）。
• 库存计算逻辑为累加该尺码下所有变体的库存，若需显示单个变体库存，可调整循环内的判断逻辑。
• 修改后请清除网站缓存，确保新代码生效。

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