WooCommerce可变商品预购按钮逻辑优化：求替代临时实现方案

需求说明 #

需要在WooCommerce商品页面实现以下功能：

• 当选中的商品变体库存≤0且该变体开启预购（backorder）功能时，允许用户预购
• 同步将"Add to Bag"按钮文本切换为"Add pre-order to bag"

已知限制：

• 库存<1视为缺货状态
• 产品JSON数据中，若变体开启预购，无论库存多少variationData.[X].is_in_stock始终为true
• 库存数量字段未包含在产品JSON中

现有临时实现方案 #

当前方案通过模板修改+前端监听实现，但存在维护性差、逻辑冗余问题：

1. 模板添加隐藏库存字段 #

在variation-add-to-cart-button.php中插入代码：

<?php
    if ($product->is_type('variable')) {

        foreach ($product->get_visible_children() as $variation_id) {

            // 获取对应ID的变体产品
            $get_product_variation = wc_get_product($variation_id);

            // 获取变体库存数量
            $product_variation_stock = $get_product_variation->get_stock_quantity();

            // 输出隐藏字段存储库存
            echo '<input type="hidden" name="' . $variation_id . '_stock_qty" value="' . $product_variation_stock . '" />';

        }
    }
?>

2. 前端JS监听更新按钮文本 #

jQuery('input[name=variation_id].variation_id').change(function () {
    const variationID = jQuery(this).val();
    const variationData = jQuery('form.variations_form').data("product_variations");
    const variationStockQty = jQuery('input[name=' + variationID + '_stock_qty]').val();

    // 在产品JSON中匹配当前变体
    jQuery(variationData).each(function (index, variation) {
        if (variationID == variation.variation_id) {
            // 判断状态并更新按钮文本
            if (variationStockQty > 0 && variation.is_in_stock && variation.is_purchasable) {
                jQuery('.single_add_to_cart_button').text('Add to bag');
            } else if (variation.backorders_allowed) {
                jQuery('.single_add_to_cart_button').text('Add pre-order to bag');
            } else {
                jQuery('.single_add_to_cart_button').text('Sold Out');
            }
        }
    });
});

优化实现方案 #

1. 通过WooCommerce钩子注入库存数据（替代隐藏字段） #

无需修改模板，用官方钩子将库存数量添加到变体JSON中，符合WooCommerce扩展规范：

add_filter('woocommerce_available_variation', 'add_stock_qty_to_variation_data', 10, 3);
function add_stock_qty_to_variation_data($variation_data, $product, $variation) {
    // 把库存数量注入到变体JSON数据
    $variation_data['stock_qty'] = $variation->get_stock_quantity();
    return $variation_data;
}

这样每个变体的JSON对象会自动带上stock_qty字段，避免模板修改带来的维护风险。

2. 优化前端逻辑（利用原生事件） #

使用WooCommerce原生的found_variation事件（变体选择完成后触发），逻辑更简洁可靠：

jQuery(document).on('found_variation', '.variations_form', function(event, variation) {
    const $addToCartBtn = jQuery(this).find('.single_add_to_cart_button');
    
    if (variation.stock_qty > 0 && variation.is_in_stock && variation.is_purchasable) {
        $addToCartBtn.text('Add to bag');
        $addToCartBtn.prop('disabled', false);
    } else if (variation.backorders_allowed) {
        $addToCartBtn.text('Add pre-order to bag');
        $addToCartBtn.prop('disabled', false);
    } else {
        $addToCartBtn.text('Sold Out');
        $addToCartBtn.prop('disabled', true);
    }
});

• 原生事件覆盖所有变体选择场景（下拉、单选等），比监听输入框更准确
• 直接从variation参数获取数据，无需遍历整个变体数组，性能更优
• 增加按钮禁用状态处理，逻辑更完整

3. 补充初始加载状态处理 #

若页面加载时默认选中变体，自动触发按钮文本更新：

jQuery(document).ready(function() {
    const $variationsForm = jQuery('.variations_form');
    const selectedVariationId = $variationsForm.find('input[name=variation_id]').val();
    
    if (selectedVariationId) {
        const variationData = $variationsForm.data('product_variations');
        const matchedVariation = variationData.find(v => v.variation_id == selectedVariationId);
        if (matchedVariation) {
            $variationsForm.trigger('found_variation', [matchedVariation]);
        }
    }
});

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