WooCommerce多变体产品数量过多时「隐藏缺货商品」功能失效问题

问题背景 #

WooCommerce后台设置里的「从目录中隐藏缺货商品」选项，在可变产品变体数量较少（比如24个）时，能正常禁用/划掉缺货的变体选项；但变体数量增加到48个时功能直接失效——用户选中缺货的变体组合后，只会显示「缺货」提示，不会提前禁用对应的选项。同时，原本用来处理缺货变体的woocommerce_variation_has_changed事件，在多变体场景下也无法正常触发。

环境信息：WordPress 6.0.3，WooCommerce 7.1.1

是否属于WooCommerce原生问题？ #

是，这属于WooCommerce的内置性能限制。为了避免前端加载过多变体数据导致页面卡顿，WooCommerce默认设置了变体数量阈值：当变体数量超过某个值（测试中为24）时，会自动切换到「AJAX延迟加载」模式——不再把所有变体的库存状态提前渲染到前端，而是等用户选中属性后才通过AJAX请求获取对应变体的信息。这种模式下，原生的缺货变体禁用逻辑会直接失效，因为前端没有提前拿到全量变体的库存数据，无法判断哪些选项应该被禁用。

突破限制的钩子与解决方案 #

1. 调整变体加载阈值 #

使用woocommerce_ajax_variation_threshold钩子修改触发AJAX加载的变体数量阈值，把阈值调高到你的需求数值（比如100）：

add_filter( 'woocommerce_ajax_variation_threshold', 'custom_ajax_variation_threshold' );
function custom_ajax_variation_threshold( $threshold ) {
    return 100; // 将阈值设置为100，超过这个数量才会启用AJAX加载
}

这个方法无需修改前端逻辑，只要变体数量在阈值内，原生的缺货禁用功能就能正常工作。但如果变体数量极大（比如几百个），可能会导致页面加载变慢，需要权衡性能。

2. 自定义前端逻辑处理缺货变体 #

如果变体数量确实很大，不想调高阈值，可以通过钩子把变体库存状态传递到前端，再自定义JS逻辑实现缺货选项的禁用：

首先在主题的functions.php中添加钩子，确保前端能获取到每个变体的库存状态：

add_filter( 'woocommerce_available_variation', 'add_stock_status_to_variations', 10, 3 );
function add_stock_status_to_variations( $variation_data, $product, $variation ) {
    $variation_data['is_in_stock'] = $variation->is_in_stock();
    return $variation_data;
}

然后替换原有的事件逻辑，自定义处理变体变更后的缺货选项禁用：

jQuery(document).ready(function($) {
    // 监听变体属性变更事件
    $('.variations_form').on('woocommerce_variation_has_changed', function() {
        var $form = $(this);
        var product_variations = $form.data('product_variations');
        
        // 遍历所有属性选择框
        $('.variations select').each(function() {
            var $select = $(this);
            var attribute_name = $select.attr('name');
            
            // 检查每个选项是否存在有货的变体组合
            $select.find('option').each(function() {
                var $option = $(this);
                var attribute_value = $option.val();
                var has_in_stock = false;
                
                if (product_variations) {
                    $.each(product_variations, function(index, variation) {
                        if (variation.attributes[attribute_name] === attribute_value && variation.is_in_stock) {
                            has_in_stock = true;
                            return false; // 找到有货组合就停止遍历
                        }
                    });
                }
                
                // 设置选项禁用状态
                if (!has_in_stock && attribute_value !== '') {
                    $option.prop('disabled', true).addClass('disabled');
                } else {
                    $option.prop('disabled', false).removeClass('disabled');
                }
            });
        });
    });

    // 页面加载完成后先执行一次逻辑
    $('.variations_form').trigger('woocommerce_variation_has_changed');
});

这个方法适合变体数量较多的场景，不受原生阈值限制，通过自定义JS逻辑判断并禁用缺货选项。

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