A aba de Informações Adicionais do WooCommerce é um local útil para detalhes extras de produtos que os compradores adoram, como especificações detalhadas, informações de envio e instruções de cuidado. Mas eis o detalhe: o WooCommerce já possui recursos integrados para isso.
Neste guia, mostrarei como liberar o verdadeiro poder da aba de Informações Adicionais. Vamos descartar o conteúdo redundante, personalizar o que sobrar e criar uma página de produto que converte.
A aba de Informações Adicionais está vinculada aos dados do seu produto WooCommerce, mas isso não significa que você está preso à forma como ela aparece ou ao que ela mostra. Neste guia, mostrarei como alterá-la, renomeá-la, reestilizá-la ou removê-la, dependendo do que fizer sentido para sua loja.
Sumário
O que é a Aba de Informações Adicionais do WooCommerce?
A aba de Informações Adicionais aparece ao lado da aba Descrição na página do produto, parte do layout que os compradores veem antes de chegar à página do carrinho do WooCommerce. Por padrão, o WooCommerce usa esta aba para mostrar atributos básicos do produto, como tamanho, peso e material.
Mas a aba de Informações Adicionais pode fazer muito mais. Em vez de apenas listar detalhes básicos, considere este espaço como um local privilegiado para aumentar as vendas.
Por quê? Porque 87% dos consumidores provavelmente não comprarão de você novamente se a primeira compra for prejudicada por informações de produto imprecisas ou incompletas. (fonte)
Este guia mostrará como transformar sua aba de Informações Adicionais de uma observação sem graça em uma parte fundamental de uma jornada positiva do cliente.
Como Adicionar Informações Adicionais a Produtos WooCommerce
Antes de explorarmos as opções de personalização, vamos examinar como adicionar detalhes de produtos à aba de informações adicionais no WooCommerce.
O recurso de atributos integrado do WooCommerce é um ótimo lugar para começar com adições simples como material, dimensões ou instruções de cuidado.
No seu 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, em Atualizar 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. Mas uma aba genérica não grita "Olhe para mim!". É hora de personalizar essa aba e usá-la para guiar os compradores para uma compra.
Alterar a Estilização da Aba de Informações Adicionais
A aba Informações Adicionais é um espaço privilegiado na sua página de produto – não a deixe se misturar ao fundo. Com o SeedProd, você pode facilmente personalizar seu estilo para combinar com sua marca e chamar a atenção para essas informações valiosas.
SeedProd é o melhor construtor de sites WordPress para criar lojas WooCommerce impressionantes e focadas em conversão. Sua interface de arrastar e soltar e blocos pré-construídos oferecem total liberdade de design, mesmo que você não seja um programador.
Novo no SeedProd? Confira este guia para aprender como configurar uma loja online no WordPress.
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.
Uma vez dentro do editor visual, procure pelo bloco chamado Product Data Tabs. Ele controla o layout das suas abas de produto 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:
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 diretamente o conteúdo de Informações Adicionais para a sua Descrição do Produto 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
Você tem um produto tão incrível que não precisa de detalhes extras? Eu entendo. Às vezes, menos é mais. Se você não está usando a aba Informações Adicionais, é melhor removê-la completamente e criar uma página de produto super simplificada.
Se você está usando o SeedProd para personalizar sua página de produto WooCommerce, pode simplesmente remover o bloco Product Data Tabs com alguns cliques.
Passe o mouse sobre o bloco Product Data Tabs e clique no ícone da lixeira para excluí-lo.
É isso. Agora, suas páginas de produto estão livres de desordem desnecessária.
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.
Renomear a Aba de Informações Adicionais
“Informações Adicionais” – é um nome comprido, não é? Se você quiser editar a aba Informações Adicionais no WooCommerce para refletir melhor o conteúdo do seu produto, você pode alterar o nome da aba com um pequeno trecho de código.
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. Confira sua página de produto – sua aba de Informações Adicionais agora tem um nome novinho em folha.
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 de Informações Adicionais em um centro de conteúdo completo. Vamos ver duas maneiras de adicionar conteúdo dinâmico: usando trechos PHP para flexibilidade ou plugins do WordPress para facilidade de uso.
Método 1: Usando Trechos PHP
Se você se sente confortável com um pouco de código, os trechos PHP oferecem mais controle sobre qual conteúdo aparece na sua aba. Usaremos o confiável 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 Informações Adicionais do WooCommerce:
- Plugins de Gerenciamento de Abas: Plugins como YITH WooCommerce Tab Manager e WooCommerce Product Tabs permitem que você crie abas 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, também pode usar seus recursos para exibir esse conteúdo na aba Informações Adicionais.
Pronto para Criar Páginas de Produto Que Convertem?
Até agora, você está a caminho de dominar a aba Informações Adicionais do WooCommerce. Você aprendeu como adicionar conteúdo valioso, eliminar a desordem, personalizar a aparência e até mesmo reorganizar as coisas para criar uma experiência de compra mais suave e persuasiva.
Agora é a sua vez. Use o SeedProd para tornar a criação de páginas de produto bonitas e focadas em conversão ridiculamente fácil.
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 saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
