Como adicionar campos personalizados às páginas de produtos do WooCommerce
Procurar uma forma de adicionar campos personalizados às páginas de produtos do WooCommerce?
Se você gostaria de adicionar especificações detalhadas em uma página de produtos do WooCommerce ou se você está interessado em mostrar variantes alternativas de produtos com o clique de um botão, adicionar campos personalizados no WooCommerce leva apenas alguns momentos do seu tempo.
Depois disso, você é capaz de customizar todas as partes do seu painel do WooCommerce e incorporar rapidamente informações do site que normalmente exigiriam a entrada manual de dados.
Neste artigo, vamos mostrar-lhe passo a passo como adicionar campos personalizados aos produtos WooCommerce usando o plugin gratuito Advanced Custom Fields (ACF).
Exemplos de uso de campos personalizados para WooCommerce
Quando é que os campos personalizados no WooCommerce podem ser úteis?
- Para adicionar informações adicionais de produtos para coisas como computadores, onde você mostraria especificações técnicas como RAM e poder de processamento.
- Mensagens promocionais que você pode mudar rapidamente para outra coisa.
- Elementos de mídia únicos que não podem ser inseridos usando os recursos padrão do WooCommerce, como um vídeo extra.
- Datas e horários para quando você tem uma contagem regressiva, leilão ou data de lançamento de um produto.
- Opções de produtos extras, além de variantes, que os clientes podem olhar através.
- Parágrafos para explicar instruções detalhadas para o uso de um item.
- Add-on oferece onde o usuário é apresentado com vários upsells que complementam o produto atual. Exemplos incluem anexos de escovas para escovas de dentes eletrônicas ou diferentes encantos para uma pulseira.
- Todos os dados incomuns ou extras que você gostaria de incorporar em uma página de produto que ou não é suportado através do WooCommerce ou é mais fácil de completar com campos personalizados.
Como adicionar campos personalizados nas páginas de produtos do WooCommerce
Neste exemplo, vamos fazer uma loja de computadores simulada que vende laptops. Levaria um tempo significativo para digitar as especificações do computador para cada laptop novo, então em vez disso, vamos incluir campos para selecionar essas especificações com base nos tipos de computadores que vendemos.
Para adicionar campos personalizados aos produtos WooCommerce, você precisa instalar o plugin gratuito Advanced Custom Fields no seu site WordPress. Então, aqui está como configurá-lo…
Campos Personalizados Avançados
Aí está como adicionar campos personalizados nas páginas de produtos WooCommerce passo a passo:
- Criar um novo grupo de campos
- Adicionar seu(s) campo(s)personalizado(s)
- Configurar configurações de grupo de campos adicionais
- Adicionar informações aos produtos
- Exibir informações de campos personalizados no front-end
Criar um novo grupo de campos
No seu painel de controle do WordPress, vá para a nova guia Campos personalizados. Em seguida, clique em Add New próximo a Field Groups.
Nome um grupo de campos. Por exemplo, “Computer Fields” (Campos do Computador). Um grupo de campos é uma coleção de campos que você terá para um produto ou seção do seu site, como uma lista de especificações que você quer que apareça em todas as páginas de produtos para laptop.
Adicionar seu(s) campo(s)personalizado(s)
Clique no botão Adicionar Campo para adicionar um campo a este grupo.
Criar a:
- Etiqueta de Campo – principalmente para sua própria referência.
- Nome do Campo – serve como as letras que você colocará em seu próprio código personalizado, ou código de atalho em nosso caso. Você pode deixar isso como padrão que o plugin gera.
- Field Type – o formato que você está criando para esse campo. Você pode escolher entre opções como seletores de data, caixas de seleção, dropdowns e botões de rádio.
Você também pode querer colocar algumas instruções para você mesmo ou para o desenvolvedor, juntamente com uma especificação de se este campo é ou não necessário.
Se você estiver trabalhando com um campo que tenha múltiplas opções (como botões de rádio), você precisará adicionar suas escolhas de campo. Estas são as opções de seleção que você deseja que apareçam no backend da página do seu produto, como por exemplo, diferentes processadores centrais.
O resto das configurações são tipicamente opcionais, como o valor padrão, o layout, e se você gostaria de mostrar o valor ou etiqueta.
Quando você terminar com um campo ou grupo, clique no botão Publicar ou Atualizar para garantir que ele seja salvo.
Para adicionar mais campos ao seu grupo, clique novamente no botão Adicionar Campo.
Aqui está o que parece com quatro campos neste grupo para:
- CPU
- Memória
- Sistema Operacional
- Data de Lançamento
Configurar configurações adicionais do grupo de campos
Quando o grupo de campos estiver pronto, vá para o módulo Localização. Aqui é onde você identifica onde você quer que o grupo de campos apareça no seu painel do WordPress.
Configurar o Tipo de Post igual ao Produto. Ou, se você quiser ser mais específico, você também pode escolher uma categoria específica de produtos.
Em Configurações, certifique-se de que o grupo de campos está ativo. Isto permite que você o veja nessas páginas de produtos e potencialmente mostrar as seleções de campo aos seus clientes.
O estilo depende das suas próprias preferências. O mesmo pode ser dito para a posição, colocação de etiquetas e colocação instrucional. Isso é tudo preferência pessoal e como você quer formatar o seu backend. Quando em dúvida, deixe-os como padrão.
Definir o número do pedido se você tiver vários grupos de campos aparecendo nas páginas dos produtos. Isto controla a ordem em que os diferentes grupos de campos aparecem.
Pode também definir uma descrição e ocultar certos detalhes no seu ecrã.
Adicionar informação aos produtos
Próximo, navegue até ao editor de um produto onde pretende adicionar campos personalizados.
Se todas as configurações estiverem correctamente configuradas, deverá ver os campos personalizados abaixo da caixa de dados do Produto.
Para o nosso exemplo, se você quiser adicionar uma nova página de produto laptop, você pode escolher a CPU, Memória, Sistema Operacional e Data de Lançamento.
Exibir informações de campos personalizados no front-end
Para terminar, você precisa exibir as informações de seus campos personalizados na página de produto único do front-end. Você pode adicionar esta informação em qualquer lugar, mas bons pontos de partida estão na descrição longa ou curta do produto.
Para exibir as informações do campo no front-end, use o atalho . Adicione o nome do campo entre as aspas:
Você pode encontrar o nome do campo para cada campo na interface do editor do grupo de campos:
Para terminar as coisas, pressione o botão Publicar ou Atualizar.
Quando você abre seu produto no front-end, você deve ver seus campos personalizados onde você adicionou os atalhos:
Ainda perguntas sobre como adicionar campos personalizados?
Uma vantagem de usar campos personalizados avançados sobre plugins alternativos é que você pode colocar seus novos campos em qualquer local do seu site, incluindo páginas de produtos, posts e módulos de carrinho – customizando seu painel de controle e agilizando o processo de criação de conteúdo.
É uma opção maravilhosa para expandir sua criatividade e tornar a tediosa tarefa de construir páginas de produtos um pouco mais simples.
Entendemos que o plugin Advanced Custom Fields plugin tem um pouco de curva de aprendizado, então se você tiver qualquer pensamento ou dúvida sobre como adicionar campos personalizados no WooCommerce, informe-nos nos comentários abaixo!
Você também pode conferir nosso tutorial ACF completo para aprender mais sobre como usar este plugin flexível.