Create Custom WooCommerce Tabs for Product Data

Want to extend your WooCommerce product editor? Adding custom tabs makes it easier to show extra product details. This guide explains how to add your own product data tabs using woocommerce_product_data_tabs and woocommerce_product_data_panels.

Step 1: Register the Custom Tab

Use this hook to register your tab in the product editing area:

function add_custom_product_data_tab( $tabs ) {
    $tabs['custom_tab'] = array(
        'label'    => __( 'Extra Info', '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: 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 '

‘; } add_action( ‘woocommerce_product_data_panels’, ‘custom_product_data_tab_content’ );

Step 3: Save the 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' );

Conclusion

You’ve now created a WooCommerce tab with custom inputs. These can help store product-specific data and improve how product details are managed in the backend. Always test updates in a staging site before going live.

Helpful Links:

• WooCommerce Docs
• Developer Hook Reference
• ACF Help