Adding programmatically a custom settings tab to a

Question

I want to programmatically add a settings tab to Product data metabox like this:

The "Verzendkosten" tab was added with firebug (which means "Shipping costs).

How would I programmatically add the "Verzendkosten" custom tab in woocommerce edit-product pages settings?

(and How would I be abled to populate it with data?)

Answer 1

Updated on November 2017:

• Corrected some mistakes, cleaned and added available options
• Added 'Usage' and 'naming conventions' for custom fields slugs, at the end.

1) You create a custom tab in the custom post type Metabox (Here for "product"),
2) then you can add fields to populate this tab, with different kind of fields (You will find one of each type, so this is a very complete example).

And finally you will find a function that save the data when submitted.

Here it is what you will get visually (for the 6 different custom fields types):

Here is the related code:

// Step 1 - Adding a custom tab to the Products Metabox
add_filter( 'woocommerce_product_data_tabs', 'add_shipping_costs_product_data_tab', 99 , 1 );
function add_shipping_costs_product_data_tab( $product_data_tabs ) {
    $product_data_tabs['shipping-costs'] = array(
        'label' => __( 'Shipping costs', 'my_theme_domain' ), // translatable
        'target' => 'shipping_costs_product_data', // translatable
    );
    return $product_data_tabs;
}

// Step 2 - Adding and POPULATING (with data) custom fields in custom tab for Product Metabox
add_action( 'woocommerce_product_data_panels', 'add_shipping_costs_product_data_fields' );
function add_shipping_costs_product_data_fields() {
    global $post;

    $post_id = $post->ID;

    echo '<div id="shipping_costs_product_data" class="panel woocommerce_options_panel">';

    ## THE 6 DIFFERENT FIELD TYPES

    # 1. Text imput field
    woocommerce_wp_text_input( array(
        'id'            => '_imput_text',
        // 'name'         => '_imput_text', // (optional) for different ID attribute than name attribute
        // 'class'         => 'some-class', // (optional)
        // 'wrapper_class' => 'show_if_simple', // (optional) example here for simple products type only
        'placeholder'   => __( 'Enter some data', 'theme_domain' ), // (optional)
        'label'         => __( 'Imput text Label', 'theme_domain' ), // (optional)
        'description'   => __( 'Imput text  Description', 'theme_domain' ), // (optional)
        'desc_tip'      => true, // (optional) To show the description as a tip
        // 'data_type'     => '', // (optional formatting options) can be 'price', 'decimal', 'stock' or 'url'
        // 'type'          => '', // (optional additional custom attribute)
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    // 2. Textarea imput field
    woocommerce_wp_textarea_input( array(
        'id'            => '_input_textarea',
        // 'name'         => 'input_textarea', // (optional) for different ID attribute than name attribute
        'class'         => 'widefat', // (optional)
        // 'style'         => '' // (optional)
        // 'wrapper_class' => 'show_if_simple', // (optional) example here for simple products type only
        'placeholder'   => __( 'Enter some data', 'theme_domain' ), // (optional)
        'label'         => __( 'Imput textarea Label', 'theme_domain' ),
        'description'   => __( 'Imput textarea Description', 'theme_domain' ),
        'desc_tip'      => true, // (optional) To show the description as a tip
        // 'rows'          => 2, // (optional) defining number of rows
        // 'cols'          => 20, // (optional) defining number of columns
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    // 3. Checkbox field
    woocommerce_wp_checkbox( array(
        'id'            => '_input_checkbox',
        // 'name'         => 'input_checkbox', // (optional) for different ID attribute than name attribute
        // 'class'         => 'some-class', // (optional)
        // 'wrapper_class' => 'show_if_simple', // (optional) example here for simple products type only
        'label'         => __( 'Imput checkbox Label', 'theme_domain' ),
        'description'   => __( 'Imput checkbox Description', 'theme_domain' ),
        'desc_tip'      => true, // (optional) To show the description as a tip
        // 'cbvalue'       => 'yes', // to make it selected by default
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    // 4. Radio Buttons field
    woocommerce_wp_radio( array(
        'id'            => '_imput_radio',
        // 'name'          => 'input_radio', // (optional) for different ID attribute than name attribute
        // 'class'         => 'some-class', // (optional)
        // 'wrapper_class' => 'show_if_simple', // (optional) example here for simple products type only
        'label'         => __(' ', 'my_theme_domain'),
        'description'   => __( 'Imput Radio Description', 'my_theme_domain' ),
        'desc_tip'      => true,
        'options'       => array(
            'option_value_1'    => __('Displayed option 1'),
            'option_value_2'    => __('Displayed option 2'),
            'option_value_3'    => __('Displayed option 3'),
        ),
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    // 5. Select field
    woocommerce_wp_select( array(
        'id'                => '_select_field',
        // 'name'              => '_select_field', // (optional) for different ID attribute than name attribute
        // 'wrapper_class' => 'show_if_simple', // (optional) example here for simple products type only
        'label'         => __(' ', 'my_theme_domain'),
        'description'   => __( 'Imput Radio Description', 'my_theme_domain' ),
        'desc_tip'      => true,
        'options'       => array(
            ''               => __('Chose an option'), // Default empty value
            'option_value_1' => __('Displayed option 1'),
            'option_value_2' => __('Displayed option 2'),
            'option_value_3' => __('Displayed option 3')
        ),
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    // 6. Hidden imput field
    woocommerce_wp_hidden_input( array(
        'id'            => '_hidden_input',
        // 'name'              => '_hidden_input', // (optional) for different ID attribute than name attribute
        'class'         => 'some_class',
        // 'value'         => $value, // (optional) for a static value (can be conditionally set for $value variable)
    ) );

    echo '</div>';
}

// Step 3 - Saving custom fields data of custom products tab metabox
add_action( 'woocommerce_process_product_meta', 'shipping_costs_process_product_meta_fields_save' );
function shipping_costs_process_product_meta_fields_save( $post_id ){

    // save the text field data
    if( isset( $_POST['_imput_text'] ) )
        update_post_meta( $post_id, '_imput_text', esc_attr( $_POST['_imput_text'] ) );

    // save the textarea field data
    if( isset( $_POST['_imput_textarea'] ) )
        update_post_meta( $post_id, '_imput_textarea', esc_attr( $_POST['_imput_textarea'] ) );

    // save the checkbox field data
    if( isset( $_POST['_imput_checkbox'] ) )
        update_post_meta( $post_id, '_imput_checkbox', esc_attr( $_POST['_imput_checkbox'] ) );

    // save the radio button field data
    if( isset( $_POST['_input_radio'] ) )
        update_post_meta( $post_id, '_input_radio', esc_attr( $_POST['_input_radio'] ) );

    // save the selector field data
    if( isset( $_POST['_select_field'] ) )
        update_post_meta( $post_id, '_select_field', esc_attr( $_POST['_select_field'] ) );

    // save the hidden imput data
    if( isset( $_POST['_hidden_input'] ) )
        update_post_meta( $post_id, '_hidden_input', esc_attr( $_POST['_hidden_input'] ) );
}

Naturally this goes on function.php file of your active child theme (or theme) or in any plugin file.

You have to use the same custom field ID (slug names) in Step 2 and 3.

This code is tested and fully functional

You can add custom options with ANY DATA, using custom code, custom variables, or any kind of functions in Step 2.

---

Usage

To get or retrieve the data you will use get_post_meta() function for a defined Post ID:

$custom_field_data = get_post_meta( $post_id, '_custom_field_slug', true );

Where:

• $post_id is the current post ID (from product, order, coupon… post-types).
• custom_field_slug is the ID (the slug) of your custom field.
• true or false: Whether to return a single value (data string or arrays)

It's the same process each kind of fields

---

Advice - Custom field slug names (Custom field ID)

If you don't use an underscore character ( _slug_name ) at the beginning of the slug names of your custom fields, they will appear and be accessible to authorized users in the custom fields Metabox, after submitting the data (Update button).

See this screen shot (here we get input_text custom field slug):

---

References:

• Add tab which is visible only in admin side of product in woocommerce
• Package WooCommerce > Admin > Functions
• WooCommerce Multi Select for Single Product Field
• WP Code Reference - get_post_meta()
• WP Code Reference - update_post_meta()