Adicionar nova Aba de informações de produto no WooCommerce
WooCommerce, WP
Publicado em 12 de outubro de 2023
Nas últimas semanas andei trabalhando no recurso de recorrência das nossas integrações PagBank para WooCommerce.
Parte do desafio consistia em adicionar um novo grupo de informações na tela de edição/cadastro de um produto no admin do WooCommerce.
Neste artigo vamos ver como adicionar a nova aba, configurar seu ícone, adicionar campos, e salvá-los junto com as informações do produto.
Considerando que você já criou um plugin WooCommerce/WordPress, e tem o WooCommerce instalado, o primeiro passo será adicionar o novo painel de informações.
Adicionando a nova aba de informações do produto
A nova aba é adicionada criando um novo filtro woocomerce_product_data_tabs e depois adicionando seu conteúdo com woocommerce_product_data_panels.
Veja como fiz no meu plugin, com algumas modificações para facilitar o entendimento:
# Adiciona a Aba/Grupo de configuração
function adiciona_nova_aba($productTabs)
{
$productTabs['recurring_pagbank'] = [
'label' => __('Assinatura PagBank', 'meu-plugin-domain'),
'target' => 'recurring_pagbank',
'class' => ['show_if_simple', 'show_if_variable'],
'priority' => 90,
];
return $productTabs;
}
add_filter('woocommerce_product_data_tabs', 'adiciona_nova_aba');
# Adiciona o conteúdo/campos dentro da aba
function adiciona_conteudo_aba() {
global $post;
?>
<!-- o id da div deve corresponder à propriedade "target" mencionada acima -->
<div id="recurring_pagbank" class="panel woocommerce_options_panel">
<?php
woocommerce_wp_checkbox( array(
'id' => '_recurring_enabled',
'wrapper_class' => 'show_if_simple',
'label' => __( 'Habilitar recorrência', 'meu-plugin-domain'),
'description' => __( 'Habilitar', 'meu-plugin-domain'),
'default' => '0',
'desc_tip' => false,
) );
woocommerce_wp_select([
'id' => '_frequency',
'label' => __('Frequência', Connect::DOMAIN),
'options' => [
'daily' => __('Diário', 'meu-plugin-domain'),
'weekly' => __('Semanal', 'meu-plugin-domain'),
'monthly' => __('Mensal', 'meu-plugin-domain'),
'yearly' => __('Anual', 'meu-plugin-domain'),
],
'desc_tip' => true,
'value' => get_post_meta($post->ID, '_frequency', true),
]);
woocommerce_wp_text_input([
'id' => '_frequency_cycle',
'label' => __('Ciclo', 'meu-plugin-domain'),
'description' => __('Ex: Se Frequência fosse Diário e ciclo fosse 2, cobraria a cada 2 dias.', 'meu-plugin-domain'),
'desc_tip' => true,
'type' => 'number',
'custom_attributes' => [
'min' => 1,
'step' => 1,
],
'value' => get_post_meta($post->ID, '_frequency_cycle', true),
]);
woocommerce_wp_text_input([
'id' => '_initial_fee',
'label' => __('Taxa inicial', 'meu-plugin-domain'),
'description' => __('Use . como separador decimal.', 'meu-plugin-domain'),
'desc_tip' => true,
'value' => get_post_meta($post->ID, '_initial_fee', true),
]);
?>
<p><?php echo __('Alterações realizadas aqui só afetarão futuras assinaturas.', 'meu-plugin-domain');?></p>
</div>
<?php
}
add_action('woocommerce_product_data_panels', 'adiciona_conteudo_aba']);
Configurando o ícone do grupo/aba
Existem duas maneiras de alterar o ícone, ambas usando CSS para modificar a guia específica, mas uma usa os ícones WooCommerce disponíveis e a outra inclui adicionar seu próprio ícone totalmente personalizado.
Usando ícones do WooCommerce
Existem vários ícones WooCommerce disponíveis, mas eles são limitados. Para visualizar e escolher um ícone, você pode navegar no IconMoon para ver os ícones disponíveis e obter o código dele.
Uma vez que tiver o código, basta adicionar a regra no css, da seguinte forma:
#woocommerce-product-data ul.wc-tabs li.recurring_pagbank_options a:before { font-family: WooCommerce; content: '\e00e'; }
Você pode adicionar seu css via arquivo ou manualmente com a action admin_head, como mostrado abaixo:
function adiciona_estilo() {
?><style>
#woocommerce-product-data ul.wc-tabs li.recurring_pagbank a:before { font-family: WooCommerce; content: '\e600'; }
</style><?php
}
add_action( 'admin_head', 'adiciona_estilo' );
Eu particularmente não acho elegante esta abordagem, e preferi adicionar um arquivo css manualmente com wp_enqueue_style e colocar as regras nele.
Usando um ícone personalizado
Se você não conseguir encontrar um ícone nos existentes que o WooCommerce oferece, você também pode adicionar o seu próprio. Da mesma forma como customizamos o ícone usando um existente, você pode usar um próprio, como svg ou mesmo de alguma família de fontes como Font Awesome. Veja um exemplo com um svg:
#woocommerce-product-data .recurring_pagbank.active:hover > a:before,
#woocommerce-product-data .recurring_pagbank > a:before {
background: url( 'images/icons/dollar.svg' ) center center no-repeat;
content: " " !important;
background-size: 100%;
width: 13px;
height: 13px;
display: inline-block;
line-height: 1;
}
@media only screen and (max-width: 900px) {
#woocommerce-product-data .recurring_pagbank.active:hover > a:before,
#woocommerce-product-data .recurring_pagbank > a:before,
#woocommerce-product-data .recurring_pagbank:hover a:before {
background-size: 35%;
}
}
.recurring_pagbank:hover a:before {
background: url( 'images/icons/dollar-hover.svg' ) center center no-repeat;
}
Apenas certifique-se de adicionar a classe css na propriedade class da aba.
Salvando as informações da nova aba no produto
Por fim, não esqueça de salvar as informações adicionadas na aba ao produto. Você também pode adicionar validações de backend lá.
Isso será feito com o action woocommerce_process_product_meta.
function salva_conteudo_aba($postId)
{
$recurringEnabled = isset($_POST['_recurring_enabled']) ? 'yes' : 'no'; // checkbox de habilitar foi marcada?
update_post_meta($postId, '_recurring_enabled', $recurringEnabled);
update_post_meta($postId, '_frequency', sanitize_text_field($_POST['_frequency']));
if ($recurringEnabled == 'yes') {
$cycle = sanitize_text_field($_POST['_frequency_cycle']);
$cycle = max($cycle, 1);
$initial = sanitize_text_field($_POST['_initial_fee']);
$initial = str_replace(',', '.', $initial);
$initial = floatval(number_format(max(0, $initial), 2, '.', ''));
update_post_meta($postId, '_frequency_cycle', $cycle);
update_post_meta($postId, '_initial_fee', $initial);
}
}
add_action('woocommerce_process_product_meta', 'salva_conteudo_aba');
Resumo
Como podemos ver é realmente simples adicionar novos campos de configuração ao cadastro de um produto com um plugin customizado.
Se quiser ficar por dentro de outros tutoriais sobre desenvolvimento pra WordPress e WooCommerce, deixe seu e-mail e nome abaixo.
Também escrevemos sobre Magento, PHP, e outras dicas úteis de desenvolvimento e segurança. Vale a pena. 🙂
Grande abraço e até a próxima.
Este artigo foi ligeiramente inspirado neste artigo do Jeroen.
- PagSeguro (PagBank) para Magento 1 recebe a Nova Geração - 9 de abril de 2024
- Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
- Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023
Deixe seu comentário
[fbcomments url="https://www.magenteiro.com/blog/wp/adicionar-nova-aba-tela-produto-woocommerce/"]