Woocommerce Tabs and Advanced Custom Fields

Woocommerce is a great free ecommerce plugin for WordPress. Because of Woocommerce’s extensibility, adding custom tabs to a product is pretty easy. So let’s do a little bit of WordPress development, and add Woocommerce tabs populated with content from an Advanced Custom Field we’ll add to the product post type.

Advanced Custom Fields Setup

After you’ve installed Woocommerce and Advanced Custom Fields, you’re ready to get going. Head into the Custom Fields area in the WordPress admin, and add a new field group. In the field group, add a WYSIWYG field called “Tech Specs”. The field name should automatically be set to tech_specs. We’ll use this later.

Before saving your field group, you’ll want to limit this custom field to products only. Scroll down to the Location meta box, and set it up to only appear for the product post type. It should look something like this.

Save your field group, and you’re ready to add your custom tab to Woocommerce.

Woocommerce Tabs Code

We’ve got our custom “Tech Specs” field, so let’s move on to customizing the product entry. The implementation is fairly simple. We just need to hook into the proper Woocommerce filter, and create a function to output our new custom field.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

add_filter( 'woocommerce_product_tabs', 'my_theme_product_tabs' );
 
function my_theme_product_tabs( $tabs ) {
 
  // ensure ACF is available
  if ( !function_exists( 'get_field' ) )
    return;
 
  $content = trim( get_field( 'tech_specs' ) );
 
  if ( !empty( $content ) ) {
 
    $tabs[] = array(
      'title' => 'Technical Specifications',
      'priority' => 15,
      'callback' => 'my_theme_tech_specs'
    );
 
  }
 
  return $tabs;
}
 
function my_theme_tech_specs() {
  echo get_field( 'tech_specs' );
}

Here, we’ve hooked into the woocommerce_product_tabs filter with my_theme_product_tabs. Line 13 is where we add a new tab, with a title, a priority, and a callback to output our content. Before adding the tab, I added a couple of checks. First making sure that we have access to the get_field function to access our custom field content (see line 24). Second, to make sure our product has technical specifications. With this code, we can hide the tab if there’s nothing to show.

Now add/edit a Woocommerce product to have some Tech Specs, and view your handiwork on the front end of your site.

Follow the same implementation, and you can add as many Woocommerce tabs as you like. That’s really all there is to it.