Crie abas personalizadas de produtos WooCommerce com campos personalizados avançados

Ao visualizar um produto no WooCommerce, as informações sobre o produto são exibidas nas guias. Essas abas são fixas e geradas pelo WooCommerce, fora do seu controle. Esta postagem mostrará como adicionar código que permita aos autores adicionar guias personalizadas com conteúdo personalizado aos produtos.

Isenção de responsabilidade: Existe uma extensão WooCommerce chamada WooCommerce Tab Manager que fornece esse recurso. Não é grátis, no entanto. Eu mesmo não testei, mas até onde posso ver, ele suporta apenas um editor WYSIWYG (o que você vê é o que você obtém) para o conteúdo da guia. Este post é para você que deseja um ajuste mais fino do conteúdo da guia ou deseja escrever o código você mesmo sem pagar por outro plugin.

Usaremos o plugin Advanced Custom Fields (ACF) para simplificar o processo. Mas você deve ser capaz de substituir facilmente a parte do ACF por seu próprio código personalizado se não quiser usar o plug-in. ACF vem em uma versão gratuita e uma versão Pro. No ACF Pro existe um tipo de campo bacana: o repetidor, que é perfeito para esse tipo de uso. Se você, no entanto, não possui ou deseja adquirir uma licença Pro, não se preocupe. O tutorial de código abaixo mostrará como adicionar campos usando a versão gratuita – e usando o repetidor na versão Pro.

Se você ainda não está familiarizado com o ACF, o que o ACF nos ajuda é a configuração fácil de meta campos de postagem – de todos os tipos. Você pode adicionar facilmente um editor, um seletor de arquivos, um seletor de data ou cor, um seletor de postagem ou categoria com suporte para várias opções e reordenação e muito mais. Podemos conseguir o mesmo sem o ACF, mas precisaríamos codificar a exibição e salvar o conteúdo das metaboxes.

O que vamos fazer

Para simplificar, queremos permitir a adição de guias personalizadas à visualização do produto. Cada guia suporta um título que é exibido como rótulo de guia e o conteúdo que é exibido ao clicar na guia. As abas personalizadas realmente dependem do tipo de projeto ou necessidades que você tem; talvez você precise de guias para especificações técnicas, uma guia com arquivos (por exemplo, manuais do usuário e outros), informações adicionais ou uma consulta personalizada que exiba produtos relacionados.

Neste tutorial vamos simplificar adicionando um editor WYSIWYG para o conteúdo da guia. Como mencionado acima, é fácil implementar outros tipos de campo (por exemplo, arquivos ou uma consulta de postagem), é apenas uma diferença no código que você escreve para exibir o conteúdo da guia – que não está relacionado a este tutorial.

Se você possui o ACF Pro e deseja usar o repetidor para adicionar facilmente várias guias; pule a próxima seção. Se você tiver apenas a versão gratuita do ACF, continue. A desvantagem de não ter o campo repetidor é que você precisa definir um número fixo de abas. Portanto, o autor não pode fazer um número ilimitado de abas como pode fazer com o repetidor. Mas esta solução gratuita funcionará bem em lojas virtuais onde você deseja apenas guias personalizadas específicas (número de).

Tutorial para a versão gratuita do ACF

Adicionando os campos ACF

Adicionar uma nova metabox com campos é muito fácil com o ACF. Você tem duas opções; use a interface do usuário do ACF para configurar tudo ou adicione os campos por código. Normalmente, configurar os campos no admin é o caminho a seguir. Mas se você precisar garantir que os campos existam em vários sites do WordPress (por exemplo, desenvolvimento localhost, servidor de teste e servidor ao vivo), você pode se beneficiar adicionando os campos por código em seu tema ou plugin.

Você precisa configurar o seguinte:

• Um grupo que é exibido quando o tipo de postagem é igual a produtos WooCommerce
• Uma entrada de texto para o título da guia
• Qualquer campo(s) que você deseja para o conteúdo da guia. Como exemplo, adicionaremos um editor WYSIWYG.
• (Opcional) Títulos de guias adicionais e conteúdo de guias para quantas guias quisermos oferecer.

Lembre-se de lembrar os nomes dos campos, pois você precisará consultá-los mais tarde. Defini o título da guia como tab_titlee o campo WYSIWYG como tab_contents.

Se você preferir adicionar os campos por código, aqui está um exemplo. Adicione isso no arquivo do seu tema functions.phpou plugin:

Se você quiser mais do que apenas uma guia, basta adicionar outro conjunto de título e conteúdo da guia após line #19. Apenas lembre-se de manter nameúnico.

Quando editamos um produto, devemos ver esta metabox aparecer:

Saída de suas guias personalizadas

WooCommerce nos permite filtrar woocommerce_product_tabspara manipular guias. Como argumento para este filtro, você obtém um array para todas as guias. A matriz consiste em matrizes para cada guia com chaves exclusivas. Mas a matriz para cada guia não contém a saída real do conteúdo da guia. Em vez disso, ele espera um retorno de chamada – um nome de uma função que o WooCommerce executará para gerar o conteúdo da guia.

Uma vez dentro da função, você pode usar global $postpara obter acesso ao objeto de postagem atual, ou se quiser o objeto do produto que o WooCommerce gera, basta fazer global $product. Precisamos do ID do post para buscar o valor de nossos campos personalizados com a função do ACF [get_field](https://www.advancedcustomfields.com/resources/get_field/)(). No exemplo de código abaixo estamos apenas buscando o título da aba e verificamos se esta está vazia ou não. Se não estiver, ele adiciona uma nova guia à matriz. Faz sentido não adicionar guias onde o título da guia está vazio.

Observe que você pode usar ‘ priority‘ para controlar a posição da guia. Por exemplo, configurá-lo para 1 fará com que sua guia apareça primeiro, antes de todas as guias do WooCommerce. Defina um nome de função para o callbackelemento ‘ ‘. Em linha #17, definimos a função que o WooCommerce executará para a saída do conteúdo da guia.

Essas funções de retorno de chamada de guia obterão dois parâmetros; a chave e o elemento de matriz de todos os valores da guia atual. Dentro de nossa função de retorno de chamada, geramos o título da guia novamente, referindo-nos ao $tabarray fornecido. O WooCommerce ecoa seus títulos de guia dentro de um h2, então fazemos o mesmo. E então usamos get_field()para obter o valor do conteúdo da guia e simplesmente ecoar o valor. Ajuste a linha #23para caber em qualquer tipo de campo que você adicionou (por exemplo, seletor de objeto de postagem, imagens ou qualquer outra coisa).

Observe que eu envolvi tudo dentro de um if-check que verifica se o WooCommerce e o ACF estão ou não ativados. Essa é uma boa prática para evitar que seu site seja interrompido.

E é isso! Agora você criou com sucesso o código para adicionar guias personalizadas do WooCommerce!

Se você quiser fazer isso com o campo repetidor do ACF Pro para suportar um número ilimitado de guias, continue lendo.

Tutorial para ACF Pro e repetidor

Adicionando os campos ACF

Adicione seu grupo usando a interface do usuário de administração do ACF ou adicionando-os por código em seu tema ou arquivos de plug-in. Precisamos configurar o seguinte:

• Um grupo que é exibido quando o tipo de postagem é igual ao produto WooCommerce
• Um repetidor com os seguintes subcampos:
  • Uma entrada de texto para o título da guia
  • Qualquer campo(s) que você deseja para o conteúdo da guia.

É assim que você o configuraria usando o administrador do ACF:

Ou você pode adicionar o grupo por código assim:

De qualquer forma, você deve acabar com esta metabox ao editar produtos:

Saída de suas guias personalizadas

A saída de suas guias personalizadas é muito semelhante ao que fizemos acima para a versão gratuita. Filtramos woocommerce_product_tabs, mas aqui fazemos um loop por cada item repetido do repetidor. Precisamos de uma maneira de identificar cada elemento no repetidor com chaves, então nós mesmos geramos uma chave usando a posição do loop e uma versão slug do título da guia. Na função de retorno de chamada, extraímos a posição do loop da chave e usamos isso para fazer referência ao array do nosso repetidor.

Dentro da nossa função de filtro buscamos o valor do repetidor e verificamos se não está vazio. Em seguida, definimos uma variável contadora, começando em 0 (os arrays sempre começam na posição 0), que incrementamos com 1 para cada elemento dentro do loop (na linha #18). No loop para cada item do repetidor, atribuímos todos eles à mesma função de retorno de chamada. Usamos a função do WordPress [sanitize_title](https://developer.wordpress.org/reference/functions/sanitize_title/)()para converter o título da guia em uma versão slug dele e o anexa à chave.

Em nossa função de retorno de chamada na linha #31 - 32, fazemos algumas manipulações de string simples para extrair o valor do contador (que começa em 0 e incrementa em 1 para cada item). Em seguida, simplesmente usamos isso como o índice para o array do repetidor para buscar o campo de conteúdo da guia correto.

E é isso! Agora você implementou um número ilimitado de guias personalizadas no WooCommerce!

Lembre-se que você pode substituir WYSIWYG por qualquer tipo de campo. Você só precisa alterar a forma de saída do campo na linha #23.

Conclusão

Escrever seu próprio código para adicionar guias personalizadas do WooCommerce é muito fácil quando você entende o conceito básico de como o WooCommerce faz isso. Nem mesmo requer muito código. Esta é uma solução perfeita para você que não quer ou não pode investir em licenças de extensão ou apenas precisa de uma solução simples para sua loja virtual.