Como adicionar campos e guias personalizados na metabox de dados do produto WooCommerce por código

Neste post, aprenderemos como adicionar seus metacampos personalizados na metabox de dados do produto do WooCommerce; como adicionar campos e também como adicionar sua própria guia personalizada. Entraremos em detalhes sobre como adicionar seus campos, onde adicioná-los, como salvá-los e, finalmente, como exibi-los no frontend.

Adicionando campos personalizados a painéis existentes

Primeiro, veremos como adicionar um campo a painéis existentes. Precisamos enganchar em dois ganchos; um para saída do campo e outro para salvar o valor dele. O primeiro gancho depende de qual guia você deseja exibir seu campo.

A metabox de dados do produto

Lembre-se de que a visibilidade da guia difere dependendo do tipo de produto. Por exemplo, a guia "Geral" é removida quando você alterna para um tipo de produto agrupado. Portanto, você deve considerar não apenas onde seus campos personalizados se encaixam logicamente, mas também considerar um painel visível para todos os tipos de produto desejados. Isso é uma lista dos ganchos mais gerais disponíveis:

• woocommerce_product_options_general_product_data("Em geral")
• woocommerce_product_options_inventory_product_data("Inventário")
• woocommerce_product_options_shipping("Envio")
• woocommerce_product_options_related(“Produtos Vinculados")
• woocommerce_product_options_attributes("Atributos")
• woocommerce_product_options_advanced(“Avançado”)

Adicionando uma entrada de formulário

Quanto à saída de uma entrada de formulário, você pode enviar manualmente o HTML de entrada de formulário (por exemplo <input type="text"...>, ), mas o WooCommerce oferece funções simples para adicionar facilmente campos de qualquer tipo. Eu recomendo usar aqueles. Confira a visão geral do WooCommerce de todos os tipos de entrada possíveis aqui e quais argumentos você pode passar para controlar a saída.

Quanto a este tutorial, adicionarei uma entrada de texto simples dentro da guia de inventário para escrever o número de itens em cada pacote. Quanto à chave como seu valor personalizado é salvo, sempre adicione um sublinhado “_” antes dele, no meu caso será “_number_in_package”:

Salvar e editar um produto. Você deve ver seu campo personalizado aparecer na parte inferior da guia Inventário:

O campo personalizado “Número no pacote” adicionado na parte inferior

Uma nota sobre a visibilidade do campo dependendo do tipo de produto

A metabox de dados do produto do WooCommerce vem com uma grande quantidade de Javascript que oculta e mostra campos e guias/painéis. Você pode utilizar isso facilmente se quiser que seu campo fique visível apenas para tipos de produtos específicos, fornecendo nomes de classe específicos para seu campo.

Digamos que você queira que seu campo seja exibido apenas se o produto for do tipo produto simples, ou que ele fique oculto se o produto for um produto variável. O WooCommerce ouve nomes de classes específicos, como show_if_<producttype>e, hide_if_<producttype>e você pode combinar várias classes para ajustar quando seu campo deve estar oculto ou visível.

Por exemplo, se eu quiser que meu campo fique visível apenas para produtos simples; Vou adicionar isso em ‘ wrapper_class‘ à minha entrada de campo:

Você também pode definir wrapper_class, por exemplo, ‘ show_if_simple show_if_grouped‘ para ter o campo visível apenas para produtos simples ou agrupados. Experimente você mesmo!

Salvando seu campo personalizado

A partir de agora, qualquer coisa que você inserir em seu campo não será salva. Vamos fazer isso a seguir. Nós conectamos woocommerce_process_product_metae salvamos o valor do PHP global $_POST(submissão de formulário).

Deixe-me explicar rapidamente o código acima. Você pode simplesmente salvar o campo usando update_post_meta(), mas nas versões mais recentes do WooCommerce, o manuseio do meta do produto foi bastante aprimorado. Contanto que você tenha o objeto do produto (que obtemos chamando wc_get_product()com o ID do post), você pode manipular facilmente qualquer informação do produto no objeto e, finalmente, chamar save()uma vez para atualizar quaisquer alterações. Isso é muito benéfico, especialmente se você deseja salvar vários campos – nesse caso, você não precisa executar operações de banco de dados para cada campo, apenas uma última vez ao chamar save().

Use update_meta_data()no objeto para cada metadados que você deseja salvar.

Com a função acima, seu campo agora deve ser salvo quando você o atualizar no produto de edição! Observe também que, usando as funções do WooCommerce para gerar o campo, você não precisa obter manualmente o valor do seu campo antes de enviar o campo – é totalmente automático.

Emitindo seu campo personalizado no frontend

O primeiro passo é descobrir qual gancho você deseja usar para gerar seu campo personalizado. O WooCommerce oferece muitos ganchos disponíveis para controlar especificamente onde você deseja a saída. Se você não tiver certeza, dê uma olhada plugins/woocommerce/templates/e dentro desses arquivos você pode facilmente encontrar um gancho apropriado. Você também pode substituir o modelo e adicionar a saída no modelo, mas sempre recomendo usar ganchos.

Quanto a mim, quero que meu campo personalizado seja gerado em um único produto, dentro do meta div – junto com o qual o WooCommerce gera SKU e categoria. Para isso vou usar o gancho woocommerce_product_meta_start. Dentro dos ganchos (como em quase todos os ganchos de modelo) você pode acessar o objeto global post. Eu seguirei a mesma regra de ouro para salvar meu campo; use get_meta()no objeto do produto para obter meu campo personalizado:

Adicionando uma guia e um painel personalizados à metabox de dados do produto

Se você deseja adicionar uma coleção de campos personalizados que pertencem logicamente juntos, pode ser uma boa ideia agrupá-los dentro de uma guia personalizada. Para adicionar uma guia personalizada à metabox de dados do produto, precisamos conectar um filtro para adicionar a própria guia e um gancho para enviar o conteúdo do painel. Finalmente, ainda precisamos adicionar o mesmo gancho acima para salvar nossos campos.

Por exemplo, vou adicionar um painel personalizado chamado “Informações adicionais” onde quero adicionar uma entrada de texto, uma caixa de seleção e uma entrada de número.

Primeiro, filtramos woocommerce_product_data_tabse adicionamos nossa guia à sua matriz.

Há alguns argumentos úteis que podemos fornecer aqui. Você pode, por exemplo, usar ‘ class‘ para controlar a visibilidade da guia dependendo do tipo de produto. Se você perdeu, confira a seção sobre visibilidade de campo mencionada acima. Mas lembre-se de que nas guias você precisa fornecer as classes como um array, não como uma string. Você também pode fornecer ‘ priority‘ para decidir onde sua guia deve aparecer. Usando, por exemplo, 25 irá posicionar a guia logo após “Inventário”.

Como padrão, sua guia aparecerá com uma chave inglesa como ícone. Infelizmente não há (a partir de agora) nenhuma maneira de controlá-lo através do filtro. Se isso for importante para você, você pode adicionar CSS de administrador e fornecer uma classe diferente à sua guia. Aqui está uma visão geral dos ícones disponíveis no WooCommerce.

Saída do painel

O próximo passo é conectar woocommerce_product_data_panelse produzir o conteúdo do seu painel. Uma observação importante aqui é iniciar a saída com divum idatributo com o mesmo nome que você forneceu como chave nas guias (no meu caso ‘ additional_info‘). Quanto ao conteúdo, depende de você – você pode adicionar o HTML que quiser, mas recomendo usar as funções do WooCommerce para gerar campos de formulário. Os mesmos benefícios para ocultar ou mostrar campos também funcionarão aqui.

Depois de salvar, você deve ver a guia e seu conteúdo na metabox de dados do produto (a menos que o produto seja um produto externo, é claro).

Tudo o que resta é salvar os dados inseridos em seus campos personalizados, e para isso usamos o mesmo processo acima:

Nota: No WooCommerce existe uma regra geral em que todas as caixas de seleção são salvas como ‘ yes‘ se estiverem marcadas, ou como string vazia se não estiverem marcadas. Ao seguir a regra do WooCommerce e salvar minha caixa de seleção marcada como ‘ yes‘, isso garante que meu woocommerce_wp_checkbox()trabalho funcione conforme o esperado quando busca o valor atual do meu campo.

Conclusão

Neste post, mostrarei como adicionar seus campos personalizados à metabox de dados de produtos do WooCommerce, como salvá-los, como controlar sua visibilidade e um exemplo simples de saída de seu campo no frontend. Também mostrei como adicionar uma guia personalizada à metabox e adicionar seus campos lá. Espero que isso tenha ajudado você a personalizar o WooCommerce!