![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f68509c.png\")
<\/a><\/p>\nA metabox de dados do produto<\/p>\n
Lembre-se de que a visibilidade da guia difere dependendo do tipo de produto. Por exemplo, a guia "Geral" \u00e9 removida quando voc\u00ea alterna para um tipo de produto agrupado. Portanto, voc\u00ea deve considerar n\u00e3o apenas onde seus campos personalizados se encaixam logicamente, mas tamb\u00e9m considerar um painel vis\u00edvel para todos os tipos de produto desejados. Isso \u00e9 uma lista dos ganchos mais gerais dispon\u00edveis:<\/p>\n
- \n
woocommerce_product_options_general_product_data<\/code>("Em geral")<\/li>\nwoocommerce_product_options_inventory_product_data<\/code>("Invent\u00e1rio")<\/li>\nwoocommerce_product_options_shipping<\/code>("Envio")<\/li>\nwoocommerce_product_options_related<\/code>(“Produtos Vinculados")<\/li>\nwoocommerce_product_options_attributes<\/code>("Atributos")<\/li>\nwoocommerce_product_options_advanced<\/code>(“Avan\u00e7ado”)<\/li>\n<\/ul>\nAdicionando uma entrada de formul\u00e1rio<\/h3>\n
Quanto \u00e0 sa\u00edda de uma entrada de formul\u00e1rio, voc\u00ea pode enviar manualmente o HTML de entrada de formul\u00e1rio (por exemplo
<input type=\"text\"...><\/code>, ), mas o WooCommerce oferece fun\u00e7\u00f5es simples para adicionar facilmente campos de qualquer tipo. Eu recomendo usar aqueles. Confira a vis\u00e3o geral<\/a> do WooCommerce de todos os tipos de entrada poss\u00edveis aqui e quais argumentos voc\u00ea pode passar para controlar a sa\u00edda.<\/p>\nQuanto a este tutorial, adicionarei uma entrada de texto simples dentro da guia de invent\u00e1rio para escrever o n\u00famero de itens em cada pacote. Quanto \u00e0 chave como seu valor personalizado \u00e9 salvo, sempre adicione um sublinhado “_” antes dele, no meu caso ser\u00e1 “_number_in_package”:<\/p>\n
add_action('woocommerce_product_options_inventory_product_data', function() {\n woocommerce_wp_text_input([\n 'id' => '_number_in_package',\n 'label' => __('Number in package', 'txtdomain'),\n ]);\n});<\/code><\/pre>\nSalvar e editar um produto. Voc\u00ea deve ver seu campo personalizado aparecer na parte inferior da guia Invent\u00e1rio:<\/p>\n
![\"Como](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f74b757.png\")
<\/a><\/p>\nO campo personalizado “N\u00famero no pacote” adicionado na parte inferior<\/p>\n
Uma nota sobre a visibilidade do campo dependendo do tipo de produto<\/h3>\n
A metabox de dados do produto do WooCommerce vem com uma grande quantidade de Javascript que oculta e mostra campos e guias\/pain\u00e9is. Voc\u00ea pode utilizar isso facilmente se quiser que seu campo fique vis\u00edvel apenas para tipos de produtos espec\u00edficos, fornecendo nomes de classe espec\u00edficos para seu campo.<\/p>\n
Digamos que voc\u00ea 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\u00e1vel. O WooCommerce ouve nomes de classes espec\u00edficos, como
show_if_<producttype><\/code>e,hide_if_<producttype><\/code>e voc\u00ea pode combinar v\u00e1rias classes para ajustar quando seu campo deve estar oculto ou vis\u00edvel.<\/p>\nPor exemplo, se eu quiser que meu campo fique vis\u00edvel apenas para produtos simples; Vou adicionar isso em ‘
wrapper_class<\/code>‘ \u00e0 minha entrada de campo:<\/p>\nadd_action('woocommerce_product_options_inventory_product_data', function() {\n woocommerce_wp_text_input([\n 'id' => '_number_in_package',\n 'label' => __('Number in package', 'txtdomain'),\n 'wrapper_class' => 'show_if_simple'\n ]);\n});<\/code><\/pre>\nVoc\u00ea tamb\u00e9m pode definir
wrapper_class<\/code>, por exemplo, ‘show_if_simple show_if_grouped<\/code>‘ para ter o campo vis\u00edvel apenas para produtos simples ou agrupados. Experimente voc\u00ea mesmo!<\/p>\nSalvando seu campo personalizado<\/h3>\n
A partir de agora, qualquer coisa que voc\u00ea inserir em seu campo n\u00e3o ser\u00e1 salva. Vamos fazer isso a seguir. N\u00f3s conectamos
woocommerce_process_product_meta<\/code>e salvamos o valor do PHP global$_POST<\/code>(submiss\u00e3o de formul\u00e1rio).<\/p>\nadd_action('woocommerce_process_product_meta', function($post_id) {\n $product = wc_get_product($post_id);\n $num_package = isset($_POST['_number_in_package'])? $_POST['_number_in_package']: '';\n $product->update_meta_data('_number_in_package', sanitize_text_field($num_package));\n $product->save();\n});<\/code><\/pre>\nDeixe-me explicar rapidamente o c\u00f3digo acima. Voc\u00ea pode simplesmente salvar o campo usando
update_post_meta()<\/code>, mas nas vers\u00f5es mais recentes do WooCommerce, o manuseio do meta do produto foi bastante aprimorado. Contanto que voc\u00ea tenha o objeto do produto (que obtemos chamandowc_get_product()<\/code>com o ID do post), voc\u00ea pode manipular facilmente qualquer informa\u00e7\u00e3o do produto no objeto e, finalmente, chamarsave()<\/code>uma vez para atualizar quaisquer altera\u00e7\u00f5es. Isso \u00e9 muito ben\u00e9fico, especialmente se voc\u00ea deseja salvar v\u00e1rios campos – nesse caso, voc\u00ea n\u00e3o precisa executar opera\u00e7\u00f5es de banco de dados para cada campo, apenas uma \u00faltima vez ao chamarsave()<\/code>.<\/p>\nUse
update_meta_data()<\/code>no objeto para cada metadados que voc\u00ea deseja salvar.<\/p>\nCom a fun\u00e7\u00e3o acima, seu campo agora deve ser salvo quando voc\u00ea o atualizar no produto de edi\u00e7\u00e3o! Observe tamb\u00e9m que, usando as fun\u00e7\u00f5es do WooCommerce para gerar o campo, voc\u00ea n\u00e3o precisa obter manualmente o valor do seu campo antes de enviar o campo – \u00e9 totalmente autom\u00e1tico.<\/p>\n
Emitindo seu campo personalizado no frontend<\/h3>\n
O primeiro passo \u00e9 descobrir qual gancho voc\u00ea deseja usar para gerar seu campo personalizado. O WooCommerce oferece muitos ganchos dispon\u00edveis para controlar especificamente onde voc\u00ea deseja a sa\u00edda. Se voc\u00ea n\u00e3o tiver certeza, d\u00ea uma olhada
plugins\/woocommerce\/templates\/<\/code>e dentro desses arquivos voc\u00ea pode facilmente encontrar um gancho apropriado. Voc\u00ea tamb\u00e9m pode substituir o modelo e adicionar a sa\u00edda no modelo, mas sempre recomendo usar ganchos.<\/p>\nQuanto a mim, quero que meu campo personalizado seja gerado em um \u00fanico produto, dentro do meta div \u2013 junto com o qual o WooCommerce gera SKU e categoria. Para isso vou usar o gancho
woocommerce_product_meta_start<\/code>. Dentro dos ganchos (como em quase todos os ganchos de modelo) voc\u00ea pode acessar o objeto global post. Eu seguirei a mesma regra de ouro para salvar meu campo; useget_meta()<\/code>no objeto do produto para obter meu campo personalizado:<\/p>\nadd_action('woocommerce_product_meta_start', function() {\n global $post;\n $product = wc_get_product($post->ID);\n $num_package = $product->get_meta('_number_in_package');\n if (!empty($num_package)) {\n printf('<div class=\"custom-sku\">%s: %s<\/div>', __('Number in package', 'txtdomain'), $num_package);\n }\n});<\/code><\/pre>\nAdicionando uma guia e um painel personalizados \u00e0 metabox de dados do produto<\/h2>\n
Se voc\u00ea deseja adicionar uma cole\u00e7\u00e3o de campos personalizados que pertencem logicamente juntos, pode ser uma boa ideia agrup\u00e1-los dentro de uma guia personalizada. Para adicionar uma guia personalizada \u00e0 metabox de dados do produto, precisamos conectar um filtro para adicionar a pr\u00f3pria guia e um gancho para enviar o conte\u00fado do painel. Finalmente, ainda precisamos adicionar o mesmo gancho acima para salvar nossos campos.<\/p>\n
Por exemplo, vou adicionar um painel personalizado chamado “Informa\u00e7\u00f5es adicionais” onde quero adicionar uma entrada de texto, uma caixa de sele\u00e7\u00e3o e uma entrada de n\u00famero.<\/p>\n
Primeiro, filtramos
woocommerce_product_data_tabs<\/code>e adicionamos nossa guia \u00e0 sua matriz.<\/p>\nadd_filter('woocommerce_product_data_tabs', function($tabs) {\n $tabs['additional_info'] = [\n 'label' => __('Additional info', 'txtdomain'),\n 'target' => 'additional_product_data',\n 'class' => ['hide_if_external'],\n 'priority' => 25\n ];\n return $tabs;\n});<\/code><\/pre>\nH\u00e1 alguns argumentos \u00fateis que podemos fornecer aqui. Voc\u00ea pode, por exemplo, usar ‘
class<\/code>‘ para controlar a visibilidade da guia dependendo do tipo de produto. Se voc\u00ea perdeu, confira a se\u00e7\u00e3o sobre visibilidade de campo mencionada acima<\/a>. Mas lembre-se de que nas guias voc\u00ea precisa fornecer as classes como um array, n\u00e3o como uma string. Voc\u00ea tamb\u00e9m pode fornecer ‘priority<\/code>‘ para decidir onde sua guia deve aparecer. Usando, por exemplo, 25 ir\u00e1 posicionar a guia logo ap\u00f3s “Invent\u00e1rio”.<\/p>\nComo padr\u00e3o, sua guia aparecer\u00e1 com uma chave inglesa como \u00edcone. Infelizmente n\u00e3o h\u00e1 (a partir de agora) nenhuma maneira de control\u00e1-lo atrav\u00e9s do filtro. Se isso for importante para voc\u00ea, voc\u00ea pode adicionar CSS de administrador e fornecer uma classe diferente \u00e0 sua guia. Aqui est\u00e1 uma vis\u00e3o geral<\/a> dos \u00edcones dispon\u00edveis no WooCommerce.<\/p>\n
Sa\u00edda do painel<\/h3>\n
O pr\u00f3ximo passo \u00e9 conectar
woocommerce_product_data_panels<\/code>e produzir o conte\u00fado do seu painel. Uma observa\u00e7\u00e3o importante aqui \u00e9 iniciar a sa\u00edda comdiv<\/code>umid<\/code>atributo com o mesmo nome que voc\u00ea forneceu como chave nas guias (no meu caso ‘additional_info<\/code>‘). Quanto ao conte\u00fado, depende de voc\u00ea \u2013 voc\u00ea pode adicionar o HTML que quiser, mas recomendo usar as fun\u00e7\u00f5es do WooCommerce para gerar campos de formul\u00e1rio. Os mesmos benef\u00edcios para ocultar ou mostrar campos tamb\u00e9m funcionar\u00e3o aqui.<\/p>\nadd_action('woocommerce_product_data_panels', function() {\n ?><div id=\"additional_product_data\" class=\"panel woocommerce_options_panel hidden\"><?php\n\u00a0\n woocommerce_wp_text_input([\n 'id' => '_dummy_text_input',\n 'label' => __('Dummy text input', 'txtdomain'),\n 'wrapper_class' => 'show_if_simple',\n ]);\n woocommerce_wp_checkbox([\n 'id' => '_dummy_checkbox',\n 'label' => __('Dummy checkbox', 'txtdomain'),\n 'wrapper_class' => 'hide_if_grouped',\n ]);\n woocommerce_wp_text_input([\n 'id' => '_dummy_number_input',\n 'label' => __('Dummy number input', 'txtdomain'),\n 'type' => 'number',\n 'custom_attributes' => [\n 'step' => '1',\n 'min' => '0'\n ]\n ]);\n ?><\/div><?php\n});<\/code><\/pre>\nDepois de salvar, voc\u00ea deve ver a guia e seu conte\u00fado na metabox de dados do produto (a menos que o produto seja um produto externo, \u00e9 claro).<\/p>\n