Hello!
It looks like you have a couple options for customizing your tabs. You can either purchase the WooCommerce Tab Manager or change it manually in your theme’s code. That would look something like:
- Add a Storefront child theme (here’s one I found)
- Put the below code in your child theme’s function.php file
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['test_tab'] = array(
'title' => __( 'New Product Tab', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
function woo_new_product_tab_content() {
// The new tab content
echo '<h2>New Product Tab</h2>';
echo '<p>Here\'s your new product tab.</p>';
}
(I found this code here)
- Customize this code to your liking
Hope that helps! Let me know if I can clarify anything. 🙂
Thread Starter
evollo
(@evollo)
CREATION OF A NEW TAB WILL NOT WORK. It is important that I preserve the “Additional Information” tab function, as I am using “attributes” fields for “Where to buy” information.
CHILD THEME. I am already using a simple child theme. (FYI, your link to a child theme returns a 404 error.)
CHANGE TAB LABEL. As mentioned in my original post, I have already changed the Additional Information tab label with this code:
add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );
function woo_rename_tabs( $tabs ) {
$tabs['additional_information']['title'] = __( 'Where to buy' ); // Rename the additional information tab
return $tabs;
}
CHANGE <H2> TITLE: I need to replace the text <h2>Additional Information</h2> to <h2>Where to buy</h2> within the tab content area. How can this be done?
I see. Try adding this after your code:
add_filter('woocommerce_product_additional_information_heading',
'change_heading');
function change_heading() {
echo '<h2>Where to buy</h2>';
}
Thank you @FieldDraft I was also looking for a solution to this thing!
If I want to leave it saying Additional Information, but I want the font size to be smaller, how would I change that?
@quiltdw :
See where Dennis put the h2 tags in the above code?
Change both of those to h3, h4, h5, or h6
Yep that should do it!
If you need a more specific font size you will need to add a CSS class to the h tags and target it in a custom CSS plugin using font-size. Let me know if you need me to go into more detail.
I followed FieldDrafts code to add an additional tab and it worked great. However, I need to add another tab so I just duplicated the code but that didn’t work. Any Suggestions? Thank you!
