如何根据Woocommerce产品类型控制后台自定义字段的显示隐藏

你需要对原有代码做三部分调整，即可实现需求：后端初始渲染时判断产品类型决定是否输出对应字段、添加前端JS监听产品类型切换事件动态显隐字段、优化保存逻辑避免冗余数据。
完整修改后代码如下：

// 注册自定义产品数据标签
add_filter( 'woocommerce_product_data_tabs', 'vnt_woo_product_data_tabs' , 1 , 1 );
function vnt_woo_product_data_tabs( $product_data_tabs ) {
    $product_data_tabs['vnt-data-tabs'] = array(
        'label' => __( 'Data Tabs', 'vnthemes' ),
        'target' => 'vnt_data_tabs_option',
    );
    return $product_data_tabs;
}

// 渲染自定义字段
add_action( 'woocommerce_product_data_panels', 'vnt_adv_product_options_field');
function vnt_adv_product_options_field(){
    global $post;
    $product = wc_get_product($post->ID);
    $current_product_type = $product ? $product->get_type() : 'simple';
    echo '<div id="vnt_data_tabs_option" class="panel woocommerce_options_panel">';
    
    // 仅简单产品输出label输入框
    if ($current_product_type === 'simple') {
        woocommerce_wp_text_input(
            array(
                'id'            => 'vntp_label',
                'value'         => get_post_meta( get_the_ID(), 'vntp_label', true ),
                'label'         => __( 'Product label', 'woocommerce' ),
                'placeholder'   => '1kg / 100g...',
                'desc_tip'      => 'true'
            )
        );
    }

    woocommerce_wp_checkbox( array(
        'id'      => 'vntp_topsale',
        'value'   => get_post_meta( get_the_ID(), 'vntp_topsale', true ),
        'label'   => 'Topsale label',
        'desc_tip' => false,
    ) );
    echo '</div>';
}

// 产品类型切换动态显隐JS
add_action('admin_footer', 'vnt_product_type_switch_script');
function vnt_product_type_switch_script() {
    global $post_type;
    // 仅在产品编辑页加载该JS
    if ($post_type === 'product') :
?>
<script>
jQuery(document).ready(function($) {
    // 切换显隐逻辑
    function toggleVntpLabelField() {
        const productType = $('#product-type').val();
        if (productType === 'variable') {
            $('.vntp_label_field').hide();
        } else {
            $('.vntp_label_field').show();
        }
    }
    // 页面加载完成先执行一次
    toggleVntpLabelField();
    // 监听产品类型切换事件
    $('#product-type').on('change', toggleVntpLabelField);
});
</script>
<?php
    endif;
}

// 保存自定义字段
add_action( 'woocommerce_process_product_meta', 'vnt_save_fields', 10, 2 );
function vnt_save_fields( $id, $post ){
    $product = wc_get_product($id);
    // 仅简单产品保存label字段，可变产品清空该字段
    if ($product && $product->get_type() === 'simple') {
        update_post_meta( $id, 'vntp_label', sanitize_text_field($_POST['vntp_label'] ?? '') );
    } else {
        delete_post_meta( $id, 'vntp_label' );
    }
    // 促销标签所有产品类型都保存
    update_post_meta( $id, 'vntp_topsale', $_POST['vntp_topsale'] ?? '' );
}

改动说明 #

• 初始渲染逻辑：获取当前编辑产品的类型，仅当产品为简单产品时渲染vntp_label输入框，减少不必要的DOM输出
• 动态适配逻辑：后台注入专属JS，监听产品类型下拉框的切换操作，切换为可变产品时自动隐藏vntp_label字段，切回简单产品时恢复显示，无需刷新页面即可生效
• 保存逻辑优化：增加产品类型判断，仅简单产品保存vntp_label的值，可变产品自动清理该字段的冗余数据，同时增加字段 sanitize 处理提升安全性

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