In this example, we’ll show how to use code to add a new tab with custom content to the product detail and how to remove the default “More Info” tab.
Adding a new tab with custom content to the product detail in WooCommerce
First we need to open the functions.php file in our active theme (preferably in the child theme) and add the following code:
add_filter('woocommerce_product_tabs', 'new_custom_product_tab');
function new_custom_product_tab($tabs){
$doplnkove_info = get_post_meta(get_the_ID(), 'dalsie-informacie', true);
if ($doplnkove_info) {
$tabs['new_custom_tab'] = array(
'title' => __('Ďalšie informácie', 'textdomain'),
'priority' => 50,
'callback' => 'new_custom_tab_content'
);
}return $tabs;
}function new_custom_tab_content()
{$doplnkove_info = get_post_meta(get_the_ID(), 'dalsie-informacie', true);
echo '<p>' . $doplnkove_info . '</p>';
}
This code will add a new tab called “Additional Information” to the product detail. In this example, we assume that we have our own field for additional information called “additional-information”, which we have already created in advance, e.g. in the ACF plugin or another one, which has been written about here for example.
If we want to change the name of a tab, or change the priority, we can edit the values in the tabs field. For example, if we want to change the title of a tab to ‘Product Information’, we change the ‘title’ to ‘Product Information’.
If we want to remove the default tab that the product detail displays by default “More Info” from the product detail in WooCommerce, we can use the following code:
/*** Remove DALSIE INFORMACIE TAB*/add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
unset( $tabs['additional_information'] ); // Odstrániť záložku "Ďalšie informácie"
return $tabs;
}
Summary
Adding a custom tab with custom content to your product details in WooCommerce is very easy with code. This approach allows you to customize product details and add additional information that might not otherwise be included in the default tabs.
In addition, we have also shown how to remove the default “More Info” tab from the product detail if we decide to use a custom tab. Using these codes allows us to customize product details and create a professional and fully functional online store using WooCommerce.
I am a frontend developer and web developer interested in WordPress and WooCommerce. I have experience in creating e-shops and lately I’ve been focusing on modern technologies like React. I use my skills to help clients improve their websites and applications. I believe that my experience allows me to offer quality and effective solutions.
