How To add custom product data tabs in WooCommerce

To add custom product data tabs in WooCommerce, you can use the woocommerce_product_data_tabs and woocommerce_product_data_panels hooks. These hooks allow you to add new tabs to the product edit page in the WooCommerce admin area. Here’s a step-by-step guide on how to achieve this:

Step 1: Add Custom Product Data Tab You can use the woocommerce_product_data_tabs filter to add a custom product data tab to the WooCommerce product edit page.

// Add custom product data tab
function add_custom_product_data_tab( $tabs ) {
    $tabs['custom_tab'] = array(
        'label'    => __( 'Custom Data Tab', 'your-text-domain' ),
        'target'   => 'custom_data_tab',
        'class'    => array( 'show_if_simple', 'show_if_variable' ),
        'priority' => 30, // Change the priority to adjust the tab position
    );
    return $tabs;
}
add_filter( 'woocommerce_product_data_tabs', 'add_custom_product_data_tab' );

Step 2: Display Custom Product Data Tab Content Now, create a callback function to display the content of your custom product data tab. This function will be called when the custom data tab is active.

// Custom product data tab content
function custom_product_data_tab_content() {
    global $post;
    
    $custom_checkbox = get_post_meta(get_the_ID(),'custom_checkbox',true);
    $custom_text_input = get_post_meta(get_the_ID(),'custom_text_input',true);
    

    echo '<div id="custom_data_tab" class="panel woocommerce_options_panel">';

    // Add your custom fields here

    // Checkbox field
    woocommerce_wp_checkbox( array(
        'id'          => 'custom_checkbox',
        'label'       => __( 'Custom Checkbox', 'your-text-domain' ),
        'desc_tip'    => true,
    'name'		=> 'custom_checkbox',
    'value'   	=>  empty($custom_checkbox) ? '' : $custom_checkbox,
    'cbvalue' 	=>  empty($custom_checkbox) ? 1 : $custom_checkbox,
        'description' => __( 'This is a custom checkbox for the product data tab.', 'your-text-domain' ),
    ) );

    // Text input field
    woocommerce_wp_text_input( array(
        'id'          => 'custom_text_input',
        'label'       => __( 'Custom Text Input', 'your-text-domain' ),
        'desc_tip'    => true,
        'name'		=> 'custom_text_input',
    'value'   	=>  $custom_text_input,
        'description' => __( 'This is a custom text input for the product data tab.', 'your-text-domain' ),
    ) );

    echo '</div>';
}
add_action( 'woocommerce_product_data_panels', 'custom_product_data_tab_content' );

Step 3: Save Custom Product Data To save the data from your custom product data tab, you can use the woocommerce_process_product_meta hook.

// Save custom product data
function save_custom_product_data( $product_id ) {
    $custom_checkbox = isset( $_POST['custom_checkbox'] ) ? 'yes' : 'no';
    update_post_meta( $product_id, 'custom_checkbox', $custom_checkbox );

    $custom_text_input = isset( $_POST['custom_text_input'] ) ? sanitize_text_field( $_POST['custom_text_input'] ) : '';
    update_post_meta( $product_id, 'custom_text_input', $custom_text_input );
}
add_action( 'woocommerce_process_product_meta', 'save_custom_product_data' );