Como adicionar guias de produtos personalizados no WooCommerce

Deseja adicionar guias de produtos personalizados à sua página de produtos WooCommerce ? Você veio ao lugar certo. Neste artigo, mostraremos como exibir guias de produtos personalizados na página do produto de sua loja virtual .

Mas antes de nos aprofundarmos nisso, vamos entender melhor quais são as guias de produtos e por que você pode adicionar uma guia de produto personalizada à sua página de produto WooCommerce. Vamos começar com a ideia básica de guias de produtos em resumo.

O que são guias de produtos no WooCommerce?

As guias de produtos ajudam a organizar a página do produto agrupando informações semelhantes em uma ou mais guias . Cada guia individual contém um conjunto específico de dados e é separada do restante dos detalhes do produto. Dessa forma, as informações se tornam facilmente acessíveis, menos confusas, visualmente agradáveis ​​e fáceis de seguir.

A maioria dos produtos hoje em dia tem muitas informações essenciais que devem ser comunicadas ao comprador. Mas, acomodar todas essas informações em um único lugar pode ser complicado. É por isso que muitas vezes você verá várias guias de produtos nas páginas de produtos, como uma breve descrição, uma descrição longa, especificações técnicas, análises e muito mais.

Espero que isso lhe dê uma idéia de guias de produtos. Agora, vamos dar uma olhada em alguns dos motivos pelos quais você pode precisar adicionar guias de produtos personalizados no WooCommerce.

Por que adicionar guias de produtos personalizados no WooCommerce?

Acima, vimos que as guias de produtos são um ótimo meio de organizar as informações do produto. No entanto, as guias padrão não têm espaço suficiente para preencher todas as informações adicionais. E se você quiser incluir uma longa descrição, especificações técnicas, fichas técnicas, tutoriais em vídeo, etc.? Você achará difícil organizar todas essas informações com as guias padrão.

No entanto, ao adicionar uma guia de produto personalizada para cada conjunto de informações, você pode organizar os detalhes do produto de uma maneira muito melhor. Também lhe dá a liberdade de adicionar todas as informações necessárias sem se preocupar em encher a página e sobrecarregar o usuário.

Na frente do cliente, as guias de produtos tornam mais fácil para os compradores identificar as informações em que estão interessados ​​e ignorar o resto. Por exemplo, um usuário regular pode não estar interessado nas especificações técnicas detalhadas e bastará com a descrição do produto e uma descrição longa. No entanto, uma pessoa com experiência em tecnologia estará mais interessada nas especificações técnicas e nas folhas de dados que facilitam a localização das informações necessárias.

Além disso, como proprietário de uma loja, você pode aproveitar as guias personalizadas para destacar as principais políticas da empresa que um usuário deve conhecer. Por exemplo, você pode adicionar uma guia de perguntas frequentes para responder às perguntas mais frequentes. Da mesma forma, você pode adicionar uma política de devolução em uma guia separada etc.

Portanto, é sempre recomendável organizar as informações do produto em guias de produtos fáceis de seguir. Para que seu usuário obtenha o que deseja da maneira mais fácil possível, sem passar por nenhum aborrecimento.

Até agora, espero que você tenha entendido a importância das guias personalizadas de produtos WooCommerce. Agora vamos para a próxima etapa e adicionar guias de produtos personalizados no WooCommerce.

Como adicionar guias personalizadas de produtos WooCommerce

Podemos adicionar guias de produtos personalizados no WooCommerce de 2 maneiras principais :

1. Usando um plug-in
2. Programaticamente

Vamos dar uma olhada em ambos os métodos, um por um. Vamos começar com o método plugin. Então, vamos mergulhar.

1. Adicionar guias de produtos personalizados usando um plug-in

Existem vários plugins do WordPress para adicionar guias personalizadas de produtos WooCommerce, então sinta-se à vontade para usar qualquer um deles. No entanto, para demonstração, usaremos o plug-in Custom Product Tabs for WooCommerce desenvolvido pela YIKES, Inc.

O plugin vem em versões gratuitas e premium. A versão gratuita cobre os requisitos básicos. No entanto, se você estiver interessado em recursos mais avançados, poderá optar pelos planos premium, que começam em $ 29,99 por ano com 1 ano de atualizações e suporte.

Agora vamos ver como podemos usar o plugin para adicionar guias de produtos personalizados no WooCommerce. Vamos lá!

1.1. Instalar e ativar o plug-in

Primeiro, você precisa instalar e ativar o plugin em seu site. Para instalar o plug-in, vá para o painel de administração do WP e navegue até Plugins > Adicionar novo. Procure o plugin Custom Product Tabs for WooCommerce da YIKES, Inc. e clique no botão Instalar agora para instalar o plugin. Quando a instalação estiver concluída, clique em Ativar para ativar o plug-in em seu site.

Se você quiser usar a versão premium ou um plug-in premium, precisará instalar o plug-in manualmente.

Excelente! Agora você instalou com sucesso o plugin em seu site. É hora de adicionar guias de produtos personalizados usando o plugin Custom Product Tabs for WooCommerce.

1.2. Adicionar guias de produtos personalizados aos produtos WooCommerce

Depois que o plug-in estiver ativo, você poderá adicionar guias de produtos personalizados a um produto WooCommerce na página Edição do produto. No painel de administração do WP, navegue até Produtos > Todos os produtos. Agora, passe o mouse sobre o produto ao qual deseja adicionar guias personalizadas e clique em Editar.

Isso abrirá a página de edição do produto. Role para baixo até a seção Dados do produto e clique em Guias personalizadas. Você terá duas opções, Adicionar uma guia e Adicionar uma guia salva (mais sobre isso depois). Clique no botão Adicionar uma guia e ele abrirá o formulário Nova guia personalizada.

No formulário Nova guia, especifique o título da guia e adicione conteúdo relevante. Sinta-se à vontade para adicionar texto, imagens, links, multimídia, etc. Além disso, você pode adicionar várias guias personalizadas clicando no botão Adicionar uma guia na parte inferior. Se você tiver mais de uma guia personalizada, poderá alterar sua ordem por meio das setas Mover ordem da guia. Quando terminar, clique em Salvar guias para salvar suas guias personalizadas recém-criadas.

Voilá! Tão fácil quanto isso. Agora você criou sua própria guia de produto personalizada. Agora, navegue até o front-end da página do seu produto para ver a guia personalizada ao vivo em seu site.

No entanto, adicionar uma guia personalizada a vários produtos, um por um, pode ser exaustivo e não é uma abordagem eficiente. É por isso que o plugin vem com um recurso de guias salvas.

Vamos dar uma olhada nas guias salvas e ver como podemos adicioná-las aos produtos WooCommerce.

1.3. Criar guias salvas

As guias salvas funcionam como modelos que você pode salvar para uso posterior. Depois de criar uma guia salva, você pode adicioná-la a um produto em apenas algumas etapas simples. Assim, as guias salvas tornam a adição de guias personalizadas a vários produtos rápida e fácil.

Para criar uma guia salva, acesse o painel de administração do WP e clique em guias de produtos personalizados . Aqui, você verá uma lista de todas as guias salvas que você criou anteriormente. Agora, clique no botão Adicionar uma guia na parte superior e ele o levará ao formulário Nova guia.

No formulário Nova guia, especifique o título da guia e adicione um nome para sua referência. Em seguida, adicione o conteúdo da guia. Isso pode incluir texto, imagens, multimídia, links, etc. Quando estiver satisfeito com todas as alterações, clique no botão Salvar guia para salvar a guia.

Assim, você pode adicionar quantas abas quiser para uso posterior. Para encontrar todas as guias salvas que você criou, basta acessar WP Admin Dashboard > Guias de produtos personalizados. Aqui, você encontrará todas as suas guias salvas e poderá editar, excluir ou adicionar novas guias a partir daqui.

Depois de criar suas próprias guias salvas, você pode adicioná-las a qualquer produto com apenas alguns cliques. Vamos ver como fazer isso.

1.4. Adicionar guias salvas a produtos WooCommerce

A adição de uma guia salva a um produto segue um processo semelhante ao da adição de uma guia normal. Vá para a página Product Edit e role para baixo até a seção Product Data. Clique em guias personalizadas e, em seguida, clique no botão Adicionar uma guia salva .

Escolha na lista de guias salvas a guia que deseja adicionar. Ele carregará todos os dados da guia selecionada. Agora, você pode salvá-lo como está ou fazer alterações de acordo com suas necessidades. Você pode adicionar mais guias personalizadas clicando nos respectivos botões e reordenar as guias de acordo com sua preferência.

Por fim, há uma caixa de seleção para substituir uma guia salva. Basicamente, ele desvincula a guia da guia salva original. Assim, no futuro, se você fizer alterações na guia salva, elas não serão refletidas para este produto.

Depois de salvar a guia do produto personalizado, ela aparecerá imediatamente na página do produto. Para verificar, basta navegar até o front-end do seu site, acessar a página do produto e ver sua guia personalizada em ação.

Acima, vimos como adicionar guias de produtos personalizados no WooCommerce usando um plug-in de terceiros. No entanto, existe outra maneira de obter a mesma funcionalidade, ou seja, usando trechos de código personalizados. Vamos ver como você pode adicionar guias de produtos personalizados à página do produto WooCommerce programaticamente.

2. Adicionar guias de produtos personalizados programaticamente

Antes de entrarmos nos trechos de código para adicionar guias de produtos personalizados no WooCommerce, vamos primeiro ver como adicionar trechos de código ao WooCommerce.

2.1. Acesse o Editor de Código para WordPress

Em primeiro lugar, é altamente recomendável que você crie um backup completo do seu site e use um tema filho para editar o arquivo functions.php . Se você não sabe, confira nosso guia sobre como criar um tema filho. Como alternativa, confira esses plug-ins de tema filho se não quiser fazer isso manualmente.

Quando terminar de criar um tema filho, vá para o Painel de administração do WP e navegue até Aparência > Editor de temas. Certifique-se de selecionar o tema filho e abrir o arquivo functions.php . Agora você pode adicionar seus trechos de código personalizados no final do arquivo functions.php . Feito isso, clique no botão Atualizar arquivo para que as alterações entrem em vigor.

Como alternativa, você pode usar o plug-in Code Snippets para adicionar trechos de código personalizados ao seu site. Primeiro, você precisa instalar o plugin do repositório do WordPress. Basta ir para WP Admin Dashboard > Plugins > Adicionar novo. Procure o plugin Code Snippets e instale-o em seu site.

Depois, vá para a configuração do plug-in do seu painel de administração do WP e clique no botão Adicionar novo snippet para adicionar seu snippet de código personalizado. Assim, você pode adicionar quantos snippets de código personalizados forem necessários.

Uma coisa legal sobre usar este plugin é que você não precisará criar nenhum tema filho, pois o plugin cuida dos trechos de código por conta própria. No entanto, ter um tema filho ainda é recomendado para proteger seu site se algo der errado.

Agora que você aprendeu como adicionar trechos de código a um site WordPress, vamos ver como podemos adicionar guias de produtos personalizados no WooCommerce usando trechos de código personalizados.

2.2. Adicionar guias de produtos personalizados a todos os produtos no WooCommerce

Adicionar uma guia de produto personalizada a todos os produtos de uma só vez pode ser realmente eficiente, pois as informações permanecem as mesmas em todos os produtos. Por exemplo, você pode adicionar perguntas frequentes que permanecem as mesmas em todos os produtos ou pelo menos para uma categoria específica de produtos.

O snippet de código a seguir pode ser usado para adicionar uma guia global de produto personalizado e também preenchê-la com conteúdo relevante.

 //Adicionar uma nova guia de produto personalizado
add_filter('woocommerce_product_tabs', 'ql_new_custom_product_tab');

function ql_new_custom_product_tab($tabs) {

//Para adicionar várias guias, atualize o rótulo para cada nova guia dentro do array $tabs['xyz'], por exemplo, custom_tab2, my_new_tab, etc.
$tabs['custom_tab'] = array(
'title' => __( 'Custom Product Tab', 'woocommerce' ), // altere "Custom Product tab" para qualquer texto que desejar
'prioridade' => 50,
'callback' => 'ql_custom_product_tab_content'
);
retornar $guias;
}

// Adicionar conteúdo a uma guia de produto personalizado
function ql_custom_product_tab_content() {

// O conteúdo da guia personalizada
//Você pode adicionar qualquer código php aqui e ele será mostrado em sua guia personalizada recém-criada
echo '<h2>Conteúdo da guia de produto personalizado</h2>';
echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis in dui eget rutrum. Morbi quis sodales felis.</p>';
echo '<img src="http://hypernova/wp-content/uploads/2021/10/logo-1.jpg" width="300" height="400" align="center">';
}

Feito! Agora, você pode navegar até o front-end do seu site e verificar as alterações.

Agora, o snippet acima só pode ser usado para adicionar uma guia de produto personalizada a todos os produtos no WooCommerce. Mas e se você precisar adicionar guias de produtos personalizados apenas a produtos específicos? Bem, temos um trecho para você que fará o trabalho. Vamos dar uma olhada.

2.3. Adicionar guias de produtos personalizados apenas a produtos específicos

Primeiro, você precisa pegar o Product-ID do produto, ao qual deseja adicionar uma guia personalizada. Basta acessar o Painel de administração do WP e navegar até Produtos > Todos os produtos. Passe o mouse sobre o produto desejado e ele exibirá o ID do produto. Salve este Product-ID, pois precisamos adicioná-lo ao nosso snippet de código mais tarde.

Copie e cole o seguinte trecho de código no arquivo functions.php ou no plug-in Code Snippets, qualquer que seja o método usado. Apenas lembre-se de substituir o Product-ID do placeholder pelo seu Product-ID real.

 //Adicionar uma nova guia de produto personalizado
add_filter('woocommerce_product_tabs', 'ql_specific_custom_product_tab');

function ql_specific_custom_product_tab($tabs) {
global $produto;

//Pega o ID do produto. Substitua-o pelo seu ID do produto real
if( $produto->get_id() == 1911) {

// Adiciona a nova aba
//Para adicionar várias abas, atualize o rótulo para cada nova aba dentro de $tabs['xyz'], por exemplo, custom_tab, my_new_tab, etc.
$tabs['specific_product_tab'] = array(
'title' => __( 'Specific Product Tab', 'woocommerce' ), // altere "Specific Product tab" para qualquer texto que desejar
'prioridade' => 50,
'callback' => 'ql_specific_product_tab_content'
);
}
retornar $guias;
}

//Adicionar conteúdo a uma guia de produto personalizado
function ql_specific_product_tab_content() {

// O conteúdo da guia personalizada
//Você pode adicionar qualquer código php aqui e ele será mostrado em sua guia personalizada recém-criada
echo '<h2>Conteúdo da guia de produto específico</h2>';
echo '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis in dui eget rutrum. Morbi quis sodales felis.</p>';
echo '<img src="http://hypernova/wp-content/uploads/2021/10/logo-1.jpg" width="300" height="400" align="center">';
}

É isso. Sua guia de produto personalizado recém-criada agora é aplicada ao produto desejado e será exibida apenas para esse produto.

Até agora, você viu os trechos de código para adicionar guias de produtos personalizados no WooCommerce para produtos individuais e todos os produtos. Vamos avançar um pouco mais e ver mais alguns trechos de código para personalizar as guias de produtos.

2.4. Renomear guias de produtos

Às vezes, pode ser necessário substituir o título de sua guia personalizada ou até mesmo alterar o nome de uma guia padrão. Por exemplo, talvez você queira alterar a guia Comentários para Classificações no caso de um programa de TV ou filme. Usar o snippet de código abaixo facilita a alteração do título do seu produto personalizado.

 //Renomear guias de produtos no WooCommerce
add_filter( 'woocommerce_product_tabs', 'ql_rename_product_tabs', 98 );

function ql_rename_product_tabs( $tabs) {
//Substitui o rótulo da guia dentro do array $tabs['xyz'] pelo seu rótulo de guia real
$tabs['reviews']['title'] = __( 'Avaliações' ); // Renomeia a aba de comentários
$tabs['custom_tab']['title'] = __( 'Aba personalizada atualizada' ); // Renomeia a guia personalizada criada pelo usuário.
retornar $guias;
}

Excelente! Suas guias de produtos foram renomeadas. Agora você pode navegar até o front-end do seu site e verificar as alterações por conta própria.

2.5. Guia Reordenar

O snippet de código a seguir permite que você altere a ordem das guias do produto. Funciona com base em um valor de prioridade.

O número menor indica uma prioridade mais alta e um número mais alto indica uma prioridade mais baixa. Portanto, a guia de prioridade mais alta é exibida primeiro, seguida pela guia seguinte na linha, e a guia de prioridade mais baixa estará na última posição.

Se você der uma olhada no código abaixo, ele usa algumas guias de produtos para demonstrar como funciona. Você pode adicionar mais guias de produtos, se necessário, e reordená-las conforme sua preferência. Apenas certifique-se de substituir os títulos das guias pelos títulos das guias reais.

 //Reordenar abas de produtos no WooCommerce
add_filter( 'woocommerce_product_tabs', 'ql_reorder_product_tabs', 98 );

function ql_reorder_product_tabs( $tabs) {
//reordena as guias com base no valor de prioridade
//Substitui o rótulo da guia dentro do array $tabs['xyz'] pelo seu rótulo de guia real
$tabs['description']['priority'] = 5; // Descrição primeiro
$tabs['custom_tab']['priority'] = 10; // Aba personalizada segundo.
$tabs['specific_product_tab']['priority'] = 15; // Terceira guia específica do produto.
$tabs['reviews']['priority'] = 20; // Últimos comentários
retornar $guias;
}

É isso! Agora você classificou as guias de produtos em seu próprio pedido personalizado. Agora você pode navegar até o front-end da sua loja WooCommerce para verificar as alterações.

2.6. Remover guias

Agora, você adicionou todas essas guias, mas e se quiser removê-las agora? Bem, acontece que existe um snippet de código que pode remover todas as guias de produtos indesejados da página do seu produto.

O snippet de código a seguir funciona bem para guias de produtos padrão e personalizados. Apenas lembre-se de alterar o título da guia com o título da guia real.

 //Remover abas de produtos no WooCommerce
add_filter( 'woocommerce_product_tabs', 'ql_remove_custom_product_tabs', 98 );
function ql_remove_custom_product_tabs( $tabs) {

//Substitui o rótulo da guia dentro do array $tabs['xyz'] pelo seu rótulo de guia real
unset( $tabs['reviews'] ); //Remove a aba de comentários
unset( $tabs['description'] ); //Remove a aba de descrição
unset( $tabs['custom_tab']); // Remove a guia personalizada criada pelo usuário.
retornar $guias;
}

É isso. Suas guias de produtos indesejados foram removidas com sucesso. Agora você pode navegar até o front-end da sua loja WooCommerce e verificar as alterações.

Acima, vimos como adicionar guias de produtos personalizados no WooCommerce usando plugins de terceiros e programaticamente. Vamos agora seguir em frente e ver algumas outras maneiras de organizar os produtos WooCommerce.

BÔNUS: Como classificar produtos WooCommerce

Classificar seus produtos em uma ordem específica faz duas coisas. Primeiro, permite destacar determinados produtos, trazendo-os para o topo da página. Em segundo lugar, torna mais fácil encontrar ou rolar pelos produtos para os clientes, pois os produtos são organizados de maneira lógica.

Opções de classificação de produtos no WooCommerce

Por padrão, o WooCommerce oferece seis opções de classificação e permite que você selecione uma delas como seu método de classificação padrão. Essas opções incluem:

Classificação padrão (classificação personalizada + nome): Os produtos, por padrão, são classificados com base em seu nome, mas ao mesmo tempo permitem que você classifique os produtos de maneira personalizada. Isso é útil para destacar produtos que não se enquadram em um único critério.

Popularidade (vendas): classifica os itens pelo número de vendas em ordem decrescente, trazendo seus itens mais vendidos para o topo.

Classificação média: classifica os produtos por sua classificação média em ordem decrescente. Os produtos com a classificação mais alta obtêm a primeira posição, seguida pela próxima e assim por diante.

Classificar por mais recente: classifica os produtos com base na hora em que são adicionados à loja. Isso traz seus produtos mais recentes para o topo, o que é bom para destacar as últimas adições.

Ordenar por Preço(asc, desc): Ordena o produto com base em seu preço em ordem crescente ou decrescente, conforme sua escolha.

Altere o método de classificação de produtos padrão no WooCommerce

Agora, para alterar o método de classificação padrão no WooCommerce, vá para WP Admin Dashboard e navegue até Appearance > Customize . Isso o levará ao Personalizador de Temas.

Dentro do Personalizador de Temas, acesse o menu Catálogo de Produtos. Agora, vá para a seção de classificação de produtos padrão e clique no menu suspenso. Selecione seu método de classificação preferido e clique em Publicar para salvar as alterações.

Bravo! Agora você selecionou seu método preferido de classificação de produtos. No entanto, essas não são as únicas maneiras de classificar seus produtos. Existem muitas outras maneiras e métodos pelos quais você pode classificar os produtos WooCommerce. Se você estiver interessado, confira nosso guia detalhado sobre como classificar produtos WooCommerce.

Conclusão

Em suma, as guias de produtos personalizados são realmente benéficas, pois ajudam a apresentar informações sobre um produto de maneira mais organizada. Organizar as informações do produto em guias individuais facilita para os clientes identificarem as informações necessárias e tomarem uma melhor decisão de compra.

Além disso, também permite que os lojistas adicionem todas as informações essenciais sobre o produto sem preencher uma página inteira e sobrecarregar o usuário. De certa forma, é uma vitória para todos.

Para resumir, vimos várias maneiras de adicionar guias de produtos personalizados no WooCommerce:

• Usando um plug-in
• Programaticamente

Começamos com o plugin Custom Product Tabs for WooCommerce e vimos como adicionar abas personalizadas de produtos usando o plugin. Também vimos seu recurso de guias salvas que nos permite salvar guias usadas com frequência para uso posterior.

Depois, demos uma olhada nos trechos de código para adicionar guias de produtos personalizados no WooCommerce. Vimos snippets para adicionar guias de produtos a todos os produtos, bem como apenas a produtos específicos. Além disso, também analisamos os snippets de código para renomear, reordenar e remover guias de produtos. Por fim, concluímos analisando as opções de classificação de produtos WooCommerce para organizar a página da loja.

Você já tentou adicionar guias de produtos personalizados no WooCommerce? Que métodos você usou? E como foi sua experiência? Deixe-nos saber nos comentários abaixo.

Se você quiser saber mais sobre como melhorar seu site WooCommerce, aqui estão alguns posts que podem lhe interessar:

• Como personalizar modelos do WooCommerce
• Melhores plugins para personalizar a página do produto WooCommerce
• Como remover a guia de informações adicionais no WooCommerce