Para quem trabalha com WooCommerce, seja para loja própria ou desenvolvendo soluções, já sabe que as tabs de informações sobre cada produto são extremamente importantes e úteis. No tutorial Como Adicionar Tab Dinâmica no WooCommerce, você aprendeu como criar essas abas personalizadas. No entanto, a coisa pode ficar um tanto bagunçada se você não souber como remover aquelas tabs padrão, mas que você não utiliza ou ainda, como reorganizá-las.

Se ainda restava alguma dúvida sobre as possibilidades do WooCommerce, o CanalWP traz mais um post específico e claro focando nas informações detalhadas de cada produto. Prepare-se, hoje você vai aprender como remover e reordenar tab WooCommerce de forma simples e prática.

Desabilitar e Reordenar Tab WooCommerce

Existem plugins WP voltados a organização e melhor gerenciamento das Tabs WooCommerce, mas se queremos algo mais “leve” e para um fim específico, utilizar código é sempre uma boa escolha! Aqui mesmo no CanalWP nós já indicamos soluções baseadas em plugins – Como Criar Filtro para Produtos no WooCommerce, o que torna a tarefa mais fácil para quem não tem tanta familiaridade com programação.

Entretanto, se você quer aprender a melhor forma de desenvolver soluções customizadas sem ter de instalar dezenas de ferramentas em seu servidor, trabalhar com código é a melhor coisa a se fazer. Por isso, estimulamos veementemente que você estude e aumente seus conhecimentos em PHP para criar cada vez melhor com WordPress.

É bom que você sempre confira a área de Códigos & Truques, lá você vai encontrar soluções de Como Adicionar Imagem Destacada na Lista de Posts do WordPress e também de Como Utilizar Taxonomia Personalizada no WordPress. Estes são apenas alguns exemplos de como você pode começar aos poucos a entender como funcionam os códigos dentro do WordPress e vai perceber como são infinitas as possibilidades de desenvolvimento próprio dentro da plataforma.

Vamos Utilizar o functions.php

Se você acompanha nossos tutoriais há algum tempo, já percebeu que muitas das implementações e soluções necessitam da utilização de código – seja ele PHP, HTML, etc. E para o tutorial de hoje os blocos de código PHP são essenciais. Assim, vamos precisar editar o arquivo de funções do nosso tema – o functions.php.

Lembre-se que ao realizar modificações diretamente nos arquivos do seu tema original sem utilizar um tema filho (child theme) pode levar a problemas sérios quando você realizar a atualização do seu tema, pois os códigos adicionados a ele serão removidos.

Existem duas formas de editar e adicionar código ao functions.php. A primeira é diretamente por sua Dashboard (Aparência > Editor) e a segunda – e mais organizada, é utilizando de um editor de código e acessar o arquivo via FTP (wp-content > themes > SEU TEMA > functions.php).

O Que é e Como Remover Tabs Nativas

Quando falamos sobre “remover” as abas nativas WooCommerce das páginas de produto, não significa que estamos excluindo-as de forma que nunca mais possam ser usadas. O que fazemos é deixá-las momentaneamente desabilitadas, pois não precisamos delas naquele momento. No entanto, se algum dia a necessidade de utilizá-las venha a surgir, basta excluir o código que você verá a seguir.

Se você quer manter os produtos da sua loja em apenas 2 tabs nativas, Descrição e Informação Adicional, por exemplo – podemos desabilitar aquela que exibe as avaliações de produto. A tab Reviews ou Avaliações nem sempre é interessante para todos os tipos de negócio e por isso, iremos utilizar o código abaixo para removê-la da sua loja:

/* Remover Tab Avaliações */
add_filter( 'woocommerce_product_tabs', 'cwp_woocommerce_remove_default_tabs' );
function cwp_woocommerce_remove_default_tabs( $tabs ) {
		
	if ( isset( $tabs['reviews'] ) ) {
		unset( $tabs['reviews'] );		
	}
	
	return $tabs;
}

Neste bloco de código a primeira coisa que a nossa função faz é verificar a existência da tab reviews, responsável pelas avaliações de produto. Se a tab existir, então removemos a mesma da nossa loja WooCommerce.

Adicione o bloco de código PHP mostrado acima em seu functions.php e depois salve o mesmo. Acesse a página detalhada de qualquer produto da sua loja WooCommerce e verifique que a tab Avaliações foi removida.

Caso você queira remover a tab Informações Adicionais também, a função seria voltada a remoção não só da tab reviews, mas também da tab additional_information. Confira como a nossa função seria:

/* Remover Tab Avaliações */
function cwp_woocommerce_remove_default_tabs( $tabs ) {
		
	if ( isset( $tabs['reviews'] ) ) {
		unset( $tabs['reviews'] );		
	}
	
	if ( isset( $tabs['additional_information'] ) ) {
		unset( $tabs['additional_information'] );
		
	}

	return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'cwp_woocommerce_remove_default_tabs' );

É importante que você entenda que tanto você pode remover apenas uma tab nativa, como duas ou três – basta deixar na função o trecho de código responsável por desabilitar àquela que você deseja remover do seu site.

Reordenando Tabs WooCommerce

Para reordenar as tabs nativas da sua loja WC é preciso que você entenda as regras de prioridade que são aplicadas a elas. Depois disso, você poderá organizar tanto as abas nativas, quanto aquelas personalizadas que você criou.

Por padrão as tabs WooCommerce obedecem regras de prioridade definidas por valores numéricos para a sua exibição:

• Descrição -> 10
• Informações Adicionais -> 20
• Avaliações -> 30

Assim que você cria uma tab própria e dinâmica para os produtos da sua loja, terá de pensar qual a regra de prioridade da mesma e até alterar a regra das demais tabs existentes.

Digamos que você quer que a sua nova tab apareça logo após a aba de Descrição do produto, assim ela pode receber a prioridade = 15. Se você quiser que ela tenha prioridade = 20, precisará alterar a prioridade das duas últimas tabs nativas. Então você vai colar o seguinte bloco de código em seu functions.php:

/* Alterar a Prioridade/Ordem das Tabs Nativas */
add_filter( 'woocommerce_product_tabs', 'cwp_woo_reorder_tabs', 98 );
function cwp_woo_reorder_tabs( $tabs ) {

	$tabs['additional_information']['priority'] = 30;	// Informacao Adicional
	$tabs['reviews']['priority'] = 40;			// Avaliacoes

	return $tabs;
}

Perceba que estamos alterando aqui a prioridade de Informações Adicionais e Avaliações para 30 e 40, respectivamente.

Neste código criamos a função cwp_woo_reorder_tabs, onde setamos o parâmetro priority de cada tab com o valor que desejamos para ordenação, e a executamos com a utilização de woocommerce_product_tabs – utilizamos esse filtro no tópico anterior, mas com uma função para remover uma determinada tab.

Conclusão

Hoje nós te ensinamos como remover e reordenar tab WooCommerce. Essas funções são imprescindíveis para qualquer um que trabalhe com lojas virtuais WC, seja você desenvolvedor ou curioso, mas que se importa em possuir uma loja bem organizada, com estrutura clara e limpa para uma melhor experiência de seus clientes.

Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.