Hide custom tab when no content is present in woocommerce products

0 Views

Is there a way I can hide the custom tabs if there is no content present in the field box. I am implementing this with advanced custom fields plugin. So far the tab is still present even if there is no content placed

Here is the code that I have placed in my functions.php

Read More
add_filter( 'woocommerce_product_tabs', 'woo_new_direction_tab' );
function woo_new_direction_tab( $tabs ) {

// Adds the new tab

    $tabs['direction_tab'] = array(
        'title'     => __( 'Direction', 'woocommerce' ),
        'priority'  => 60,
        'callback'  => 'woo_new_direction_tab_content'
    );

    return $tabs;

}


function woo_new_direction_tab_content() {

    // The new tab content

    echo the_field('directions');

}

UPDATE 

//Direction Tab
add_filter( 'woocommerce_product_tabs', 'woo_new_direction_tab' );
function woo_new_direction_tab( $tabs ) {

// Adds the new tab

    $tabs['direction_tab'] = array(
        'title'     => __( 'Direction', 'woocommerce' ),
        'priority'  => 60,
        'callback'  => 'woo_new_direction_tab_content'
    );


    return $tabs;





}


function woo_new_direction_tab_content() {

    if( get_field('directions') )
    {
        echo the_field('directions');
    }

    else
    {
        echo "<style>li.direction_tab_tab{ display:none !important; }</style>";
    }

}
Post Views: 0

Related posts

Leave a Reply

7 comments

  1. Hej, I had the same problem and found a much nicer way to solve this. I only add the tab when it has content. Maybe this helps everybody else finding this thread.

    add_filter( 'woocommerce_product_tabs', 'woo_new_direction_tab' );
function woo_new_direction_tab( $tabs ) {

    // Adds the new tab

    if (!empty(the_field('directions'))) {
        $tabs['direction_tab'] = array(
            'title'     => __( 'Direction', 'woocommerce' ),
            'priority'  => 60,
            'callback'  => 'woo_new_direction_tab_content'
        );
    }

    return $tabs;

}


function woo_new_direction_tab_content() {

    // The new tab content

    echo the_field('directions');

}

  2. There is most likely a better way of doing this, but I’ve achieved this in the past with the following:

    if( get_field('directions') )
{
    echo the_field('directions');
}
else
{
    echo "<style>.direction_tab_tab { display:none !important; }</style>";
}

    This will print the contents of the “directions” field if there is text in it, if not it will print the css and hide the tab.

  3. A better way will be

    if( get_field('directions') ) {
  $tabs['direction_tab'] = array(
      'title'     => __( 'Direction', 'woocommerce' ),
      'priority'  => 60,
      'callback'  => 'woo_new_direction_tab_content'
  );
 }

    That will hide the tab if there is no content in the tab

  4. The easiest method is to remove the tab.

    You can do this based on the content of text field, which in case is empty just use this.

     unset( $tabs['direction_tab'] );   // Remove the additional direction tab

    And you are done 🙂

  5. You can use get_field() to check if there is content available.

    add_filter( 'woocommerce_product_tabs', 'woo_new_direction_tab' );
function woo_new_direction_tab( $tabs ) {

// Check if there is content and add the tab if so
if(get_field(direction_tab)){
  $tabs['direction_tab'] = array(
      'title'     => __( 'Direction', 'woocommerce' ),
      'priority'  => 60,
      'callback'  => 'woo_new_direction_tab_content'
  );
}

return $tabs;

    }

    function woo_new_direction_tab_content() {
    echo get_field('directions');
}

  6. This code works for me in 2021. It only adds a custom tab when the desired field is full. If the field is empty, it hides the tab without a trace.

        //Add a custom product data tab

add_filter( 'woocommerce_product_tabs', 'woo_new_custom_tab' );
function woo_new_custom_tab( $tabs ) {
    global $post, $product;
    
    // Adds the new tab

    if( get_field('field_123') ) {
        $tabs['custom_tab'] = array(
            'title'     => __( 'Custom Tab', 'woocommerce' ),
            'priority'  => 25,
            'callback'  => 'woo_new_custom_tab_content'
        );
    }
    
    return $tabs;

}

   //Add content to a tab and hide it if it is empty

function woo_new_custom_tab_content() {
    global $post, $product;
    
    if( get_field('field_123') ) {
        echo '<h2>Custom Tab</h2>';
        echo '<p>'.get_field('field_123',$post->ID).'</p>';
    }
}

  7. Basically you use the field with the tab content in to conditionally show the tab. The code checks if the field is empty, if it is then it unsets the tab so it doesn’t display. If the field has content it it returned. I’ve also adjusted the tab content with the conditional too. I.e. check if there is content and if there is then return the tab. This is optional as even without the check the tab won’t be returned if there is no content in the field.

    add_filter( 'woocommerce_product_tabs', 'woo_new_direction_tab' );
function woo_new_direction_tab( $tabs ) {

// Adds the new tab

    $tabs['direction_tab'] = array(
        'title'     => __( 'Direction', 'woocommerce' ),
        'priority'  => 60,
        'callback'  => 'woo_new_direction_tab_content'
    );
    
    if(empty(get_field('directions'))): 
   		
   	unset( $tabs['direction_tab'] );
   	
    else:
    
        return $tabs;
    	
    endif;
}

function woo_new_direction_tab_content() {

    // The new tab content
    if(get_field('directions')): 
        echo '<h2>Directions</h2>';
        the_field('directions'); 
    endif;

}