WooCommerce实现无默认时自动预选首个有库存商品变体

原代码依赖变体的固定索引位置，一旦在后台调整变体展示顺序，索引和实际有库存变体的对应关系就会错乱，导致预选逻辑失效。下面提供两种更可靠的实现方案，彻底解决这个问题：

方案一：基于选项禁用状态快速预选（简洁高效） #

WooCommerce默认会将无库存的变体选项标记为disabled，我们可以直接筛选第一个非禁用的选项进行选中，完全不依赖变体顺序：

jQuery(document).ready(function($) {
    // 监听变体选择变化，确保动态加载后仍生效
    $('form.variations_form').on('woocommerce_variation_select_change', function() {
        preselectFirstInStock($(this));
    });

    // 页面初始加载时执行
    $('form.variations_form').each(function() {
        preselectFirstInStock($(this));
    });

    function preselectFirstInStock(form) {
        // 已有默认选中值时跳过
        if (form.find('.variations select[value!=""]').length > 0) return;

        // 遍历每个属性选择器，设置第一个可用选项
        form.find('.variations select').each(function() {
            var $select = $(this);
            if ($select.val() !== '') return;

            var $firstAvailable = $select.find('option:not([disabled])').not('[value=""]').first();
            if ($firstAvailable.length) {
                $select.val($firstAvailable.val()).trigger('change');
            }
        });
    }
});

方案二：基于变体库存数据精准预选（更可靠） #

如果存在无库存但未被禁用的特殊场景，可直接读取WooCommerce提供的变体库存数据，精准匹配首个有库存的变体：

jQuery(document).ready(function($) {
    $('form.variations_form').each(function() {
        var form = $(this);
        var variations = form.data('product_variations');

        // 无变体数据或已有默认选中时跳过
        if (!variations || form.find('.variations select[value!=""]').length > 0) return;

        // 遍历变体找到首个有库存的
        var targetVariation = null;
        for (let variation of variations) {
            if (variation.is_in_stock) {
                targetVariation = variation;
                break;
            }
        }

        // 设置对应属性选择器的值
        if (targetVariation) {
            $.each(targetVariation.attributes, function(key, value) {
                var selectName = key.replace('attribute_', '');
                form.find(`select[name="${selectName}"]`).val(value).trigger('change');
            });
        }
    });
});

使用方法 #

把代码添加到主题的functions.php（通过wp_enqueue_script注册），或者直接粘贴到WordPress后台「外观 > 自定义 > 额外CSS/JS」的JS区域即可。

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