Hi,
Thank you for reaching out and for using our Custom Product Tabs for WooCommerce plugin.
At the moment, the plugin doesn’t support adding HTML directly to the tab title through the user interface. However, we appreciate your suggestion and will definitely consider adding this feature in a future update.
In the meantime, you can achieve this functionality by using the wb_cptb_alter_tabs filter. Below is a sample code snippet that demonstrates how to append custom HTML to a tab title:
function wb_cptb_alter_tabs_head( $tabs, $product ) {
if ( is_array( $tabs ) ) {
foreach( $tabs as $key => $tab_data ) {
$tab_data['title'] = $tab_data['title'] . '<span style="display:inline-block; padding:1px 8px; background:#ff7d00; color:#fff; border:solid 1px #d2883f; border-radius:4px; margin-left:5px;">4</span>';
$tabs[$key] = $tab_data;
}
}
return $tabs;
}
add_filter( 'wb_cptb_alter_tabs', 'wb_cptb_alter_tabs_head', 10, 2 );
You’ll need to add the above code to your active child theme’s functions.php file or use a code snippet plugin to apply it safely.
You can customize the HTML and styles as needed to match your design requirements.
Hello and thank you very much for the quick response. Unfortunately, the code adds the HTML to all custom tabs. Is it possible to extend the plugin in the functions.php file so that I can insert custom HTML code into each individual tab?
Thank you in advance.
Hi,
The provided code snippet is just a sample. You’ll need to customize it to fit your specific needs. If you can clearly explain your requirements, we may be able to help you modify the snippet accordingly.
Hi,
Thanks for the clarification.
What I’m trying to achieve is quite simple: I’d like to be able to insert HTML code directly into the title of the tabs. However, every time I add HTML there, it gets removed after saving.
I suspect there’s something in the plugin’s code that strips or blocks HTML from being used in the tab titles.
Is there a way to modify this behavior so that HTML is allowed in the tab titles?
Thanks in advance!
Hi,
Thanks again for your follow-up.
To clarify, the plugin currently does not support adding HTML directly in the tab title via the UI — any HTML entered there will be stripped.
The code snippet we shared earlier was just a generic example to demonstrate how it’s technically possible to inject HTML using a filter. By default, it applies to all tabs, but it can be customized to target specific tabs or products.
If you can share more details, like:
- Which tab(s) should have the custom HTML in the title (e.g., based on title or ID)?
- Should this be applied to all products or only certain ones?
…we’d be happy to help you adjust the code accordingly.
Hi,
Thanks for the explanation!
I’d like to insert HTML into the title based on the tab ID.
How can I assign a specific ID to a tab so that I can target it in the code?
Thanks again for your support!
Hi,
You can use the tab slug as a unique identifier for each tab, which can be set from the admin dashboard. Please check the modified code snippet below. In this example, we’re adding HTML to the tab title only for tabs with the slug abcd.
function wb_cptb_alter_tabs_head( $tabs, $product ) {
if ( is_array( $tabs ) ) {
foreach( $tabs as $key => $tab_data ) {
// Add HTML to tab title with slug abcd.
if ( $tab_data['slug'] === 'abcd' ) {
$tab_data['title'] = $tab_data['title'] . '<span style="display:inline-block; padding:1px 8px; background:#ff7d00; color:#fff; border:solid 1px #d2883f; border-radius:4px; margin-left:5px;">4</span>';
$tabs[$key] = $tab_data;
}
}
}
return $tabs;
}
add_filter( 'wb_cptb_alter_tabs', 'wb_cptb_alter_tabs_head', 10, 2 );
Hi,
Thank you for your reply and the code snippet!
For SEO reasons, I prefer not to use slugs for my tabs.
Is there a way to assign a unique identifier to each tab, without relying on the slug?
Ideally, I would like to use something like a unique ID that doesn’t affect the front-end URL structure or SEO.
Thanks in advance for your support!
Best regards
Another field you can use as a unique identifier is the nickname field. The updated snippet would look like this:
function wb_cptb_alter_tabs_head( $tabs, $product ) {
if ( is_array( $tabs ) ) {
foreach( $tabs as $key => $tab_data ) {
// Add HTML to tab title with nickname abcd.
if ( $tab_data['nickname'] === 'abcd' ) {
$tab_data['title'] = $tab_data['title'] . '<span style="display:inline-block; padding:1px 8px; background:#ff7d00; color:#fff; border:solid 1px #d2883f; border-radius:4px; margin-left:5px;">4</span>';
$tabs[$key] = $tab_data;
}
}
}
return $tabs;
}
add_filter( 'wb_cptb_alter_tabs', 'wb_cptb_alter_tabs_head', 10, 2 );
