We have a client who wants their products to have custom product tabs on the product page and those tabs will have titles and content that will change per product. They also need this to be easily editable so that they can manage it. So, we decided to use Advanced Custom Fields (ACF) with a repeater field and use filter to edit the tabs.
When I say tabs, I’m talking about the tabs of information that show on Woocommerce products. By default, it shows the description and other information about the product.
Here’s what the tabs look like by default:
If they look different for you, depending on the theme, they can be left aligned like this image or on top. Still the same thing, though.
Step 1: Set up ACF
We set up a repeater field with “tab title” and “tab content” fields inside of it:
Then, we attached it to products and that was it for ACF!
Step 2: Add code
Next, we added some code to functions.php to tell the site to add new tabs based on the fields for that product:
// add custom tabs
add_filter('woocommerce_product_tabs','add_custom_tabs',97);
function add_custom_tabs($tabs) {
//if you want to remove the default tabs
//unset($tabs['description']); // Remove the description tab
//unset($tabs['reviews']); // Remove the reviews tab
//unset($tabs['additional_information']); // Remove the additional information tab
global $product;
$tabs_data = get_field('tabs_info', $product->get_id());
if(!empty($tabs_data)) {
foreach($tabs_data as $i => $tab) {
$tabs['tab'.$i] = array(
'title' => $tab['tab_title'], //needs to match ACF
'text' => $tab['tab_content'], //needs to match ACF
'priority' => $tabCounter,
'callback' => 'custom_tab_content'
);
}
}
return $tabs;
}
function custom_tab_content($slug, $tab) {
echo (!empty($tab['text']) ? $tab['text'] : '');
}
And the result is this!
