{"id":4114,"date":"2023-10-12T21:07:29","date_gmt":"2023-10-13T00:07:29","guid":{"rendered":"https:\/\/www.magenteiro.com\/blog\/?p=4114"},"modified":"2024-09-16T22:26:55","modified_gmt":"2024-09-17T01:26:55","slug":"adicionar-nova-aba-tela-produto-woocommerce","status":"publish","type":"post","link":"https:\/\/www.magenteiro.com\/blog\/wp\/adicionar-nova-aba-tela-produto-woocommerce\/","title":{"rendered":"Adicionar nova Aba de informa\u00e7\u00f5es de produto no WooCommerce"},"content":{"rendered":"\n

Nas \u00faltimas semanas andei trabalhando no recurso de recorr\u00eancia das nossas integra\u00e7\u00f5es PagBank para WooCommerce<\/a>.<\/p>\n\n\n\n

Parte do desafio consistia em adicionar um novo grupo de informa\u00e7\u00f5es na tela de edi\u00e7\u00e3o\/cadastro de um produto no admin do WooCommerce.<\/p>\n\n\n\n

\"Nova<\/figure>\n\n\n\n

Neste artigo vamos ver como adicionar a nova aba<\/a>, configurar seu \u00edcone<\/a>, adicionar campos<\/a>, e salv\u00e1-los<\/a> junto com as informa\u00e7\u00f5es do produto.<\/p>\n\n\n\n

Considerando que voc\u00ea j\u00e1 criou um plugin WooCommerce<\/a>\/WordPress, e tem o WooCommerce<\/a> instalado, o primeiro passo ser\u00e1 adicionar o novo painel de informa\u00e7\u00f5es.<\/p>\n\n\n\n

Adicionando a nova aba de informa\u00e7\u00f5es do produto<\/h2>\n\n\n\n

A nova aba \u00e9 adicionada criando um novo filtro woocomerce_product_data_tabs<\/code> e depois adicionando seu conte\u00fado com woocommerce_product_data_panels<\/code>.<\/p>\n\n\n\n

Veja como fiz no meu plugin, com algumas modifica\u00e7\u00f5es para facilitar o entendimento:<\/p>\n\n\n\n

# Adiciona a Aba\/Grupo de configura\u00e7\u00e3o\nfunction adiciona_nova_aba($productTabs)\n    {\n        $productTabs['recurring_pagbank'] = [\n            'label' => __('Assinatura PagBank', 'meu-plugin-domain'),\n            'target' => 'recurring_pagbank',\n            'class' => ['show_if_simple', 'show_if_variable'],\n            'priority' => 90,\n        ];\n        \n        return $productTabs;    \n    }\nadd_filter('woocommerce_product_data_tabs', 'adiciona_nova_aba');\n\n# Adiciona o conte\u00fado\/campos dentro da aba\nfunction adiciona_conteudo_aba() {\n        global $post;\n        ?>\n        <!-- o id da div deve corresponder \u00e0 propriedade \"target\" mencionada acima -->\n        <div id=\"recurring_pagbank\" class=\"panel woocommerce_options_panel\">\n            <?php\n            woocommerce_wp_checkbox( array(\n                'id'            => '_recurring_enabled',\n                'wrapper_class' => 'show_if_simple',\n                'label'         => __( 'Habilitar recorr\u00eancia', 'meu-plugin-domain'),\n                'description'   => __( 'Habilitar', 'meu-plugin-domain'),\n                'default'  \t\t=> '0',\n                'desc_tip'    \t=> false,\n            ) );\n            woocommerce_wp_select([\n                'id' => '_frequency',\n                'label' => __('Frequ\u00eancia', Connect::DOMAIN),\n                'options' => [\n                    'daily'     => __('Di\u00e1rio', 'meu-plugin-domain'),\n                    'weekly'    => __('Semanal', 'meu-plugin-domain'),\n                    'monthly'    => __('Mensal', 'meu-plugin-domain'),\n                    'yearly'    => __('Anual', 'meu-plugin-domain'),\n                ],\n                'desc_tip' => true,\n                'value' => get_post_meta($post->ID, '_frequency', true),\n            ]);\n            woocommerce_wp_text_input([\n                'id' => '_frequency_cycle',\n                'label' => __('Ciclo', 'meu-plugin-domain'),\n                'description' => __('Ex: Se Frequ\u00eancia fosse Di\u00e1rio e ciclo fosse 2, cobraria a cada 2 dias.', 'meu-plugin-domain'),\n                'desc_tip' => true,\n                'type' => 'number',\n                'custom_attributes' => [\n                    'min' => 1,\n                    'step' => 1,\n                ],\n                'value' => get_post_meta($post->ID, '_frequency_cycle', true),\n            ]);\n            woocommerce_wp_text_input([\n                'id' => '_initial_fee',\n                'label' => __('Taxa inicial', 'meu-plugin-domain'),\n                'description' => __('Use . como separador decimal.', 'meu-plugin-domain'),\n                'desc_tip' => true,\n                'value' => get_post_meta($post->ID, '_initial_fee', true),\n            ]);\n            ?>\n            <p><?php echo __('Altera\u00e7\u00f5es realizadas aqui s\u00f3 afetar\u00e3o futuras assinaturas.', 'meu-plugin-domain');?><\/p>\n        <\/div>\n        <?php\n    }\n\nadd_action('woocommerce_product_data_panels', 'adiciona_conteudo_aba']);<\/pre>\n\n\n\n
Configurando o \u00edcone do grupo\/aba<\/h2>\n\n\n\n
Existem duas maneiras de alterar o \u00edcone, ambas usando CSS para modificar a guia espec\u00edfica, mas uma usa os \u00edcones WooCommerce dispon\u00edveis e a outra inclui adicionar seu pr\u00f3prio \u00edcone totalmente personalizado.<\/p>\n\n\n\n
Usando \u00edcones do WooCommerce<\/h3>\n\n\n\n
Existem v\u00e1rios \u00edcones WooCommerce dispon\u00edveis, mas eles s\u00e3o limitados. Para visualizar e escolher um \u00edcone, voc\u00ea pode navegar no IconMoon<\/a> para ver os \u00edcones dispon\u00edveis e obter o c\u00f3digo dele.<\/p>\n\n\n\n
Uma vez que tiver o c\u00f3digo, basta adicionar a regra no css, da seguinte forma:<\/p>\n\n\n\n
#woocommerce-product-data ul.wc-tabs li.recurring_pagbank_options a:before { font-family: WooCommerce; content: '\\e00e'; }<\/pre>\n\n\n\n
Voc\u00ea pode adicionar seu css via arquivo ou manualmente com a action admin_head<\/code>, como mostrado abaixo:<\/p>\n\n\n\n
function adiciona_estilo() {\n\n\t?><style>\n\t\t#woocommerce-product-data ul.wc-tabs li.recurring_pagbank a:before { font-family: WooCommerce; content: '\\e600'; }\n\t<\/style><?php\n\n}\nadd_action( 'admin_head', 'adiciona_estilo' );<\/pre>\n\n\n\n
Eu particularmente n\u00e3o acho elegante esta abordagem, e preferi adicionar um arquivo css manualmente<\/a> com wp_enqueue_style<\/code> e colocar as regras nele.<\/p>\n\n\n\n
Usando um \u00edcone personalizado<\/h3>\n\n\n\n
Se voc\u00ea n\u00e3o conseguir encontrar um \u00edcone nos existentes que o WooCommerce oferece, voc\u00ea tamb\u00e9m pode adicionar o seu pr\u00f3prio. Da mesma forma como customizamos o \u00edcone usando um existente, voc\u00ea pode usar um pr\u00f3prio, como svg ou mesmo de alguma fam\u00edlia de fontes como Font Awesome. Veja um exemplo com um svg:<\/p>\n\n\n\n
#woocommerce-product-data .recurring_pagbank.active:hover > a:before,\n\t\t#woocommerce-product-data .recurring_pagbank > a:before {\n\t\t\tbackground: url( 'images\/icons\/dollar.svg' ) center center no-repeat;\n\t\t\tcontent: \" \" !important;\n\t\t\tbackground-size: 100%;\n\t\t\twidth: 13px;\n\t\t\theight: 13px;\n\t\t\tdisplay: inline-block;\n\t\t\tline-height: 1;\n\t\t}\n\t\t@media only screen and (max-width: 900px) {\n\t\t\t#woocommerce-product-data .recurring_pagbank.active:hover > a:before,\n\t\t\t#woocommerce-product-data .recurring_pagbank > a:before,\n\t\t\t#woocommerce-product-data .recurring_pagbank:hover a:before {\n\t\t\t\tbackground-size: 35%;\n\t\t\t}\n\t\t}\n\t\t.recurring_pagbank:hover a:before {\n\t\t\tbackground: url( 'images\/icons\/dollar-hover.svg' ) center center no-repeat;\n\t\t}<\/pre>\n\n\n\n
Apenas certifique-se de adicionar a classe css na propriedade class<\/code> da aba.<\/p>\n\n\n\n
Salvando as informa\u00e7\u00f5es da nova aba no produto<\/h2>\n\n\n\n
Por fim, n\u00e3o esque\u00e7a de salvar as informa\u00e7\u00f5es adicionadas na aba ao produto. Voc\u00ea tamb\u00e9m pode adicionar valida\u00e7\u00f5es de backend l\u00e1.<\/p>\n\n\n\n
Isso ser\u00e1 feito com o action woocommerce_process_product_meta<\/code>.<\/p>\n\n\n\n
function salva_conteudo_aba($postId)\n    {\n        $recurringEnabled = isset($_POST['_recurring_enabled']) ? 'yes' : 'no'; \/\/ checkbox de habilitar foi marcada?\n        update_post_meta($postId, '_recurring_enabled', $recurringEnabled);\n        \n        update_post_meta($postId, '_frequency', sanitize_text_field($_POST['_frequency']));\n        \n        if ($recurringEnabled == 'yes') {\n            $cycle = sanitize_text_field($_POST['_frequency_cycle']);\n            $cycle = max($cycle, 1);\n            \n            $initial = sanitize_text_field($_POST['_initial_fee']);\n            $initial = str_replace(',', '.', $initial);\n            $initial = floatval(number_format(max(0, $initial), 2, '.', ''));\n            update_post_meta($postId, '_frequency_cycle', $cycle);\n            update_post_meta($postId, '_initial_fee', $initial);\n        }\n    }\nadd_action('woocommerce_process_product_meta', 'salva_conteudo_aba');<\/pre>\n\n\n\n
Resumo<\/h2>\n\n\n\n
Como podemos ver \u00e9 realmente simples adicionar novos campos de configura\u00e7\u00e3o ao cadastro de um produto com um plugin customizado.<\/p>\n\n\n\n
Se quiser ficar por dentro de outros tutoriais sobre desenvolvimento pra WordPress e WooCommerce<\/a>, deixe seu e-mail e nome abaixo.<\/p>\n\n\n\n