WooCommerce: How to Add a New Tab to Product Data

To store custom meta data in WooCommerce and display it in a new tab, you need to extend WooCommerce functionalities to add custom fields to the backend product form and then display this data on the frontend, in the new tab.

Here is an extended guide on how to store custom meta data in WooCommerce and display it in a new tab.

Preparation

Before you start making changes, make sure to keep the following things in mind:

• Backup your website: Before making changes to the functionality of your website, you should create a backup of your WordPress installation and the database.
• Use a Child Theme: To survive updates of your theme, add the new code to the functions.php of your child theme, not in the main theme.

Adding Custom Fields to the Backend

To add custom fields, you can use the woocommerce_product_data_panels hook, which controls the product data in the admin area. You can insert the code into the functions.php of your child theme.

Code to Add a Custom Field in the Backend:

// Add custom fields to the product backend
add_action('woocommerce_product_options_general_product_data', 'custom_fields_woocommerce');

function custom_fields_woocommerce() {
    global $woocommerce, $post;
    
    echo '
';
    
    // Text field for additional information
    woocommerce_wp_text_input( 
        array( 
            'id'          => '_additional_information', 
            'label'       => __('Additional Information', 'textdomain'), 
            'placeholder' => 'Enter additional information here',
            'desc_tip'    => 'true',
            'description' => __('Add additional product information to be displayed in the custom tab.', 'textdomain')
        )
    );
    
    echo '
';
}

Saving Custom Fields

Now you need to ensure that the data entered in the product form is also saved. You can use the woocommerce_process_product_meta hook for this.

Code to Save Custom Meta Data:

// Save custom fields
add_action('woocommerce_process_product_meta', 'custom_fields_save');

function custom_fields_save($post_id) {
    // Check and save the additional information
    $additional_information = isset($_POST['_additional_information']) ? sanitize_text_field($_POST['_additional_information']) : '';
    update_post_meta($post_id, '_additional_information', esc_attr($additional_information));
}

Displaying Custom Meta Data in the New Tab

To display the saved meta data in your new tab, adjust the content of the new tab. Here, the saved custom meta information is retrieved and displayed.

Code to Display Custom Meta Data in the New Tab:

// Add new tab
add_filter('woocommerce_product_tabs', 'custom_woocommerce_tab');

function custom_woocommerce_tab($tabs) {
    // Add tab
    $tabs['custom_tab'] = array(
        'title'    => __('Additional Information', 'textdomain'),
        'priority' => 50, // Position of the tab
        'callback' => 'custom_tab_content'
    );

    return $tabs;
}

// Define content of the new tab
function custom_tab_content() {
    global $post;

    // Retrieve custom meta data
    $additional_information = get_post_meta($post->ID, '_additional_information', true);

    // Output tab content
    if (!empty($additional_information)) {
        echo '
' . __('Additional Information', 'textdomain') . '
';
        echo '
' . esc_html($additional_information) . '
';
    } else {
        echo '
' . __('There is no additional information for this product.', 'textdomain') . '
';
    }
}

Code Explanation

• Adding Backend Fields:
  • With woocommerce_product_options_general_product_data you add new input fields to the product data.
  • woocommerce_wp_text_input creates a text field in the product form where you can enter additional information.
• Saving the Data:
  • The hook woocommerce_process_product_meta is used to save the inputs in the backend. The function update_post_meta saves the custom meta information in the database.
• Frontend Display:
  • The hook woocommerce_product_tabs adds the new tab.
  • The function custom_tab_content reads the saved meta data using get_post_meta and displays it in the frontend tab.

Editing Custom Meta Data

If you want to add more custom fields later, you can add them in a similar way. Depending on your needs, you can also use text areas, checkboxes, or other input fields to add even more custom information to products.

Example of Another Field (Checkbox):

// Add checkbox for custom option
woocommerce_wp_checkbox( 
    array( 
        'id'            => '_special_offer', 
        'label'         => __('Special Offer', 'textdomain'), 
        'description'   => __('Mark this product as a special offer.', 'textdomain') 
    )
);

Don't forget to adjust the saving mechanism to store these new fields as well.

Conclusion

With this guide, you can not only add a new tab in WooCommerce but also save and display custom meta data in the new tab. This gives you more flexibility in presenting product information and allows you to extend your WooCommerce product form to store additional data.

The solution is scalable, allowing you to add more fields as needed to meet the requirements of your online shop.