CODEWITHSUNDEEP
phphtmlwordpressfunctionwoocommerce
clestcruz
clestcruz

Reputation: 1111

Hide custom tab when no content is present in woocommerce products

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 

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>";
    }

}

Upvotes: 9

Views: 9583

Answers (7)

Р. Р.
Р. Р.

Reputation: 95

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>';
    }
}

Upvotes: 1

Alon Katziri
Alon Katziri

Reputation: 21

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

Upvotes: 2

David Proctosaurus
David Proctosaurus

Reputation: 1

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;

}

Upvotes: 0

Lucien Dubois
Lucien Dubois

Reputation: 1694

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');
}

Upvotes: 1

lichtteil
lichtteil

Reputation: 91

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');

}

Upvotes: 9

beamkiller
beamkiller

Reputation: 188

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 :)

Upvotes: 1

Howli
Howli

Reputation: 12469

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.

Upvotes: 4

Related Questions