phpwordpresswoocommerceproductmeta-boxes

Editing Custom product tab content in Woocommerce Admin product pages


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

http://prntscr.com/h37kqv


Solution

  • 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:

    enter image description here

    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.