WooCommerce 自定义产品类型选项不隐藏自定义产品选项卡答案

【问题标题】：WooCommerce custom product type option not hiding custom product tabWooCommerce 自定义产品类型选项不隐藏自定义产品选项卡
【发布时间】：2021-07-24 05:31:41
【问题描述】：

我刚刚在我的 WC 管理产品页面中添加了一个自定义产品类型选项：

add_filter( 'product_type_options', [ $this, 'filter_product_type_options' ], 99, 1 );
public function filter_product_type_options( array $product_type_options ): array {
    $product_type_options['batches'] = [
        'id'            => '_batches',
        'wrapper_class' => 'show_if_simple show_if_variable',
        'label'         => esc_html__( 'Batches', 'woo-batches' ),
        'description'   => esc_html__( 'Product is sold from batches.', 'woo-batches' ),
        'default'       => 'no',
    ];

    return $product_type_options;
}

我还添加了一个自定义产品数据选项卡，我只想在选中该选项时显示该选项卡：

add_filter( 'woocommerce_product_data_tabs', [ $this, 'filter_woocommerce_product_data_tabs' ] );
public function filter_woocommerce_product_data_tabs( array $tabs ): array {
    $tabs['woo_batches'] = [
        'label'    => esc_html__( 'Batches', 'woo-batches' ),
        'target'   => 'woo_batches',
        'class'    => [ 'show_if_simple', 'show_if_variable', 'show_if_batches' ],
        'priority' => 25
    ];

    return $tabs;
}

但是当我选中/取消选中我的选项时，选项卡完全没有任何作用。我在这里需要我自己的隐藏 JS 函数还是我遗漏了什么？我通常认为我可以显示/隐藏所有内容

show_if_xxx
hide_if_xxx

【问题讨论】：

标签： php jquery wordpress woocommerce product

【解决方案1】：

您确实必须自己提供一段 jQuery。如何将其应用于其他复选框（默认）可以在js/admin/meta-boxes-product.js（第 122 行...）中找到

注意：我还对您现有的代码做了一些小改动，其中某些类

所以你得到：

// Add a checkbox as Woocommerce admin product option
function filter_product_type_options( $product_type_options ) { 
    $product_type_options['batches'] = array(
        'id'            => '_batches',
        'wrapper_class' => 'show_if_simple show_if_variable',
        'label'         => __( 'Batches', 'woo-batches' ),
        'description'   => __( 'Product is sold from batches.', 'woo-batches' ),
        'default'       => 'no',
    );

    return $product_type_options;
}
add_filter( 'product_type_options', 'filter_product_type_options', 10, 1 );

// Add custom product setting tab.
function filter_woocommerce_product_data_tabs( $default_tabs ) {
    $default_tabs['woo_batches'] = array(
        'label'    => __( 'Batches', 'woo-batches' ),
        'target'   => 'woo_batches',
        'class'    => array( 'hide_if_simple', 'hide_if_variable', 'show_if_batches' ),
        'priority' => 25
    );
    
    return $default_tabs;
}
add_filter( 'woocommerce_product_data_tabs', 'filter_woocommerce_product_data_tabs', 10, 1 );

// Prints scripts or data before the default footer scripts.
// This hook is for admin only and can’t be used to add anything on the front end.
function action_admin_footer() {
    ?>
    <script>
        jQuery(document).ready(function($) {
            $( 'input#_batches' ).change( function() {
                var is_batches = $( 'input#_batches:checked' ).length;
            
                // Show rules.
                if ( is_batches ) {
                    $( '.show_if_batches' ).show();
                }
            });            
        });
    </script>
    <?php
}
add_action( 'admin_footer', 'action_admin_footer' );

【讨论】：