WooCommerce创建新变体时默认勾选‘管理库存’代码失效求助

原代码问题分析 #

你的代码无法生效主要有三个原因：

• 依赖#variable_product_options的change事件触发，但添加新变体时该事件不会自动触发
• 使用attr('checked', 'checked')设置勾选状态不符合jQuery表单元素操作规范，无法正确同步元素的实际状态
• 没有针对新添加的变体做定向处理，而是遍历所有变体元素，逻辑触发时机不对

修复后的代码 #

add_action( 'admin_footer', 'custom_admin_product_variations_js' );

function custom_admin_product_variations_js() {
    global $post_type;

    if ( 'product' === $post_type ) :
    ?><script type='text/javascript'>
    jQuery(function ($) {
        // 处理单个变体的库存设置
        function setupNewVariationStock(variationElement) {
            const $manageStock = $(variationElement).find('input.variable_manage_stock');
            if (!$manageStock.is(':checked')) {
                $manageStock.prop('checked', true).trigger('change');
                $(variationElement).find('.wc_input_stock').val(1);
            }
        }

        // 监听变体列表的DOM变化
        const targetNode = document.querySelector('.woocommerce_variations.wc-metaboxes.ui-sortable');
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                // 仅处理新增的变体节点
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === 1 && $(node).hasClass('woocommerce_variation')) {
                        setupNewVariationStock(node);
                    }
                });
            });
        });

        observer.observe(targetNode, { childList: true });

        // 页面加载时同步已存在的变体（可选）
        $('.woocommerce_variation').each(function() {
            setupNewVariationStock(this);
        });
    });
    </script><?php
    endif;
}

关键改进说明 #

• 单独封装setupNewVariationStock函数，聚焦单个变体的库存配置逻辑，更易维护
• 用prop('checked', true)替代attr，确保表单元素的勾选状态正确更新，同时触发change事件让WooCommerce自动加载库存输入框的相关交互
• MutationObserver仅处理新增的变体节点，避免重复操作已存在的变体，提升性能
• 可选的页面加载处理逻辑：确保编辑页面打开时，所有已存在的变体也自动勾选“Manage Stock”

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