WooCommerce: Personalizando as abas da página de produtos

Neste artigo vamos aprender a criar, remover, renomear, reordenas e mudar o formato de exibição da abas da página de produtos. Se o seu tema não permite que você personalize as abas da página produto, você pode fazer isso adicionando pequenos códigos no arquivo functions.php do seu tema ativo (recomendo sempre usar tema filho).

Para gerenciar as abas criaremos uma function e usaremos o filtro woocommerce_product_tabs, essa function recebe o array $tabs com a estrutura abaixo:

• title – Título da aba
• priority – Prioridade. Ordem que a aba será exibida.
• callback – Função que será responsável por exibir o conteúdo da aba.

As abas nativas do WooCommerce tem os valores de prioridades (priority) predefinidos da abaixo:

• Descrição (description) = 10
• Informação adicional (additional_information) = 20
• Avaliações (reviews) = 30

Excluindo abas existentes

Em algumas lojas, muitas vezes desejamos remover uma aba da página de produtos para deixar a página mais limpa. Nesse caso, quando removemos abas nativas do WooCommerce, não significa que estamos excluindo de forma definitiva, estaremos apenas ocultando a aba e podemos exibir novamente apenas removendo o código usado para ocultar.

As abas nativas do WooCommerce são description, reviews e additional_information.

No código a seguir você tem um exemplo que remove as 3 abas citadas acima. Deixe apenas as linhas de código que removem as abas que você deseja.

add_filter( 'woocommerce_product_tabs', 'miro_remove_product_tabs', 98 );

function miro_remove_product_tabs( $tabs ) {
    unset( $tabs['description'] );  // Remove a aba de descrição
    unset( $tabs['reviews'] );  // Remove a aba de avaliações
    unset( $tabs['additional_information'] );  // Remove a aba de informações adicionais

    return $tabs;
}

Renomeando abas

No código abaixo você encontra um exemplo de como renomear as abas da página de produtos do WooCommerce.

add_filter( 'woocommerce_product_tabs', 'miro_rename_tabs', 98 );

function miro_rename_tabs( $tabs ) {
	$tabs['description']['title'] = __( 'Informações sobre o produto' );  // Renomeando a aba de descrição
	$tabs['reviews']['title'] = __( 'Opiniões sobre o produto' );  // Renomenado a aba de avaliações
	$tabs['additional_information']['title'] = __( 'Mais informações' ); // Renomeando a aba de informações adicionais

	return $tabs;

}

Reordenando abas

No código abaixo você encontra um exemplo de como reordenar as abas da página de produtos do WooCommerce.

add_filter( 'woocommerce_product_tabs', 'miro_reorder_tabs', 98 );

function miro_reorder_tabs( $tabs ) {
	$tabs['reviews']['priority'] = 5;  // Avaliações como primeira aba
	$tabs['description']['priority'] = 10; // Descrição como segunda aba
	$tabs['additional_information']['priority'] = 15; // Informações adicionais como terceira aba

	return $tabs;
}

Personalizando uma aba

O código abaixo substituirá a aba de descrição por uma função personalizada.

add_filter( 'woocommerce_product_tabs', 'miro_custom_description_tab', 98 );

function miro_custom_description_tab( $tabs ) {
	$tabs['description']['callback'] = 'miro_custom_description_tab_content'; // Customização da aba descrição 

	return $tabs;
}

function miro_custom_description_tab_content() {
	echo '<h2>Descrição do produto</h2>';
	echo '<p>Exemplo de customização da aba de descrição.</p>';
}

Adicionando uma aba personalizada

O código abaixo adicionará uma aba personalizada na página de produtos do WooCommerce. Utilize priority para posicionar a aba na ordem desejada.

add_filter( 'woocommerce_product_tabs', 'miro_new_product_tab' );

function miro_new_product_tab( $tabs ) {
	$tabs['test_tab'] = array(
		'title' 	=> __( 'Nova aba', 'woocommerce' ),
		'priority' 	=> 50,
		'callback' 	=> 'miro_new_product_tab_content'
	);

	return $tabs;
}

function miro_new_product_tab_content() {
	// Conteúdo da nova aba
	echo '<h2>Nova aba</h2>';
	echo '<p>Texto exemplo.</p>';
}

Importante: Aba de informações adicionais

Observe que a aba “Informações Adicionais” só aparecerá se o produto tiver peso, dimensões ou atributos (com a opção “Visível na página do produto” marcado). Se você tentar aplicar uma alteração a essa aba e o produto não tiver peso, dimensões ou atributo, você receberá uma mensagem de erro semelhante a mostrada abaixo:

Warning: call_user_func() expects parameter 1 to be a valid callback, no array or string given in /mysite/wp-content/plugins/woocommerce/templates/single-product/tabs/tabs.php on line 69

Nesse caso, você deve usar os métodos abaixo:

• has_attributes()
• has_dimensions()
• has_weight()

Veja a seguir um código de exemplo que muda o título da aba de informações adicionais usando estes métodos.

add_filter( 'woocommerce_product_tabs', 'miro_rename_tabs', 98 );

function miro_rename_tabs( $tabs ) {
	global $product;
	
	// Verifica se o produto tem atributos, dimensões ou peso
	if( $product->has_attributes() || $product->has_dimensions() || $product->has_weight() ) { 
		$tabs['additional_information']['title'] = __( 'Mais informações' ); // Renomeia a aba de informações adicionais
	}
 
	return $tabs;
 
} 

Alterando o formato de exibição das abas

Muitas das grandes lojas utilizam uma exibição do conteúdo da página de produtos sem o uso abas, o conteúdo é apresentado em sequencia.

Utilizando o código abaixo, podemos remover essas guias e exibir o conteúdo de cada aba uma sobre a outra, sem ocultar nenhum conteúdo. Você pode simplesmente declarar novamente uma função do plugin (WooCommerce), sem ter que usar ganchos ou substituições. O WordPress irá passar a usar a sua nova versão e não mais a original.

Veja abaixo um exemplo de reescrita da função woocommerce_output_product_data_tabs, que você adicionar no functions.php do seu tema ativo.

function woocommerce_output_product_data_tabs() {
   $product_tabs = apply_filters( 'woocommerce_product_tabs', array() );
   if ( empty( $product_tabs ) ) return;
   echo '<div class="woocommerce-tabs wc-tabs-wrapper">';
   foreach ( $product_tabs as $key => $product_tab ) {
      ?>
         <h2><?php echo $product_tab['title']; ?></h2>      
         <div id="tab-<?php echo esc_attr( $key ); ?>">
            <?php
            if ( isset( $product_tab['callback'] ) ) {
               call_user_func( $product_tab['callback'], $key, $product_tab );
            }
            ?>
         </div>
      <?php         
   }
   echo '</div>';
}