Para quem já nos acompanha, a utilização de campos personalizados ou custom fields no WordPress não é nenhuma novidade. No post Campos Personalizados (Custom Fields) no WordPress nós ensinamos como você pode criar campos personalizados sem a utilização de plugins. Se você não está muito por dentro do que são os custom fields, importância e consequências para seus site, recomendo a leitura do post.

Já utilizando o plugin Advanced Custom Fields temos a possibilidade de criar diversos tipos de campos personalizados de forma mais organizada e avançada. E a depender do seu nível de conhecimento em WordPress, somado com programação PHP, as possibilidades de soluções baseadas em WordPress tornam-se múltiplas. Como por exemplo, criar sistemas para empresas dos mais diversos ramos – RH, Financeiro, Tecnologia, etc.

Assim no post de hoje do CanalWP, vamos abordar um pouco mais sobre custom fields (campos personalizados). Só que agora o nosso cenário será uma loja virtual com o WooCommerce. Se liga, que agora você vai aprender a utilizar Custom Fields no WooCommerce, adicionando informações ainda mais detalhadas para os produtos da sua loja.

Como Utilizar Custom Fields no WooCommerce

Para o tutorial que você verá a seguir, nós faremos uso do plugin Advanced Custom Fields para a criação do campo personalizado. Assim, se você quer mostrar informações mais específicas para as páginas de seus produtos, basta utilizar o plugin para criar os campos e seguir os passos que vou mostrar para conseguir exibi-los.

Devo salientar que esse é um post para quem já tem alguma prática com programação PHP. Portanto, para quem não possui familiaridade o fluxo pode ser um pouco complicado. Em todo caso, não se preocupe. Apenas siga o passo a passo e leia os posts que estarei recomendando, pois eles estão vinculados com o tutorial de hoje.

Criando um Campo Personalizado

Utilizando o plugin Advanced Custom Fields, crie um novo campo personalizado para a sua loja WooCommerce.

Para este tutorial eu criei apenas um campo personalizado com o nome Tamanho e do tipo “texto”. Todavia, para a sua loja você pode criar quantos campos quiser e achar necessário.

Se você tem dúvidas sobre o processo de criar e configurar campos personalizados com o plugin Advanced Custom Fields, por favor leia o nosso Tutorial Completo WordPress Advanced Custom Fields.

Depois de criar o novo campo para seus produtos, não esqueça de selecionar no box Local o tipo de post como product. Caso você esqueça desse “pequeno” detalhe, o campo que acabou de criar não será exibido na página de criação de produtos WooCommerce!

Após ter criado o campo e configurado para ser exibido quando tipo de post for igual a product, clique no botão Publicar.

Adicionando Informação do Produto

Agora você deve criar um Novo produto (Produtos > Adicionar produto) ou escolher Editar algum já existente.

Na página para inserir as informações sobre o produto, configure-o normalmente como você sempre faz. Se você quer vender produtos variáveis, confira o tutorial de Como Cadastrar Produtos com Preços Variáveis no WooCommerce.

Agora, precisaremos inserir alguma informação para o campo personalizado que criamos com o Advanced Custom Fields. Procure pelo seu novo campo e digite alguma informação pertinente.

Clique em Publicar ou Atualizar para que as informações do seu produto sejam salvas.

Nova Tab Para Exibir Informações

Bom, agora que já criamos um campo personalizado para produtos WooCommerce e já temos pelo menos 1 produto que armazena informações neste novo campo, precisamos exibir tais informações na página do nosso produto. Correto?

Iremos utilizar a área padrão na página do produto, conhecida por trabalhar com Tabs – Descrição, Informações Adicionais e Avaliações. Aprenda Como Adicionar Tab Dinâmica no WooCommerce e caso precise, veja o post: Aprenda Como Remover e Reordenar Tab WooCommerce.

Abra o arquivo functions.php do tema utilizado em sua loja e adicione o seguinte bloco de código PHP:

/* TAB ADICIONAL SOBRE TAMANHO DO PRODUTO */
function cwp_register_woocommerce_product_tab_adicional( $tabs ) {
             
      $tabs['detalhes_produto'] = array(
            'title'    => __( 'Detalhes do Produto', 'textdomain' ),
            'priority' => 10,
            'callback' => 'cwp_woocommerce_custom_tab_view_detalhes_produto'
      );
       
      return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'cwp_register_woocommerce_product_tab_adicional' );

Com o código acima, nós criamos a função responsável por criar uma nova Tab de informações para os nossos produtos. Será dentro dessa tab, nomeada como “Detalhes do Produto”, que iremos adicionar as informações contidas no campo personalizado que criamos.

Então, se já temos a tab que vai conter o que foi digitado para o campo personalizado “tamanho” – essa foi a forma como criei e intitulei o meu campo, precisamos agora do código PHP que vai adicionar tal informação. Copie e cole o código a seguir para o arquivo functions.php:

function cwp_woocommerce_custom_tab_view_detalhes_produto() {
    	
    //Tamanho é o nome do meu campo personalizado
	if( get_field('tamanho') ){
		the_field('tamanho');
	}	  
}

Perceba que primeiro eu verifico se o campo chamado “tamanho” existe e caso ele exista, mostro as informações que nele estão armazenadas. Para maiores informações sobre a manipulação dos campos criados com o Advanced Custom Fields, visite a documentação completa do plugin.

Salve o functions.php do seu tema com todas as funções PHP que você copiou e colou.

Campo Personalizado na Página do Produto

Seguindo todos os passos que indiquei, você já deve ter na página do produto: uma nova aba com título “Detalhes do Produto” e dentro dela, as informações digitadas no campo personalizado que criamos. Olha só como ficou na minha loja:

Caso alguma coisa tenha dado errado no seu site, verifique o nome dos campos criados e também das funções adicionadas ao functions.php.

Todos os códigos que mostro aqui são criados e testados por mim. Então muita atenção ao criar campos e adicionar títulos a eles, pois uma única letra diferente vai causar erro!

Conclusão

É simplesmente maravilhoso quando temos a possibilidade, liberdade e autonomia de criar o nosso site ou loja virtual da maneira que queremos. Com o WordPress e WooCommerce é exatamente isso que conquistamos. Podemos ajustar e personalizar nossos sistemas da melhor forma para que o trabalho seja fluido e excelente.

O WooCommerce é uma solução para lojas virtuais baseadas na plataforma WordPress, que engloba diversos aspectos necessários para a venda de produtos. É muito normal com a diversidade de produtos, que ajustes, customizações e novas implementações sejam necessárias. Por isso, trabalhar com custom fields no WooCommerce é uma ideia eficiente, eficaz e de qualidade.

Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.