Thanks to these two posts I have come up with this solution for adding multiple tabs to Woocommerce product detail page.
Editing Custom product tab content in Woocommerce Admin product pages
Adding multiple tabs to WooCommerce single product pages
However, I am still having trouble saving the data and can't figure out how to make each meta_box save. I thought of a foreach statement but I'm not that well versed in PHP to know how the syntax is.
Here is my code. I have 6 tabs I added which show up on the page, and the meta boxes show up in the admin panel but they won't save any input. I only have one that is trying to save right now and I feel like the problem is in the save function.
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_cost_field',
__( 'Cost and Performance Tab', 'woocommerce' ),
'add_custom_content_meta_box',
'product',
'normal',
'high'
);
add_meta_box(
'custom_product_environment_field',
__( 'Environment Tab', 'woocommerce' ),
'add_custom_content_meta_box',
'product',
'normal',
'high'
);
add_meta_box(
'custom_product_dilution_field',
__( 'Dilution Directions Tab', 'woocommerce' ),
'add_custom_content_meta_box',
'product',
'normal',
'high'
);
add_meta_box(
'custom_product_packaging_field',
__( 'Packaging and Handling', 'woocommerce' ),
'add_custom_content_meta_box',
'product',
'normal',
'high'
);
add_meta_box(
'custom_product_application_field',
__( 'Use and Application Tab', 'woocommerce' ),
'add_custom_content_meta_box',
'product',
'normal',
'high'
);
add_meta_box(
'custom_product_specification_field',
__( 'Product Specification Tab', '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, 'cost_performance_tab', true ) ? get_post_meta( $post->ID, 'cost_performance_tab', true ) : '';
wp_editor( $value, 'custom_cost_performance_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, 'cost_performance_tab', wp_kses_post($_POST[ 'custom_cost_performance_tab' ]) );
}
}
add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tabs' );
function woo_custom_product_tabs( $tabs ) {
// 1) Removing tabs
unset( $tabs['description'] ); // Remove the description tab
// unset( $tabs['reviews'] ); // Remove the reviews tab
unset( $tabs['additional_information'] ); // Remove the additional information tab
// 2 Adding new tabs and set the right order
//Attribute Cost and Performance tab
$tabs['cost_performance_tab'] = array(
'title' => __( 'Cost + Performance', 'woocommerce' ),
'priority' => 100,
'callback' => 'woo_cost_performance_tab_content'
);
// Adds the environment tab
$tabs['environment_tab'] = array(
'title' => __( 'Environment', 'woocommerce' ),
'priority' => 110,
'callback' => 'woo_environment_tab_content'
);
// Adds the dilution tab
$tabs['dilution_tab'] = array(
'title' => __( 'Suggested Dilution Directions', 'woocommerce' ),
'priority' => 120,
'callback' => 'woo_dilution_tab_content'
);
// Adds the packaging tab
$tabs['packaging_tab'] = array(
'title' => __( 'Packaging + Handling', 'woocommerce' ),
'priority' => 120,
'callback' => 'woo_packaging_tab_content'
);
// Adds the application tab
$tabs['application_tab'] = array(
'title' => __( 'Use + Application', 'woocommerce' ),
'priority' => 120,
'callback' => 'woo_application_tab_content'
);
// Adds the application tab
$tabs['specification_tab'] = array(
'title' => __( 'Product Specification', 'woocommerce' ),
'priority' => 120,
'callback' => 'woo_specification_tab_content'
);
return $tabs;
}
function woo_cost_performance_tab_content() {
// The new tab content
$prod_id = get_the_ID();
echo'<div><p>'.get_post_meta( get_the_ID(), 'cost_performance_tab' ,true ).'</p></div>';
}
function woo_environment_tab_content() {
// The new tab content
$prod_id = get_the_ID();
echo'<div><p>'.get_post_meta( get_the_ID(), 'environment_tab' ,true ).'</p></div>';
}
function woo_dilution_tab_content() {
// The new tab content
$prod_id = get_the_ID();
echo'<div><p>'.get_post_meta( get_the_ID(), 'dilution_tab' ,true ).'</p></div>';
}
function woo_packaging_tab_content() {
// The new tab content
$prod_id = get_the_ID();
echo'<div><p>'.get_post_meta( get_the_ID(), 'packaging_tab' ,true ).'</p></div>';
}
function woo_application_tab_content() {
// The new tab content
$prod_id = get_the_ID();
echo'<div><p>'.get_post_meta( get_the_ID(), 'application_tab' ,true ).'</p></div>';
}
function woo_specification_tab_content() {
// The new tab content
$prod_id = get_the_ID();
echo'<div><p>'.get_post_meta( get_the_ID(), 'specification_tab' ,true ).'</p></div>';
}
You don't need 6 metaboxes in admin product edit pages and there is a lot of mistakes… Try the following instead:
// 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',
__( 'Additional product Tabs', 'woocommerce' ),
'additional_product_tabs_metabox_content',
'product',
'normal',
'high'
);
}
// Add custom metabox content
function additional_product_tabs_metabox_content( $post )
{
// Cost and Performance
echo '<h4>' . __( 'Cost and Performance', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_cost_performance', true );
wp_editor( $value, '_cost_performance', array( 'editor_height' => 100 ) );
// Environment
echo '<br><hr><h4>' . __( 'Environment', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_environment', true );
wp_editor( $value, '_environment', array( 'editor_height' => 100 ) );
// Dilution Directions
echo '<br><hr><h4>' . __( 'Dilution Directions', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_dilution_directions', true );
wp_editor( $value, '_dilution_directions', array( 'editor_height' => 100 ) );
// Environment
echo '<br><hr><h4>' . __( 'Packaging and Handling', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_packaging_and_handling', true );
wp_editor( $value, '_packaging_and_handling', array( 'editor_height' => 100 ) );
// Use and Application
echo '<br><hr><h4>' . __( 'Use and Application', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_use_and_application', true );
wp_editor( $value, '_use_and_application', array( 'editor_height' => 100 ) );
// Environment
echo '<br><hr><h4>' . __( 'Specification', 'woocommerce' ) . '</h4>';
$value = get_post_meta( $post->ID, '_specification', true );
wp_editor( $value, '_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[ '_cost_performance' ]) )
update_post_meta( $post_id, '_cost_performance', wp_kses_post($_POST[ '_cost_performance' ]) );
if( isset($_POST[ '_environment' ]) )
update_post_meta( $post_id, '_environment', wp_kses_post($_POST[ '_environment' ]) );
if( isset($_POST[ '_dilution_directions' ]) )
update_post_meta( $post_id, '_dilution_directions', wp_kses_post($_POST[ '_dilution_directions' ]) );
if( isset($_POST[ '_packaging_and_handling' ]) )
update_post_meta( $post_id, '_packaging_and_handling', wp_kses_post($_POST[ '_packaging_and_handling' ]) );
if( isset($_POST[ '_use_and_application' ]) )
update_post_meta( $post_id, '_use_and_application', wp_kses_post($_POST[ '_use_and_application' ]) );
if( isset($_POST[ '_specification' ]) )
update_post_meta( $post_id, '_specification', wp_kses_post($_POST[ '_specification' ]) );
}
add_filter( 'woocommerce_product_tabs', 'woo_custom_product_tabs' );
function woo_custom_product_tabs( $tabs ) {
// 1) Removing tabs
unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['additional_information'] ); // Remove the additional information tab
// 2 Adding new tabs and set the right order
//Attribute Cost and Performance tab
$tabs['cost_performance_tab'] = array(
'title' => __( 'Cost + Performance', 'woocommerce' ),
'priority' => 10,
'callback' => 'woo_cost_performance_tab_content'
);
// Adds the environment tab
$tabs['environment_tab'] = array(
'title' => __( 'Environment', 'woocommerce' ),
'priority' => 20,
'callback' => 'woo_environment_tab_content'
);
// Adds the dilution tab
$tabs['dilution_tab'] = array(
'title' => __( 'Suggested Dilution Directions', 'woocommerce' ),
'priority' => 30,
'callback' => 'woo_dilution_tab_content'
);
// Adds the packaging tab
$tabs['packaging_tab'] = array(
'title' => __( 'Packaging + Handling', 'woocommerce' ),
'priority' => 40,
'callback' => 'woo_packaging_tab_content'
);
// Adds the application tab
$tabs['application_tab'] = array(
'title' => __( 'Use + Application', 'woocommerce' ),
'priority' => 60,
'callback' => 'woo_application_tab_content'
);
// Adds the specification tab
$tabs['specification_tab'] = array(
'title' => __( 'Specification', 'woocommerce' ),
'priority' => 70,
'callback' => 'woo_specification_tab_content'
);
$tabs['reviews']['priority'] = 80;
return $tabs;
}
function woo_cost_performance_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_cost_performance' ) . '</p></div>';
}
function woo_environment_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_environment' ) . '</p></div>';
}
function woo_dilution_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_dilution_directions' ) . '</p></div>';
}
function woo_packaging_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_packaging_and_handling' ) . '</p></div>';
}
function woo_application_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_use_and_application' ) . '</p></div>';
}
function woo_specification_tab_content() {
global $product;
echo'<div><p>'. $product->get_meta( '_specification' ) . '</p></div>';
}
Code goes in function.php file of your active child theme (or active theme). Tested and work.