HOW TO ADD CUSTOM PRODUCT TABS TO THE WOOCOMMERCE SINGLE PRODUCT PAGE?
For adding custom product tabs to the Woocommerce single product there are 2 solutions.
1. Use a free/commercial plugin
2. Do it yourself
1. The easiest way to add custom tabs is to use a free plugin with limited functionalities or buy a commercial version of the plugin. The free version of the plugin has a limit to add one tab to your product page and doesn’t have an option to remove the current default tabs (description/attributes/reviews). Also the commercial version doesn’t have that kind of limits.
The commercial version of the plugin is called the WooCommerce Tab Manager and you can find it at the following link . WooCommerce Tab Manager gives you control over product page tabs. You can easily reorder tabs via drag-and-drop interface , create and delete tabs and share tabs with multiple products.
2. To edit/delete/add new tabs to your WooCommerce products you need to know a little bit of coding. We will help you to accomplish that with code snippets and detailed explanation.
You need to add all code snippets to your theme/childtheme functions.php file.
For every code you will need to add a filter and create a function. To trigger our function, we will create a filter with WordPress function add_filter ();. Detail explanation of the add_filter (); function you can find here. For all the tab changes we will use the woocommerce_product_tabs filter without custom function.
To remove specific tabs from WooCommerce product page, we will use the following code.
add_filter( 'woocommerce_product_tabs', 'remove_specific_product_tabs', 98 );
function woo_remove_product_tabs( $current_tabs ) {
unset( $current_tabs['description'] ); /* Remove the description tab */
unset( $current_tabs['reviews'] ); /* Remove the reviews tab */
unset( $current_tabs['additional_information'] ); /* Remove the additional information tab */
return $current_tabs; /* Return the remaining tabs to display */
}
To re-order tabs you can easily change the priority for every tab with the same filter.
add_filter( 'woocommerce_product_tabs', 'custom_reorder_tabs', 98 );
function custom_reorder_tabs( $current_tabs ) {
$current_tabs['reviews']['priority'] = 5; /* Reviews goes first*/
$current_tabs['description']['priority'] = 10; /* Description goes second */
$current_tabs['additional_information']['priority'] = 15; /* Additional information goes third */
return $tcurrent_tabs; /* Return all tabs to display */
}
To Customize specific tabs from WooCommerce product page, we will use the following code.
add_filter( 'woocommerce_product_tabs', 'custom_additional_information_tab', 98 );
functioncustom_additional_information_tab( $tabs ) {
$tabs[additional_information]['callback'] = 'woo_custom_additional_information_tab_content'; /* Custom Additional information callback function */
return $tabs; /* Return the customized tab to display */
}
function woo_custom_additional_information_tab_content() {
echo 'Custom Additional information';
echo ' Here\'s a custom additional information '; /* Here you can use the function to display meta boxes, advance custom fields etc.*/ }
Adding a custom tab. We will add an array with the following values for the title, priority and the callback function for our new tab. To set the title we will add New Custom Product Tab. To set the new tab after the Additional information tab we will add a priority 50. To display our custom content with the callback function called new_product_tab_content ().
add_filter( 'woocommerce_product_tabs', 'new_product_tab' );
function new_product_tab( $tabs ) {
/* Adds the new tab */
$tabs['test_tab'] = array(
'title' => __( 'New Custom Product Tab', 'woocommerce' ),
'priority' => 50,
'callback' => 'new_product_tab_content'
);
return $tabs; /* Return all tabs including the new New Custom Product Tab to display */
}
function new_product_tab_content() {
/* The new tab content */
echo 'New Product Tab';
echo ' Here\'s your new product tab.'; /* Here you can use the function to display meta boxes, advance custom fields etc.*/
}
