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.

Categories

Related Blogs

How to log information, warnings, errors In wordpress

To create a custom write_log() function for WordPress, you can use the error_log() function to write messages to the error log. This function will allow you to log information, warnings, errors, or any other messages during development or debugging.

Delete Product Image With Product Delete In WooCommerce

In WooCommerce, when you delete a product, by default, the product images are not automatically deleted from the server to avoid accidental data loss. However, you can add a custom action to delete the product images when a product is deleted. Here’s a step-by-step guide to achieve this: