Answer a question

i have create a tabs and add multi field for tabs to Woocommerce admin tabs code

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 $woocommerce, $post;
            echo '<div id="vnt_data_tabs_option" class="panel woocommerce_options_panel">';
            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>';
        }
        
        add_action( 'woocommerce_process_product_meta', 'vnt_save_fields', 10, 2 );
        function vnt_save_fields( $id, $post ){
            update_post_meta( $id, 'vntp_label', $_POST['vntp_label'] );
            update_post_meta( $id, 'vntp_topsale', $_POST['vntp_topsale'] );
        }

How to?

  • If Product type is simple select: woocommerce_product_data_panels show 1 data.
  • If Product type is variable select: woocommerce_product_data_panels hide ID vntp_label. show ID vntp_topsale.

Any idea for my case? Thanks!

Answers

You can use wrapper_class to add your custom class like in this case we will add hide class based on product type.

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_filter( 'woocommerce_product_data_tabs', 'vnt_woo_product_data_tabs' , 1 , 1 );

function vnt_adv_product_options_field(){

    global $woocommerce, $post;

    $product = wc_get_product( $post->ID );

    echo '<div id="vnt_data_tabs_option" class="panel woocommerce_options_panel">';
   
        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',
                'wrapper_class' => ( $product->is_type( 'variable' ) ) ? 'hide' : ''
            )
        );

        woocommerce_wp_checkbox( 
            array(
                'id'            => 'vntp_topsale',
                'value'         => get_post_meta( get_the_ID(), 'vntp_topsale', true ),
                'label'         => 'Topsale label',
                'desc_tip'      => false,
                'wrapper_class' => ( $product->is_type( 'simple' ) ) ? 'hide' : ''
            ) 
        );

    echo '</div>';

    ?>

    <style type="text/css">
        p.form-field.hide{ display: none; }
    </style>

    <script type="text/javascript">
        (function($){
            $( document ).on('change', '#product-type', function(event) {
                if( $(this).val() == 'simple' ){
                    $('.vntp_topsale_field').addClass('hide');
                    $('.vntp_label_field').removeClass('hide');
                }
                if( $(this).val() == 'variable' ){
                    $('.vntp_label_field').addClass('hide');
                    $('.vntp_topsale_field').removeClass('hide');
                }
            });
        })(jQuery);
    </script>

    <?php
}
add_action( 'woocommerce_product_data_panels', 'vnt_adv_product_options_field');

function vnt_save_fields( $id, $post ){
    update_post_meta( $id, 'vntp_label',   $_POST['vntp_label'] );
    update_post_meta( $id, 'vntp_topsale', $_POST['vntp_topsale'] );
}
add_action( 'woocommerce_process_product_meta', 'vnt_save_fields', 10, 2 );
Logo

WooCommerce社区为您提供最前沿的新闻资讯和知识内容

更多推荐