Como Personalizar a Aba de Informações Adicionais do WooCommerce 

Se a sua página de produto tem uma aba que aparece em branco, parece fora de lugar ou apenas diz "Informações Adicionais" sem dizer nada útil aos compradores, você não está preso a isso. A aba de informações adicionais do WooCommerce é totalmente personalizável, e a maioria das alterações leva apenas alguns minutos.

Neste guia, mostrarei como editar as informações adicionais no WooCommerce para alterar seu nome, reestilizá-la, movê-la ou removê-la completamente, dependendo do que faz sentido para sua loja.

O que é a Aba de Informações Adicionais do WooCommerce?

A aba de informações adicionais do WooCommerce é uma aba da página do produto que exibe automaticamente o peso, as dimensões e os atributos personalizados do seu produto. Ela aparece apenas quando um produto tem pelo menos um atributo ou detalhe de envio atribuído, então, se você vir uma aba vazia, geralmente é por isso.

Mas a aba de informações adicionais pode fazer mais do que listar especificações. É um dos primeiros lugares que os compradores procuram quando precisam confirmar se um produto é adequado para eles. Deixá-la genérica ou vazia pode custar a venda.

Como Adicionar Informações Adicionais a Produtos WooCommerce

Antes de explorarmos as opções de personalização, vamos ver como adicionar detalhes do produto à aba de informações adicionais no WooCommerce. O recurso de atributos integrado do WooCommerce é o ponto de partida certo para adicionar coisas como material, dimensões ou instruções de cuidado.

No painel do WordPress, vá para Produtos » Atributos. É aqui que você gerenciará todos os atributos dos seus produtos.

Dê um nome descritivo ao seu atributo, como "Vida Útil da Bateria", "Material" ou "Informações de Garantia". É isso que os clientes verão no front-end.

Em seguida, clique em Adicionar Atributo.

Agora, edite o produto onde você deseja adicionar essas informações, role para baixo até a seção Dados do produto e clique na aba Atributos.

Escolha seu novo atributo no menu suspenso e, em seguida, adicione as informações relevantes no campo Valor(es).

Agora, clique em Salvar Atributos e, em seguida, Atualize seu produto.

Seu novo atributo agora aparecerá de forma organizada na aba Informações Adicionais na página do produto.

Como Personalizar a Aba Informações Adicionais do WooCommerce

Você adicionou detalhes valiosos do produto à sua aba Informações Adicionais. Agora, vamos fazer com que ela trabalhe mais para sua loja. Uma aba genérica não guia os compradores para uma compra. Esses métodos lhe dão controle real sobre o que ela mostra e como ela se parece.

Alterar a Estilização da Aba de Informações Adicionais

O editor visual do SeedProd permite personalizar as abas de produtos do WooCommerce sem tocar no código. Você pode alterar cores, tipografia, espaçamento e bordas para combinar com sua marca, tudo a partir de uma interface de arrastar e soltar.

Quando estiver pronto para estilizar a aba Informações Adicionais, vá para SeedProd » Theme Builder no seu painel do WordPress e clique em “Editar Design” no modelo da Página do Produto.

Dentro do editor visual, procure pelo bloco chamado Abas de Dados do Produto. Isso controla o layout das suas abas de produtos do WooCommerce, incluindo a seção Informações Adicionais.

Clique no bloco para abrir suas configurações de design, que lhe dão controle total sobre:

• Cores das Abas: Altere as cores de fundo, texto e borda para os estados ativo e inativo.
• Tipografia: Ajuste a fonte, tamanho, peso e estilo do texto da aba.
• Espaçamento e Preenchimento: Controle o espaçamento ao redor e dentro do conteúdo da aba.
• Bordas: Adicione ou personalize bordas para destacar a aba.
• Estilos de Tabela: Estilize a tabela de dados do produto, incluindo cores de texto, preenchimento e até mesmo adicione um efeito de sombra.

Quando estiver satisfeito com o design, clique em “Salvar” e visualize suas alterações. Veja como minhas alterações ficam quando visualizo a página do produto:

Novo no SeedProd? Confira este guia para aprender como configurar uma loja online no WordPress.

Mover Informações Adicionais para a Descrição

Quer simplificar sua página de produto e facilitar a localização das informações importantes? Você pode mover o conteúdo de Informações Adicionais diretamente para baixo da sua descrição do produto WooCommerce dentro do SeedProd.

Primeiro, edite a página do produto para ver o editor visual. Dependendo do bloco que você está usando, arraste o Product Data Tabs de sua localização atual para abaixo da sua descrição do produto.

Agora clique em “Salvar” e visualize sua página de produto para ver como ela fica.

Ocultar Informações Adicionais do WooCommerce

Se um produto não tiver atributos ou detalhes de envio relevantes, ocultar a aba de informações adicionais mantém a página do produto limpa. É uma escolha melhor do que deixar uma aba vazia ou esparsa visível para os compradores.

Se você estiver usando o SeedProd para personalizar sua página de produto WooCommerce, pode remover o bloco Abas de Dados do Produto com alguns cliques.

Passe o mouse sobre o bloco Product Data Tabs e clique no ícone da lixeira para excluí-lo.

É isso. Suas páginas de produto agora estão livres de desordem desnecessária.

Precisa ocultar a aba para categorias de produtos específicas? A abordagem de snippet PHP (abordada na seção Remover abaixo) pode ser estendida para atingir apenas produtos em certas categorias. Dessa forma, você oculta informações adicionais para produtos onde elas não são relevantes, sem afetar o restante do seu catálogo.

Remover Informações Adicionais do WooCommerce

Quer um controle mais granular? Você pode remover informações adicionais em uma base de produto por produto. Esta opção é boa se você quiser apenas organizar páginas de produtos específicas.

Para fazer isso, vá para “Produtos” no seu painel do WordPress e escolha o produto que deseja editar.

No painel “Dados do produto”, clique na aba “Atributos”. Em seguida, clique em remover nos atributos que você deseja remover.

Quando você visualizar essa página de produto, a aba Informações Adicionais terá desaparecido.

Observação: Este método remove os atributos, não apenas sua exibição no front-end. Se você precisar dessas informações mais tarde, é melhor usar o SeedProd para ocultar a aba em vez de excluir os dados.

Renomear a Aba de Informações Adicionais

“Informações Adicionais” é um nome longo. Se você quiser editar a aba de informações adicionais do WooCommerce para refletir melhor o conteúdo do seu produto, pode alterar o nome da aba com um rápido snippet de código.

Observação: Para este método, usarei o WPCode para adicionar trechos de código personalizados em vez de editar diretamente os arquivos do tema. Aqui está um guia sobre como usar o WPCode. Antes de continuar, faça um backup do seu site para garantir que você não perca nada se algo der errado.

Se você ainda não o fez, instale e ative o plugin WPCode.

Após a ativação, vá para Trechos de Código » Adicionar Novo e escolha “Adicionar Seu Código Personalizado (Novo Trecho).”

Em seguida, dê um título ao seu trecho: Algo como “Renomear Aba de Informações Adicionais” funcionará. Em seguida, cole o seguinte código no editor de código:

add_filter( 'woocommerce_product_tabs', 'rename_additional_information_tab', 10, 1 );

function rename_additional_information_tab( $tabs ) {
  $tabs['additional_information']['title'] = __( 'Your New Tab Name', 'your-theme-textdomain' ); // Customize the tab name here
  return $tabs;
}

Agora, substitua ‘Seu Novo Nome da Aba’ pelo nome de aba desejado (por exemplo, ‘Especificações do Produto’, ‘Mais Informações’, etc.). Eu usei “Informações do Produto”.

Se você não tem certeza sobre o text domain do seu tema, pode deixar ‘seu-text-domain-do-tema’ como ‘woocommerce’.

Em “Tipo de Código”, selecione “Trecho PHP”.

Agora, clique no botão “Salvar Trecho”, em seguida, alterne o interruptor “Inativo” para “Ativo”.

É isso. Verifique a página do seu produto. Sua aba Informações Adicionais agora tem um nome totalmente novo.

Como Reordenar Abas de Produto do WooCommerce

Se a aba Informações Adicionais não pertence ao final da página do seu produto, você pode movê-la. O editor visual do SeedProd torna isso simples, sem necessidade de código.

Em SeedProd » Theme Builder, abra seu modelo de Página de Produto. No editor visual, encontre o bloco Guias de Dados do Produto e arraste-o para a posição onde você deseja que o grupo de guias apareça na página.

Para reordenar guias individuais dentro do grupo de guias, o WooCommerce usa um sistema de prioridade. A aba Informações Adicionais tem uma prioridade padrão de 20, enquanto a aba Descrição é 10 e Avaliações é 30. Um número menor aparece primeiro.

Você pode ajustar a ordem das guias com um trecho de PHP via WPCode. Adicione este código para alterar a prioridade da aba Informações Adicionais:

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

function reorder_additional_information_tab( $tabs ) {
  $tabs['additional_information']['priority'] = 5; // Lower number = appears first
  return $tabs;
}

Altere o número de prioridade para controlar a ordem. Um valor de 5 coloca Informações Adicionais antes da aba Descrição, enquanto 25 a coloca entre Descrição e Avaliações.

Adicionar Conteúdo Personalizado à Aba de Informações Adicionais

Pronto para ir além dos atributos básicos do produto? Você pode transformar sua aba Informações Adicionais em um centro de conteúdo. Aqui estão duas maneiras de adicionar campos e conteúdo dinâmico à aba de informações adicionais do WooCommerce.

Método 1: Usando Trechos PHP

Se você se sente confortável com um pouco de código, os trechos de PHP oferecem mais controle sobre qual conteúdo aparece na sua aba. Usarei o plugin WPCode para manter as coisas organizadas.

Crie um novo trecho com um título descritivo (por exemplo, “Adicionar Conteúdo Personalizado à Aba de Informações Adicionais”).

Em seguida, cole o seguinte código no editor de trechos:

add_action( 'woocommerce_product_additional_information', 'add_custom_content_to_additional_info' );
function add_custom_content_to_additional_info() {
  // Add your custom content here!
  echo '<p>This is some custom content added to the Additional Information tab!</p>';
  echo '<ul>';
  echo '<li>You can add text, HTML, shortcodes...</li>';
  echo '<li>...even output content from custom fields!</li>';
  echo '</ul>';
}

Você pode substituir o conteúdo de exemplo dentro das instruções echo pelo conteúdo desejado. No meu exemplo, adicionarei detalhes sobre informações de envio.

Em seguida, salve seu trecho, defina seu “Tipo de Código” como “Trecho PHP” e ative-o.

Agora você pode visualizar sua página de produto para ver as novas informações:

Informações Adicionais do WooCommerce

Prefere uma abordagem mais visual? Vários plugins do WooCommerce facilitam a adição de conteúdo personalizado à aba de informações adicionais do WooCommerce:

• Plugins Gerenciadores de Guias: Plugins como YITH WooCommerce Tab Manager e WooCommerce Product Tabs permitem que você crie guias totalmente novas (não apenas personalize a existente) com arrastar e soltar.
• Plugins de Campos Personalizados: Se você já usa um plugin como Advanced Custom Fields (ACF) para gerenciar dados personalizados de produtos, você também pode usar seus recursos para exibir esse conteúdo na aba Informações Adicionais.

Perguntas Frequentes

Como adiciono informações adicionais aos produtos do WooCommerce?

Vá para Produtos » Atributos no seu painel do WordPress e crie um novo atributo com um nome descritivo. Em seguida, edite o produto, abra a aba Atributos no painel Dados do Produto e atribua seu atributo com os valores relevantes. Clique em Salvar Atributos e atualize o produto. O atributo aparecerá na aba Informações Adicionais na página do produto.

Como oculto a aba de informações adicionais do WooCommerce?

Se você usa o SeedProd, abra seu modelo de Página de Produto no Theme Builder e exclua o bloco Guias de Dados do Produto. Isso remove a aba globalmente para todos os produtos.

Para ocultá-la apenas para categorias de produtos específicas, você pode estender a abordagem de trechos de PHP usando o WPCode para segmentar produtos por categoria, deixando a aba visível para produtos onde ela é útil.

Como renomear a aba de informações adicionais do WooCommerce?

Use o WPCode para adicionar um trecho de PHP que filtra o hook woocommerce_product_tabs. No trecho, defina $tabs['additional_information']['title'] para o seu rótulo preferido, como “Especificações do Produto” ou “Mais Informações”. Salve e ative o trecho, e suas páginas de produto mostrarão o novo nome da aba imediatamente.

Por que minha aba de informações adicionais do WooCommerce não está aparecendo?

A aba Informações Adicionais só aparece quando um produto tem pelo menos um atributo ou campo de envio (peso ou dimensões) atribuído. Se a aba estiver faltando, verifique a aba Atributos no painel de Dados do Produto e confirme se pelo menos um atributo tem um valor salvo.

Se você estiver usando o SeedProd e a aba ainda não aparecer, verifique se o bloco "Product Data Tabs" está presente em seu modelo de Página de Produto e não foi excluído.

Pronto para Criar Páginas de Produto Que Convertem?

Personalizar a aba de informações adicionais do WooCommerce é uma das vitórias rápidas disponíveis para qualquer página de produto. Use o SeedProd para facilitar a criação de páginas de produto bonitas e focadas em conversão sem escrever código.

Aqui estão mais algumas dicas, truques e tutoriais do WooCommerce que podem ser úteis:

• Como Adicionar o Botão Ver Carrinho no WooCommerce
• Como Alterar o Título da Página da Loja no WooCommerce
• Como Criar uma Galeria de Imagens de Produto Deslumbrante no WooCommerce
• Como Adicionar Avaliação por Estrelas às Páginas de Produto do WooCommerce
• Como Ocultar Produtos Fora de Estoque no WooCommerce

Obrigado por ler! Adoraríamos ouvir suas opiniões, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos úteis e conteúdo para expandir seus negócios.