Pawan Kumawat

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' );


With these steps, you’ve successfully added a custom product data tab to the WooCommerce product edit page, showed it only for simple and variable products, and added custom fields (checkbox and text input) to this tab. The data entered in these custom fields will be saved with the product and can be accessed later when editing the product.

Remember to use a child theme or custom plugin to add custom code, and always test your customizations thoroughly before deploying them to a live site.

Share This On :

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Request A Quote