Customizing Woocommerce tabs with ACF tabs

• bod

• June 16, 2021 at 9:48 pm

In ACF (free version) I have set up some custom fields and organized them into two tabs.

I would like to display those tabs on the front end. I have been able to display one of two tabs successfully but for the life of me, I can’t get the content of tab two to show, just the title of tab two?

This is the code I’m using:

// ACF For Tabs on Product Pages 

if (class_exists('acf') && class_exists('WooCommerce')) {
  add_filter('woocommerce_product_tabs', function($tabs) {
        global $post, $product;
        
        $custom_tab_title = get_field('product-details-tab-title', $post->ID);
 
        if (!empty($custom_tab_title)) {
              $tabs['awp-' . sanitize_title($custom_tab_title)] = [
                    'title' => $custom_tab_title,
                    'callback' => 'awp_custom_woocommerce_tabs_one',
                    'priority' => 10
              ];
        }

        $second_tab_title = get_field('secondary_tab_title', $post->ID);
        
        if (!empty($second_tab_title)) {
              $tabs['apw-' . sanitize_title($second_tab_title)] = [
                    'title' => $second_tab_title,
                    'callback' => 'awp_custom_woocommerce_tabs_two',
                    'priority' => 10
              ];
        }
        
        return $tabs;
  });

  // Tab Content goes here
  function awp_custom_woocommerce_tabs_one($key, $tab) {
        global $post;

        // Product details
        echo '';  
              $product_details_text = get_field('product_details_text', $post->ID);
              echo $product_details_text;
        echo '
';

              $customIconOne = get_field('customIconOne', $post->ID);
                    echo '<img src="' . $customIconOne . '" alt="icon" />';
              echo '</div>';

         
                    $customIconTwo = get_field('customIconTwo', $post->ID);
                          echo '<img src="' . $customIconTwo . '" alt="icon" />';

        // Features
    

        echo '<div>';
              $features = get_field('features', $post->ID);
              echo $features;
        echo '<div>';

            $featured = get_field('featured', $post->ID);
            echo $featured;

  
  }

          // Second Tab Content goes here
          function awp_custom_woocommerce_tabs_two($key, $tab) {
            global $post;
              
            // Second Tab Text
            echo '';  
                  $secondTabText = get_field('secondTabText', $post->ID);
                  echo $secondTabText;
            echo '
';

          }
             
}

What am I doing wrong?