How to Add Custom Product Tabs in WooCommerce Admin

If you want to improve your WooCommerce product pages, custom data tabs can help you organize and show extra information. This tutorial will guide you through adding new tabs in the WooCommerce product data area. Let’s explore how to use woocommerce_product_data_tabs and woocommerce_product_data_panels to add your own tabs!  

Step 1: Add a New Product Data Tab

Use the woocommerce_product_data_tabs filter to insert your custom tab into the product editing interface:

// Add custom product 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,
    );
    return $tabs;
}
add_filter( 'woocommerce_product_data_tabs', 'add_custom_product_data_tab' );

Step 2: Insert Content into the Tab

Once added, use the woocommerce_product_data_panels hook to show content in your custom tab:

// Add 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 '

'; // 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 checkbox is custom.', '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 input is custom.', 'your-text-domain' ), ) ); echo '

'; } add_action( 'woocommerce_product_data_panels', 'custom_product_data_tab_content' );

Step 3: Save Your Custom Fields

// Save tab input values
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' );

Conclusion

Now you’ve successfully created a custom WooCommerce product tab. You can expand on this to include additional fields and enhance your admin interface. Always add code via a child theme or custom plugin and test thoroughly before pushing to production.  

Useful Resources:

• WooCommerce Official Docs
• Hook Reference
• ACF Guide