Anexando Meta Boxes às configurações nativas do produto e variações do WooCommerce

Configurações Gerais

Na seção Configurações gerais da guia Adicionar nova meta box , insira o título da meta box e selecione a opção “Dados do produto WooCommerce” na lista suspensa Meta Box para .

Adicionar metacampos para dados de produtos WooCommerce

Ignore a seção Condições de visibilidade .

Crie os metacampos necessários na seção Metacampos . Saiba mais sobre os tipos de metacampos na Visão geral dos tipos de campos personalizados .

Neste caso, adicionamos quatro metacampos: “Data”, “Materiais”, “Estilo” e “Importado”.

Ao terminar, clique no botão “ Adicionar Meta Box ” ou no botão “ Atualizar Meta Box ” se você editar uma meta box criada anteriormente.

Os metacampos personalizados aparecerão no Painel do WordPress> guia Produtos quando você clicar para adicionar ou editar um produto.

Definir condições de visibilidade

Na seção Condições de visibilidade da guia de configurações da meta box, você pode indicar onde a meta box será exibida na página de edição do produto. 

Nesta aba, você também pode adicionar uma nova condição pressionando o botão “ Nova condição ”.

Indique onde a meta box será exibida

Desenrole a lista suspensa Dados do produto da seção Condições de visibilidade e selecione a guia das configurações do painel Produto onde a metacaixa será exibida. A lista suspensa Dados de produtos inclui as opções “Personalizado”, “Geral”, “Estoque”, “Envio”, “Produtos vinculados” e “Avançado”. Você pode selecionar a opção necessária na lista ou deixar o menu suspenso vazio. Se você deixar o menu suspenso vazio, uma guia separada para a metacaixa no painel de configuração do produto será criada. 

Selecione a opção apropriada no painel do WordPress > Adicionar nova meta box > Condições de visibilidade > lista suspensa Dados do produto e retorne ao painel do WordPress > Produtos > guia Editar produtos para verificar a posição da meta box criada.

• Se você selecionar a opção “Personalizado” na lista suspensa Dados do produto , uma guia separada também será criada para a metacaixa. A metacaixa criada será exibida abaixo da guia Avançado do painel de configuração do produto .

• Se você selecionar a opção “Geral” na lista suspensa Dados do produto , os metacampos criados serão exibidos no final da guia Geral do painel de configuração do produto .

• Se você selecionar a opção “Produtos vinculados” na lista suspensa Dados do produto , os metacampos criados serão exibidos no final da guia Produtos vinculados do painel de configuração do produto .

• Se você selecionar a opção “Avançado” na lista suspensa Dados do produto , os metacampos criados serão exibidos no final da guia Avançado do painel de configuração do produto .

Se você selecionar qualquer opção na lista suspensa Dados do produto , a lista suspensa Excluir/Incluir e o campo de texto Prioridade da guia ficarão disponíveis.

A lista suspensa Excluir/Incluir está desabilitada por padrão, então a metacaixa será mostrada para todos os tipos de produtos. Após escolher uma opção no seletor Excluir/Incluir , a lista suspensa Excluir ou Incluir Tipos de Produto aparecerá.

A lista suspensa Excluir ou Incluir Tipos de Produtos permite escolher os tipos de produtos nos quais as metacaixas serão exibidas ou ocultadas, de acordo com a opção selecionada no campo Excluir/Incluir .

O campo de texto Tab Priority é responsável pela prioridade numérica da meta box em relação a outras guias; é definido como um número inteiro. Quanto menor o número, mais alta será a guia exibida na lista. 

Por exemplo, se você definir “1” no campo Prioridade da guia , a guia da meta box será a primeira no painel do produto.

Todas as outras opções na lista suspensa Dados de produtos da seção Condições de visibilidade não possuem configurações adicionais e possuem a mesma funcionalidade. Se você selecioná-los, os metacampos da metacaixa serão adicionados às guias existentes.

Adicione novas condições de visibilidade

Pressionar o botão “ Nova condição ” abre a lista suspensa Adicionar nova condição , que tem duas opções para selecionar: “Incluído para funções de usuário” e “Excluído para funções de usuário”.

Se selecionada, qualquer uma dessas opções ativa as listas suspensas  Incluído para funções de usuário e Excluir para funções de usuário , que permitem selecionar algumas opções, como “Administrador”, “Autor” e muito mais.

Preencha os metacampos

Agora você pode retornar à página de edição do produto, preencher os metacampos e clicar no botão “ Atualizar ”.

Exibir metacampos na página de produto único

Para aprender como criar um modelo de produto único, leia o tutorial Como criar um modelo de página de produto único . 

Abra a página no editor Elementor e arraste e solte o widget Dynamic Field . Em seguida, selecione a fonte “Meta Data” e escolha o Meta Field necessário que deseja exibir. 

Além disso, use a opção Personalizar saída do campo para adicionar texto antes ou depois do valor.

Se você deixou este metacampo vazio, ative a opção Ocultar se o valor estiver vazio para ocultar o widget Campo Dinâmico no front end.

Clique no botão “ Atualizar ” e verifique o resultado no front end.

Configurações Gerais

Ao criar a meta box, na seção Configurações gerais da guia Adicionar nova meta box , insira o título da meta box e selecione a opção “Variação do produto WooCommerce” na lista suspensa Meta Box para .

Adicionar metacampos para variação do produto WooCommerce

Crie os metacampos necessários na seção Metacampos . Saiba mais sobre a criação de metacampos na Visão geral dos tipos de campos personalizados .

Neste caso, adicionamos quatro metacampos: “Data”, “Materiais”, “Estilo” e “Importado”.

Ao terminar, clique no botão “ Adicionar Meta Box ” ou no botão “ Atualizar Meta Box ” se você editar a meta box criada anteriormente.

Se você criar uma metacaixa para “Variações WooCommerce”, os metacampos personalizados aparecerão no Painel do WordPress> guia Produtos quando você adicionar ou editar um produto que tenha o tipo “Variável”. 

Clique para editar uma das variações para ver os metacampos.

Definir condição de visibilidade

Na seção Condições de visibilidade da guia de configurações da meta box, você pode indicar onde a meta box será exibida na página de edição do produto.

Indique onde a meta box será exibida

Selecione a opção necessária na lista suspensa Posição : “Opções”, “Preços”, “Inventário”, “Dimensões”, “Download” e “Atributos”. Nesta seção, você pode adicionar uma nova condição pressionando o botão “ Nova condição ”.

Desenrole a lista suspensa Posição e selecione a opção necessária. Selecione a opção apropriada no Painel do WordPress > Adicionar nova meta box > Condições de visibilidade > lista suspensa Posição e retorne ao Painel do WordPress > Produtos > guia Editar produtos para verificar a posição da meta box criada.

• Se você selecionar “Opções” na lista suspensa, os campos da metacaixa serão exibidos no Painel do WordPress> Produtos> guia Variações abaixo de “Ativado”, “Baixável”, “Virtual” e “Gerenciar estoque? ” caixas de seleção no início da edição da variação.

• Se você selecionar a opção “Preços” na lista suspensa, os metacampos da metacaixa serão exibidos no Painel do WordPress> Produtos> guia Variações após os campos Preço normal e Preço de venda .

• Se você selecionar a opção “Inventário” na lista suspensa, os metacampos serão exibidos no Painel do WordPress > Produtos > guia Variações após o campo Limite de estoque baixo . Eles ficarão visíveis apenas se a opção “Gerenciar estoque?” caixa de seleção está marcada.

• Se você selecionar a opção “Dimensões” na lista suspensa, os metacampos serão exibidos no Painel do WordPress > Produtos > guia Variações abaixo dos campos Peso e Dimensões .

• Se você selecionar a opção “Download” na lista suspensa, os metacampos serão exibidos no Painel do WordPress > Produtos > guia Variações abaixo dos campos Limite de download e Expiração de download . Os metacampos ficarão visíveis apenas se a caixa de seleção “Baixável” estiver marcada.

• Se você selecionar a opção “Atributos” na lista suspensa, os metacampos aparecerão no final do painel de edição de variações no Painel do WordPress > Produtos > guia Variações .

Adicione novas condições de visibilidade

Pressionar o botão “ Nova condição ” abre a lista suspensa Adicionar nova condição , que tem duas opções para selecionar: “Incluído para funções de usuário” e “Excluído para funções de usuário”. Esta lista suspensa tem as mesmas opções e fornece a mesma funcionalidade dos produtos WooCommerce .

Preencha os metacampos

Agora você pode retornar ao painel de edição de variação para preencher os metacampos e preencher os dados de variação. Para salvar os dados de variação, pressione o botão “ Salvar alterações ”. Depois disso, clique no botão “ Atualizar ”.

Exibir metacampos em uma página

Para exibir os metacampos da “Variação do produto WooCommerce”, deve-se criar um item de listagem com as seguintes configurações: 

• selecione a opção “Postagens” na lista suspensa Fonte da listagem ;
• escolha a opção “Variações” na lista suspensa Do tipo de postagem .

Confira o tutorial Como construir listagens de produtos WooC o Commerce com a tag dinâmica para aprender como gerenciar listagens de produtos WooCommerce .

Encontre o widget/bloco/elemento do Campo Dinâmico , especifique a fonte de “Meta Dados” e escolha o Meta Campo necessário .

Salve o item da listagem.

Em seguida, crie uma página e adicione o widget/bloco/elemento Listing Grid . Neste tutorial, usamos o construtor de páginas Elementor.

Selecione a listagem necessária no campo Listagem .

Clique no botão “ Atualizar ” e navegue até o front end para verificar como os metacampos para “Variação do produto WooCommerce” serão exibidos na página. Parcialmente, serão exibidas todas as variações do mesmo produto.