Hide custom tab if there is no content in woocommerce products
Is there a way to hide custom tabs when there is no content in the input field. I am implementing this with an advanced custom field. As long as the tab is still present, even if there is no posted content
Here is the code I put 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>";
}
}
source to share
This is most likely the best way to do it, 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 content of the "direction" box if there is any text in it, unless it prints css and hides the tab.
source to share
Hey I had the same problem and found a much better way to solve this problem. I only add the tab when it has content. Perhaps this helps everyone else find this topic.
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');
}
source to share
You can use get_field () to check for content availability.
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');
}
source to share
Basically you use a tab content box to conditionally show the tab. The code checks if the field is empty, if there is, then it disables the tab so that it is not displayed. If there is content in the field, it is returned. I also adjusted the content of the conditional tab too. That is, check if there is content and if there is, return the tab. This is optional, as even without validation, the tab will not 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;
}
source to share