Add a meta box in a new tab on the product edit page of WooCommerce

Question

I use code that displays custom WooCommerce product tabs. This code is based on "Custom metabox content displayed in single product additional tabs on Woocommerce"

// Add a custom metabox
add_action( 'add_meta_boxes', 'additional_product_tabs_metabox' );
function additional_product_tabs_metabox()
{
    add_meta_box(
        'add_product_metabox_additional_tabs',
        __( 'Specifications Product Tabs', 'woocommerce' ),
        'additional_product_tabs_metabox_content',
        'product',
        'normal',
        'high'
    );
}

//  Add custom metabox content
function additional_product_tabs_metabox_content( $post )
{
    // Technical Specification
    echo '<h4>' . __( 'Technical Specification', 'woocommerce' ) . '</h4>';
    $value = get_post_meta( $post->ID, '_technical_specification', true );
    wp_editor( $value, '_technical_specification', array( 'editor_height' => 100 ) );

    // Nonce field (for security)
    echo '<input type="hidden" name="additional_product_tabs_nonce" value="' . wp_create_nonce() . '">';
}


// Save product data
add_action( 'save_post_product', 'save_additional_product_tabs', 10, 1 );
function save_additional_product_tabs( $post_id ) {

    // Security check
    if ( ! isset( $_POST[ 'additional_product_tabs_nonce' ] ) ) {
        return $post_id;
    }

    //Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $_POST[ 'additional_product_tabs_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;
    }

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

    // Sanitize user input and save the post meta fields values.

    if( isset($_POST[ '_technical_specification' ]) )
        update_post_meta( $post_id, '_technical_specification', wp_kses_post($_POST[ '_technical_specification' ]) );

}

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

    // Adding new tabs and set the right order

    // Technical Specification Tab
    $tabs['technical_specification_tab'] = array(
        'title'     => __( 'Technical Specification', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'woo_technical_specification_tab_content'
    );

    $tabs['reviews']['priority'] = 60;

    return $tabs;
}

function woo_technical_specification_tab_content()  {
    global $product;

    echo'<p>'. $product->get_meta( '_technical_specification' ) . '</p>';
}

On the product editing page, the field with the editor is displayed in a separate meta box.

How can I add this meta box in a new tab? I only have the code to create such a tab.

/* Custom Product Tab */
add_filter('woocommerce_product_data_tabs', 'custom_product_settings_tabs' );
function custom_product_settings_tabs( $tabs ){
 
    $tabs['specifications'] = array(
        'label'    => 'Specifications',
        'target'   => 'custom_specifications_product_tabs',
        'class'    => array('show_if_simple', 'show_if_variable'),
        'priority' => 71,
    );
    return $tabs;
 
}

I would be glad to have your help!

Add a meta box in a new tab on the product edit page of WooCommerce

0 Answers0