WooCommerce用户选择属性后自动选中唯一可用产品变体方案求助

首先明确：你现有的PHP钩子woocommerce_dropdown_variation_attribute_options_args仅在页面首次渲染时生效，无法响应用户选择属性后的动态变体更新，所以必须通过自定义JavaScript实现交互逻辑。

问题分析 #

你的产品属性联动逻辑是：选择功率后，尺寸、容量会仅剩余1个可选变体，需要自动选中这些唯一选项。PHP钩子只能处理初始加载时的默认选中，用户操作后的动态变化完全依赖前端JS处理。

自定义JS实现方案 #

下面是适配WooCommerce变体逻辑的JS代码，既能处理用户选择后的联动，也能解决初始加载异常问题：

jQuery(document).ready(function($) {
    // 定义自动选中唯一属性选项的函数
    function autoSelectSingleOption() {
        // 遍历所有属性下拉框
        $('.variations select').each(function() {
            var $select = $(this);
            // 统计可用选项数量（排除禁用的选项）
            var availableOptions = $select.find('option:not(:disabled)').length;
            
            // 如果只有1个可用选项且未选中，则自动选中
            if (availableOptions === 1 && !$select.find('option:not(:disabled):selected').length) {
                $select.val($select.find('option:not(:disabled)').val()).trigger('change');
            }
        });
    }

    // 初始加载时延迟执行，避免WooCommerce数据未加载完成导致异常
    setTimeout(autoSelectSingleOption, 100);

    // 监听WooCommerce变体更新完成事件
    $('form.variations_form').on('woocommerce_update_variation_values', function() {
        autoSelectSingleOption();
    });

    // 监听属性选择变化事件（兜底处理）
    $('.variations select').on('change', function() {
        setTimeout(autoSelectSingleOption, 100);
    });
});

代码说明 #

1. 核心函数autoSelectSingleOption：遍历所有属性下拉框，筛选出可用选项，若仅存1个未选中的选项，自动选中并触发change事件，确保WooCommerce同步更新变体信息。
2. 初始加载处理：用setTimeout延迟执行，避开WooCommerce初始变体数据加载的时间差，解决初始异常问题。
3. 事件监听：
   • woocommerce_update_variation_values：WooCommerce内置的变体数据更新完成事件，确保变体选项变化后立即执行自动选中逻辑。
   • change事件：兜底监听属性选择操作，覆盖所有可能的交互场景。

代码部署方式 #

将上述JS代码添加到主题functions.php中（通过WP内置的脚本加载机制），或者直接粘贴到主题自定义JS区域（外观→自定义→额外JS）：

add_action('wp_enqueue_scripts', 'enqueue_auto_select_variation_script');
function enqueue_auto_select_variation_script() {
    if (is_product()) { // 仅在产品页面加载该脚本
        wp_add_inline_script('jquery', '
            jQuery(document).ready(function($) {
                function autoSelectSingleOption() {
                    $(".variations select").each(function() {
                        var $select = $(this);
                        var availableOptions = $select.find("option:not(:disabled)").length;
                        if (availableOptions === 1 && !$select.find("option:not(:disabled):selected").length) {
                            $select.val($select.find("option:not(:disabled)").val()).trigger("change");
                        }
                    });
                }
                setTimeout(autoSelectSingleOption, 100);
                $("form.variations_form").on("woocommerce_update_variation_values", function() {
                    autoSelectSingleOption();
                });
                $(".variations select").on("change", function() {
                    setTimeout(autoSelectSingleOption, 100);
                });
            });
        ');
    }
}

关于WooCommerce默认无此功能的说明 #

WooCommerce仅提供基础的变体选择框架，这类个性化的属性联动自动选中属于定制需求——不同店铺的属性逻辑差异极大，官方无法内置一套适配所有场景的通用方案，因此需要开发者自行定制。

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