Editing Custom product tab content in Woocommerce

Question

In WooCommerce, I would like to add custom global product tab just like additional info when a new product is created.

I am able to create new tab but cannot update anything on create new product page.

I can see it on display page but how to add info through product edit page. I know I can use custom fields but I am looking to have it on product page to allow shop manager or others to fill this additional shipping tab.

My Code is

add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {

    // Adds the new tab
    $tabs['test_tab'] = array(
        'title'     => __( 'Shipping', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_new_product_tab_content'
    );

    return $tabs;
}

function woo_new_product_tab_content()  {
    // The new tab content
    $prod_id = get_the_ID();
    echo'<p>'.get_post_meta($prod_id,'Shipping',true).'</p>';
}

Answer 1

You can add a custom Metabox in Admin Product pages that will allow Shop Managers to add content for your custom product tab. You will get this:

Here is the code:

// Adding a custom Meta container to admin products pages
add_action( 'add_meta_boxes', 'create_custom_meta_box' );
if ( ! function_exists( 'create_custom_meta_box' ) )
{
    function create_custom_meta_box()
    {
        add_meta_box(
            'custom_product_shipping_field',
            __( 'Custom Shipping Tab information', 'woocommerce' ),
            'add_custom_content_meta_box',
            'product',
            'normal',
            'high'
        );
    }
}

//  Custom metabox content in admin product pages
if ( ! function_exists( 'add_custom_content_meta_box' ) )
{
    function add_custom_content_meta_box( $post )
    {
        $value = get_post_meta( $post->ID, '_shipping_tab', true ) ? get_post_meta( $post->ID, '_shipping_tab', true ) : '';
        wp_editor( $value, 'custom_shipping_tab', array( 'editor_height' => 100 ) );
        echo '<input type="hidden" name="custom_product_field_nonce" value="' . wp_create_nonce() . '">';

    }
}


//Save the data of the Meta field
add_action( 'save_post', 'save_custom_content_meta_box', 10, 1 );
if ( ! function_exists( 'save_custom_content_meta_box' ) )
{

    function save_custom_content_meta_box( $post_id ) {

        // We need to verify this with the proper authorization (security stuff).

        // Check if our nonce is set.
        if ( ! isset( $_POST[ 'custom_product_field_nonce' ] ) ) {
            return $post_id;
        }
        $nonce = $_REQUEST[ 'custom_product_field_nonce' ];

        //Verify that the nonce is valid.
        if ( ! wp_verify_nonce( $nonce ) ) {
            return $post_id;
        }

        // If this is an autosave, our form has not been submitted, so we don't want to do anything.
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return $post_id;
        }

        // Check the user's permissions.
        if ( 'page' == $_POST[ 'post_type' ] ) {

            if ( ! current_user_can( 'edit_page', $post_id ) ) {
                return $post_id;
            }
        } else {

            if ( ! current_user_can( 'edit_post', $post_id ) ) {
                return $post_id;
            }
        }
        // --- Its safe for us to save the data ! --- //

        // Sanitize user input  and update the meta field in the database.
        update_post_meta( $post_id, '_shipping_tab', wp_kses_post($_POST[ 'custom_shipping_tab' ]) );
    }
}

Then your own code will be:

// Add product custom "Shipping" tab
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {

    $tabs['test_tab'] = array(
        'title'     => __( 'Shipping', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'shipping_product_tab_content'
    );

    return $tabs;
}

// The Shipping tab content
function shipping_product_tab_content()  {
    // The new tab content
    $prod_id = get_the_ID();
    echo'<div><p>'.get_post_meta( get_the_ID(), '_shipping_tab' ,true ).'</p></div>';
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Tested and works.