Como remover a guia de informações adicionais no WooCommerce

Não é nenhum segredo que otimizar sua loja online aumentará suas vendas e conversões. Se você já tentou de tudo e está procurando algo diferente para melhorar o seu negócio, este post é para você. Neste artigo, mostraremos como remover a guia de informações adicionais no WooCommerce e alterar as páginas de produtos individuais.

Por que remover a guia de informações adicionais?

A guia Informações Adicionais é usada principalmente para exibir detalhes extras sobre seus produtos, como peso, comprimento, comprimento e altura. Isso ajuda os clientes a ter uma ideia de quão grande e pesado é o item, então eles escolhem o tamanho certo do pacote quando fazem um pedido.

Essa guia é importante quando você vende produtos físicos, mas não faz muito sentido se você oferece produtos ou serviços digitais que não envolvem frete. Nesses casos, a guia Informações Adicionais não é necessária.

Considerando quanta concorrência existe hoje no comércio eletrônico, você deve remover campos desnecessários e manter sua loja o mais limpa possível. Se algo não ajuda o seu negócio, é melhor se livrar dele. Por exemplo, se você vende produtos digitais, provavelmente não precisa do campo CEP, então é melhor desativá-lo ou torná-lo opcional.

Da mesma forma, você deve remover a guia Informações Adicionais se ela não agregar valor para seus clientes ou sua empresa. Na seção a seguir, mostraremos exatamente como fazer isso.

Como remover a guia de informações adicionais no WooCommerce

Nesta seção, mostraremos duas maneiras de remover a guia Informações Adicionais no WooCommerce da maneira correta.

1. Com PHP
2. Usando CSS

Usaremos um pouco de código, mas não se preocupe. Mesmo se você for um iniciante, poderá seguir todos os passos para garantir que não cometa nenhum erro.

NOTA: Como modificaremos os arquivos do tema principal e adicionaremos código extra ao modelo, antes de começar, verifique se você gerou um backup completo do seu site. Além disso, recomendamos que você crie um tema filho e edite esses arquivos. Dessa forma, você não perderá nenhuma personalização ao atualizar seu tema pai.

Para editar arquivos com código, você pode personalizar diretamente o tema filho ou usar um plugin. Neste guia, usaremos trechos de código. É uma ferramenta muito útil para iniciantes porque facilita a adição de código. Em vez de adicionar os snippets ao arquivo functions.php do seu tema filho, o plugin gerencia isso para você.

Agora, sem mais delongas, vamos conferir os dois métodos.

1) Remova a guia Informações Adicionais com PHP

Para remover a guia Informações Adicionais no WooCommerce usando PHP, a primeira coisa que você precisa fazer é instalar e ativar o plugin Code Snippets em seu site. Dessa forma, você poderá adicionar trechos personalizados sem modificar seus arquivos de tema principais.

No seu painel, vá para Plugins > Adicionar Novo , procure o plugin e instale-o.

Depois de instalá-lo e ativá-lo, você precisa criar um novo snippet. Vá para Snippets > Todos os Snippets e pressione Adicionar Novo .

Agora copie o código a seguir, cole-o na seção snippet e ative-o.

 //Remove a aba de informações adicionais
 function quadlayers_remove_product_tabs( $tabs) {
 unset( $tabs['additional_information'] );
 retornar $guias;
 }
 add_filter( 'woocommerce_product_tabs', 'quadlayers_remove_product_tabs', 98 ); 

Em seguida, verifique a página do seu produto no front-end e você verá que a guia Informações adicionais desapareceu.

É assim que você pode usar o PHP para excluir a guia Informações Adicionais.

Para remover outras guias, você pode simplesmente alterar o nome da guia nesta linha:

 unset( $tabs['tab que você deseja remover']);

Como você pode ver, esse método é bastante simples, mas não é o único. Na seção a seguir, mostraremos como remover a guia Informações adicionais da sua loja WooCommerce usando CSS .

2) Remova a guia de informações adicionais com CSS

A coisa boa sobre o método CSS é que você não precisa de nenhum plugin. Você pode simplesmente usar o recurso CSS adicional disponível no WordPress Customizer para concluir a tarefa. Vamos ver como fazê-lo.

No painel do WordPress , vá para Aparência > Personalizar .

Uma vez no Personalizador, vá para a seção CSS Adicional .

Agora copie o seguinte código CSS e cole-o dentro do editor. Confira a visualização e você verá as alterações instantaneamente.

 /* Ocultar guia de informações adicionais */
 li.additional_information_tab {
 exibição: nenhum !importante;
 } 

Se estiver satisfeito com o resultado, lembre-se de publicar as atualizações.

É isso! É assim que você pode remover a guia Informações Adicionais da sua loja WooCommerce usando CSS .

Remover a guia de informações adicionais da página de checkout

Até agora, vimos como excluir a guia Informações adicionais da página do produto. No entanto, essa guia também aparece na página de checkout. Nesse caso, permite que os compradores forneçam mais informações e notas sobre seus pedidos.

Se você deseja remover a guia Informações adicionais da página de checkout do WooCommerce , esta seção é para você.

Antes de começarmos, vamos ver como a guia Informações Adicionais fica na página de checkout:

Agora, para remover essa guia, usaremos um pouco de CSS.

Basta copiar o código a seguir, colá-lo na seção CSS Adicional do Personalizador e pressionar Publicar .

 .woocommerce-additional-fields {
 Mostrar nenhum;
 } 

Em seguida, atualize a página de checkout e você verá que as informações adicionais desapareceram.

É isso! É assim que você pode remover a guia Informações Adicionais da página de checkout com um pouco de CSS .

Como personalizar a guia de informações adicionais

Agora, digamos que, em vez de excluir diretamente a guia Informações Adicionais da sua loja, você deseja personalizá-la. Nesta seção, mostraremos algumas opções diferentes para personalizar a guia Informações adicionais.

Renomeie a guia Informações Adicionais

Se você quiser deixar claro o que está na guia Informações Adicionais, você pode renomeá-la. Além de descrever o que está nele, você se destacará de seus concorrentes, pois a maioria das lojas online não faz isso.

Usando o plug-in Code Snippets, crie um novo snippet e cole o seguinte código:

 /**
 * Renomear guia de informações adicionais
 */
 add_filter( 'woocommerce_product_tabs', 'quadlayers_rename_tabs', 98 );
 function quadlayers_rename_tabs( $tabs) {
 $tabs['additional_information']['title'] = __( 'Informações do produto' ); // Renomeia a guia Informações Adicionais
 retornar $guias;
 }

Se você observar atentamente o código, verá que usamos esta linha para alterar o nome da guia:

 $tabs['additional_information']['title'] = __( 'Informações do produto' ); // Renomeia a guia Informações Adicionais

Neste exemplo, alteramos o nome para Informações do produto, mas sinta-se à vontade para pegar o código e ajustá-lo de acordo com suas preferências.

Depois de inserir o código, publique as alterações e você verá como a guia Informações Adicionais mudou seu nome para Informações do Produto.

Até agora, vimos como remover a guia Informações Adicionais e como renomeá-la no WooCommerce. Mas há mais que você pode fazer. Vamos ver como você pode adicionar uma nova guia à sua página de produto.

Como adicionar uma nova guia

Se você vende algo exclusivo ou um produto novo ou com muitas especificações, convém adicionar guias extras à página do produto. Nesta seção, mostraremos como você pode adicionar uma guia a uma única página de produto usando alguns snippets PHP.

Primeiro, abra as configurações de trechos de código e crie um novo trecho de PHP. Em seguida, cole o seguinte código nele.

 /**
 * Adicione uma nova guia de dados do produto
 */
 add_filter('woocommerce_product_tabs', 'quadlayers_new_product_tab');
 function quadlayers_new_product_tab( $tabs) {

 // Adiciona a aba

 $tabs['test_tab'] = array(
 'title' => __( 'Guia do produto personalizado', 'woocommerce' ),
 'prioridade' => 50,
 'callback' => 'quadlayers_new_product_tab_content'
 );

 retornar $guias;

 }
 function quadlayers_new_product_tab_content() {

 // Conteúdo da guia

 echo '<h2>Guia de produto personalizado</h2>';
 echo '<p>Sua nova guia de produto.</p>';

 }

Após colar o código, salve-o para aplicar as alterações.

Agora, verifique qualquer uma das páginas do seu produto no front-end e você verá a nova guia.

Usando o mesmo código, você pode editá-lo para adicionar várias guias, se necessário. E é isso! É assim que você pode adicionar guias personalizadas à sua página de produto WooCommerce.

Agora, antes de terminarmos o post, vamos ver mais uma coisa que você pode fazer para personalizar a guia Informações Adicionais.

Como reordenar guias

Outro truque útil que você pode usar em sua loja é reordenar as guias na página do produto. Sem usar nenhum plugin, você pode alterar a ordem das guias. Vamos ver como fazer isso usando alguns trechos de PHP.

Por padrão, o WooCommerce organiza as guias da seguinte forma:

1. Descrição
2. informação adicional
3. Avaliações

Digamos que você queira destacar os comentários e colocá-los em primeiro lugar. Para reorganizar as guias, você usaria este código:

 /**
 * Reordenar guias
 */
 add_filter( 'woocommerce_product_tabs', 'quadlayers_reorder_tabs', 98 );
 function quadlayers_reorder_tabs( $tabs) {

 $tabs['reviews']['priority'] = 5; // Revisões primeiro
 $tabs['description']['priority'] = 10; // Descrição segundo
 $tabs['additional_information']['priority'] = 15; // Informações adicionais terceiro

 retornar $guias;
 }

Como você pode ver, usamos o atributo de prioridade para colocar as abas nas ordens que queremos. Nesse caso, colocaremos as Revisões primeiro, depois a Descrição e, finalmente, a guia Informações Adicionais. Tome o código como base e ajuste-o de acordo com suas necessidades.

Depois de decidir o pedido, cole o código nas configurações do plug-in Code Snippets e ative-o.

Agora, verifique qualquer uma das páginas do seu produto no front-end e você verá as guias reordenadas de acordo com sua nova prioridade.

Para obter mais informações e exemplos sobre como fazer alterações na página do seu produto, confira nosso guia sobre como personalizar a página do produto WooCommerce.

Para mais informações e trechos de exemplo, confira a página de documentação do WooCommerce.

Conclusão

Em suma, a guia Informações Adicionais geralmente contém detalhes sobre seus produtos, como peso, comprimento, comprimento e altura. No entanto, se você não estiver vendendo produtos físicos, pode fazer sentido se livrar dessa guia.

Neste guia, mostramos como remover a guia de informações adicionais no WooCommerce usando dois métodos diferentes.

1. PHP
2. CSS

Ambas as formas são bastante simples e não requerem muito conhecimento de programação. Se você conhece PHP, pode usar um plugin específico do site para adicionar o snippet ou editar o arquivo functions.php do seu tema filho diretamente. Alternativamente, se você não se sentir confortável em editar seus arquivos de tema, você pode usar o método CSS. Não requer ferramentas adicionais e você pode adicionar o código usando o WordPress Customizer. Graças à visualização ao vivo do Customizer, você poderá ver a modificação em tempo real.

Além disso, vimos como remover a guia Informações Adicionais da página de checkout e alguns exemplos diferentes sobre como alterar o nome da guia, adicionar uma nova guia e alterar a ordem das guias.

Qual método você usou para excluir a guia Informações adicionais da sua loja WooCommerce? Você conhece algum outro método? Deixe-nos saber na seção de comentários abaixo!

Para mais tutoriais sobre como personalizar sua loja, dê uma olhada nos seguintes artigos:

• Como personalizar a página da loja WooCommerce
• Personalize a página do produto usando o Elementor
• Como editar a seção Produtos relacionados