Bits & Babble

A blog in development.

Woocommerce Tabs and Advanced Custom Fields

December 11, 2013  

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.

Advanced Custom Field for a Woocommerce Product

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.

functions.php
raw download
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' );
}

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.

26 Comments

By SPENCER SOKOL
  • About
  • Twitter
  • Studio 27

Categories

  • Alloy
  • Android
  • Appcelerator Titanium
  • Babble
  • Debugging
  • Genesis
  • iOS
  • s2Member
  • Woocommerce
  • Wordpress

About Spencer Sokol

Spencer co-founded Studio 27, a small web and application design and development company in Indianapolis. He has spent many years in both the development and testing side of the software industry, and generally avoids talking to people face to face.

Trackbacks

  1. Pingback: Woocommerce Tabs and Advanced Custom Fields - Bits & Babble - Freakinthecage Webdesign Stuttgart - Der Blog

Comments

  1. Chris says

    May 13, 2014 at 5:47 pm

    Hi Spencer,
    Thanks so much for this – I just tried it and everything went fine 🙂
    Really happy as I try and avoid doing things like this as they normally go wrong.

    I’m only guessing I need Custom Fields – Is it right that attributes are not too good at storing numbers if every product will have a different number ? I’m just guessing as when I add a number to an attribute it seems to save it as an option like it would text.

    Chris

    Reply
    • Chris says

      May 13, 2014 at 5:50 pm

      ..although I think an attribute is better as then I can sort on it

      Reply
    • Spencer Sokol says

      May 14, 2014 at 2:20 pm

      I think I understand what you’re asking. Your custom field (attribute) is saved as post meta, so you can create custom queries, sorting it numerically, if needed.

      Reply
      • chris says

        May 14, 2014 at 6:17 pm

        Yes so in performance terms with say 10000 products, filtering on a numeric attribute should be exactly the same as filtering on a numeric custom field ? – ie 1) woo doesnt optimise attributes and 2) an attribute would be fine with a different number per product.

        Reply
        • Spencer Sokol says

          May 14, 2014 at 6:45 pm

          I haven’t looked through the framework specifically, but I would think so.

          Reply
          • chris says

            May 14, 2014 at 6:53 pm

            good news – thanks

  2. Tal says

    March 19, 2015 at 3:48 am

    Works like a charm! thanks 🙂

    Reply
  3. Alex Kuznetsof says

    March 19, 2015 at 5:32 pm

    Thanks Men!

    Reply
  4. Daniel says

    July 26, 2015 at 6:35 pm

    This code has me on the verge of what I am trying to accomplish. Thank you! So I have my Advanced Custom Fields set up. The information placed into those advanced custom fields are now showing up on my product pages when content is placed in those fields. Now, what I am ultimately trying to do is get my imported data (via CSV import Suite) into those fields.

    What’s strange is that when I don’t have ACF activated, the data of my CSV creates the custom fields I need with the values imported. I feel like I am missing one snippet of code. Have any ideas? It would be greatly appreciated! Thanks!

    Reply
  5. Mark McDonnell says

    October 3, 2015 at 1:06 pm

    We are setting up a new site for our company. Each product we sell has a description and a short description, and they are displaying properly on our site. For each product, we’ve also set up a custom field which contains copy for any awards and accolades that a product has received. We would like to display this content under a new tab on the product detail page. I’ve been searching around for information on how to do this but not sure I’ve found the right answer. Your post seemed close but I just wanted to make sure what code I need to add, to what file, and exactly where it should be placed within that file. Any help would be greatly appreciated. Thanks.

    Reply
    • Spencer Sokol says

      October 6, 2015 at 2:12 pm

      This is pretty much what you’re looking for. Your code can just go in the functions.php file of your theme (but you can structure your site code practically however you like). If you’re new to WordPress or development in general, I’d highly recommend hiring a developer. This type of customization should come pretty cheap.

      Reply
      • Jens Arne says

        January 31, 2016 at 6:04 pm

        I made a new tab with ACF and implemented it in my themes function.php and it works perfectly as it should. But I need another tap too, and when I implement it in the same way as the first, I get the following error:

        Fatal error: Can not ready clare nova_wp_product_tabs () (previously Declared in /var/www/www.wannafinddemo5.dk/www/wp-content/themes/nova-wp/functions.php:15) in /var/www/www.wannafinddemo5 .com / www / wp-content / themes / nova-wp / functions.php on line 61
        How do I fix that problem?

        Reply
  6. Zoli says

    February 7, 2016 at 8:21 pm

    i want to put product in my custom field. Scortcode dosent work width this example.

    Reply
  7. stooni says

    February 23, 2016 at 6:29 am

    Wow – these i have searched!

    Many Thanks!!

    — and worked without any plugin!
    Yeahhh!
    —-stooni

    Reply
  8. Nam says

    February 26, 2016 at 7:04 am

    Hi Spencer,

    Thanks for the snippet.

    Just a quick question, if I wanted to add more one field to a tab what would I need to add.

    For example displaying another field beneath the “tech_specs” field within the “Technical Specifications” tab on the front-end.

    Thanks!
    Nam

    Reply
    • Nam says

      March 3, 2016 at 9:47 am

      Dw I worked it out using the get_fields function to retrieve all values and their labels.

      Nam

      Reply
      • Harry says

        April 13, 2016 at 4:29 am

        Please explain how yo showed labels on the frontend.

        Reply
      • Harry says

        April 13, 2016 at 9:57 pm

        Hi Sir,
        Could you please paste code showing how you did this? Need multiple fields with labels and cannot figure out how to make work.

        Reply
  9. Harry says

    April 13, 2016 at 4:25 am

    Please explain. How do you show the label when the fields are displayed?

    Reply
    • Spencer Sokol says

      April 14, 2016 at 12:39 pm

      Following the example in the post, you can add labels directly in the my_theme_tech_specs callback function. So instead of echoing just the get_field you can write out anything you need, including a label.

      Reply
    • Spencer Sokol says

      April 14, 2016 at 12:48 pm

      Someone earlier in the thread used the ACF get_fields function. You can see that in action in the ACF documentation.

      Reply
    • Harry says

      April 14, 2016 at 1:15 pm

      Disregard, Figured it out…

      Reply
      • Harry says

        April 14, 2016 at 1:17 pm

        I did this. Your opinion?

        add_filter( ‘woocommerce_product_tabs’, ‘ms_product_tabs_engine’ );
        function ms_product_tabs_engine( $tabs ) {
        // ensure ACF is available
        //if ( !function_exists( ‘get_field’ ) )
        //return;

        $content = trim( get_fields );
        if ( !empty( $content ) ) {

        $tabs[] = array(
        ‘title’ => ‘Engine’,
        ‘priority’ => 15,
        ‘callback’ => ‘product_engine_specs’
        );

        }
        return $tabs;
        }

        function product_engine_specs() {
        if(get_fields)
        {
        echo ‘Engine Type: ‘ . get_field(‘engine_type’) . ”;
        echo ‘Displacement: ‘ . get_field(‘displacement’) . ”;
        }

        Reply
        • Spencer Sokol says

          April 14, 2016 at 2:12 pm

          Yup. Looks like it would accomplish what you need it to.

          Reply
  10. Amber says

    May 2, 2019 at 3:22 pm

    This is a great tutorial. Thank you for sharing! I’ve added this code and another one for another tab for my product however it seems that the text in both tabs run together. How do I make it so the text I put in my “Ingredients” tab is the only text I see when clicking on that tab? (instead of seeing both my “Ingredients” AND “Directions” tab content together).

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • About
  • Indianapolis Design & Development
Copyright © 2021 Spencer Sokol

Copyright © 2021 · Bits and Babble on Genesis Framework · WordPress · Log in