如何在WooCommerce后台预填Name Your Price插件的最小/最大价格字段？

需求：在WooCommerce产品编辑页面，给「Name Your Price」插件生成的最小价格（字段标识：_min_price）和最大价格（字段标识：_maximum_price）设置默认值，分别为10和250。

你尝试的JS代码未生效，核心原因是woocommerce_product_options_general_product_data钩子执行时，插件的字段可能还未完成渲染，直接执行DOM选择会找不到目标元素。

以下是两种可行的解决方案：

方案一：后端PHP设置默认值（推荐） #

直接从数据库层面为新产品设置默认元数据，同时在编辑页面为未设置值的产品填充字段，完全避免前端依赖问题：

// 为新建产品设置Name Your Price字段默认值
add_action( 'woocommerce_new_product', 'set_default_nyp_prices', 10, 1 );
function set_default_nyp_prices( $product_id ) {
    // 仅当字段未设置时赋值
    if ( get_post_meta( $product_id, '_min_price', true ) === '' ) {
        update_post_meta( $product_id, '_min_price', 10 );
    }
    if ( get_post_meta( $product_id, '_maximum_price', true ) === '' ) {
        update_post_meta( $product_id, '_maximum_price', 250 );
    }
}

// 在产品编辑页为未设置值的字段填充默认值
add_action( 'woocommerce_product_options_general_product_data', 'prefill_nyp_prices_on_edit' );
function prefill_nyp_prices_on_edit() {
    global $post;
    $current_min = get_post_meta( $post->ID, '_min_price', true );
    $current_max = get_post_meta( $post->ID, '_maximum_price', true );

    if ( empty( $current_min ) || empty( $current_max ) ) {
    ?>
    <script>
        jQuery(document).ready(function($){
            // 延迟执行确保插件字段已渲染
            setTimeout(() => {
                $('input[name="_min_price"]').val('<?php echo esc_js( $current_min ?: 10 ); ?>');
                $('input[name="_maximum_price"]').val('<?php echo esc_js( $current_max ?: 250 ); ?>');
            }, 300);
        });
    </script>
    <?php
    }
}

方案二：优化前端JS代码 #

确保在DOM完全加载且插件字段渲染完成后再执行赋值操作，兼容动态渲染场景：

add_action( 'admin_footer', 'prefill_nyp_prices_js' );
function prefill_nyp_prices_js() {
    // 仅在产品编辑页面执行
    if ( get_current_screen()->id !== 'product' ) return;
?>
<script>
    jQuery(document).ready(function($){
        // 监听字段容器加载，兼容插件动态渲染逻辑
        const observer = new MutationObserver((mutations) => {
            const minInput = $('input[name="_min_price"]');
            const maxInput = $('input[name="_maximum_price"]');
            if (minInput.length && minInput.val() === '') {
                minInput.val('10');
            }
            if (maxInput.length && maxInput.val() === '') {
                maxInput.val('250');
            }
            // 找到目标字段后停止监听
            if (minInput.length && maxInput.length) observer.disconnect();
        });

        observer.observe(document.getElementById('general_product_data'), {
            childList: true,
            subtree: true
        });
    });
</script>
<?php
}

说明 #

• 后端方案更稳定，能确保默认值被持久化到数据库，即使前端JS执行失败也不会影响；
• 前端方案通过MutationObserver监听字段渲染，避免了固定延迟的不确定性，适配插件动态加载字段的场景。

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