In this tutorial we will create new woocommerce tabs for product page, which will be administrated from admin. We will use ACF because is one of the best plugins for Wordpress at the moment. To achive that, we will create few custom fields for our product page, and then we will create a hook to insert our new tabs with the information from our custom fields. Also we will check if the fieldls (ACF fields) are empty, the tab won't show up.

Create Woocommerce Tabs

First of all we have to create the fields. To do that go in admin -> Custom Fields and create new group for product page. We will create 2 new fields:

• Video URL - video_url
• Size Guide - size_guide

Now we have to add a hook in functions.php in order to check if those fields are empty or not, if not we will show the new tab in product page. Open your functions.php file and copy paste the following bunch of code:

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
  function woo_remove_product_tabs( $tabs ) {
    $check_video = get_field('video_url');
    $check_size_guide = get_field('size_guide');
    if(!empty($check_video)){
      $tabs['product_video'] = array(
        'title' => 'Video',
          'priority' => 10,
          'callback' => 'get_custom_video_product_tab_content',
      );
    }
    
    if(!empty($check_size_guide)){
      $tabs['product_video'] = array(
        'title' => 'Size Guide',
          'priority' => 10,
          'callback' => 'get_custom_size_guide_product_tab_content',
      );
    };
    
      return $tabs;
  }

  function get_custom_video_product_tab_content(){
    $template = '<div class=""></div>';
    echo $template;
  }
  function get_custom_size_guide_product_tab_content(){
    $template = '<div class=""></div>';
    echo $template;
  }

As you can see in the above code,  first thing we do is to get the fields for the current product, then we check the fields to know if are empty or not. If not we will add a new item to the $tabs array and then call our custom function in order to show the content for the tab. 

If you want to remove a default tab from array you can use the following unset function:

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
    unset( $tabs['description'] );
    unset( $tabs['additional_information'] ); 
}

Using the above code you remove description and additional information default tabs. Let me know if you need any help implementing these tabs in the comment section. More tutorials about woocommerce and ACF will come soon.