Atualmente o WooCommerce já reúne mais de 1 milhão de instalações ativas. E isso quer dizer, caro amigo, que essa plataforma baseada em WordPress funciona em todo o mundo vendendo produtos dos mais variados tipos. Desde lojas de pequeno, médio e grande porte – o WooCommerce e seus milhares de plugins permitem que uma loja de qualidade e excelência seja criada em poucas horas.

Tab (aba) Página de Produto WooCommerce

Hoje o CanalWP traz mais um tutorial incrível sobre WooCommerce que vai ajudar sua vida como desenvolvedor ou usuário e permitir que sua loja alcance um patamar superior, deixando seus produtos com mais detalhes e riqueza de conteúdo.

Preciso informar logo no início que, este não é um tutorial de nível iniciante, mas é voltado para pessoas com certo conhecimento/entendimento de programação PHP, HTML, estruturas e tipos de post WordPress. Se você é iniciante no assunto e quer aprender na prática como as coisas funcionam, basta ter um pouco de paciência e muita atenção.

Como Funcionam as Tabs Padrão WooCommerce

Quando instalamos o WooCommerce e começamos a cadastrar produtos para a loja virtual, 3 são as tabs ou abas padrão exibidas na página de cada produto – Descrição, Informações Adicionais e Avaliações.

Na primeira tab, Descrição, é onde a informação completa sobre o produto é exibida. Na tab Informações Adicionais é onde encontramos características do produto criadas por nós – pode ser de tamanho, cor, dimensões, etc. E na última tab padrão, Avaliações, encontramos comentários de compradores sobre certo produto.

Muitas vezes algumas dessas 3 tabs nativas não são interessante e desejamos removê-las – o que exige o uso de algum plugin ou código PHP. Assim, criar uma ou mais tabs especificas para o seu negócio é algo muito normal, mas não tão simples. Acredite, muitas vezes encontramos apenas como adicionar uma nova tab com informação padrão, ou seja, que para todo e qualquer produto o mesmo texto será mostrado.

Meta Dados WordPress – Uma Breve Pincelada

Para criar tabs dinâmicas no WooCommerce e assim exibir na página de seus produtos, será necessário criar meta dados personalizados. Diferente das taxonomias, os metadados funcionam como informações novas agregadas a cada post ou tipo de post do seu site. Se você tiver o interesse de saber um pouco mais sobre taxonomias, sugiro que leia o post Como Utilizar Taxonomia Personalizada no WordPress também do CanalWP.

Logo, as funções que veremos mais adiante incluem: a criação de uma meta box (caixa que contém metadados), criação de metadados personalizados, atualização das informações de metadados e claro, a criação de Tab Dinâmica WooCommerce e a impressão de informações dentro delas.

O Segredo: Tab Dinâmica WooCommerce + Meta Dados

Para início de conversa, quero que você imagine que estaremos desenvolvendo uma loja WooCommerce para uma farmácia. Assim, criar categorias e atributos para organizar os medicamentos por laboratório e concentração é bem fácil. No entanto, precisamos de áreas organizadas para exibir informações sobre o Modo de Uso de cada medicamento – o que exigem informações diferentes para cada um deles. Sendo assim, exibir tais instruções fica muito fácil e bonito se estiverem contidas em uma tab própria ao invés da descrição completa do produto.

Mão na Massa! (Códigos)

Acesse o arquivo functions.php do seu tema pelo Editor (Aparência > Editor > functions.php) ou software para edição de código via FTP (wp-content > themes > SEU TEMA > functions.php) e adicione os códigos a seguir, mudando apenas aquilo que julgue necessário para a sua necessidade.

Meta Box e Meta Dado

Agora que já temos um cenário e nossas necessidades claras e definidas, vamos ao trabalho! A primeira coisa é criar uma meta box e uma  função para o conteúdo da mesma – onde o meta dado que chamaremos de _cwp_text_modo_uso será definido. Assim, um elemento HTML do tipo textarea estará contido na nossa meta box e irá receber as informações sobre o Modo de Uso de cada medicamento.

/* METABOXES PARA INDICAÇÃO/CONTRA, MODO DE USO E ADVERTÊNCIAS */
function cwp_add_meta_box_modo_uso_produtos(){

add_meta_box(
'modo_uso_meta',
'Modo de Uso',
'cwp_modo_uso_meta_box', // chama a função que cria o Meta Dado e possui o elemento textarea
'product',
'normal'
);

}
add_action('add_meta_boxes', 'cwp_add_meta_box_modo_uso_produtos');

/* Conteudo para Meta Box Modo de Uso */
function cwp_modo_uso_meta_box($post){

// Define Meta Dado
$txt_modo_uso = get_post_meta($post->ID, '_cwp_txt_modo_uso', 1);
?>;

<textarea name="txt_modo_uso" id="txt_modo_uso" style="width: 100%; height: 100px;"><?php echo esc_attr($txt_modo_uso); ?></textarea>

<?php
}

Adicionando o bloco de códigos acima e salvando as alterações em seu arquivo de funções (functions.php), ao acessar a página de cadastro de produtos (Produtos > Adicionar produto) em sua loja WooCommerce você terá um novo box:

Função para Salvar o Meta Dado

Com um metabox criado e reservado para o nosso meta dado _cwp_text_modo_uso, é necessário agora desenvolver o código que vai salvar as informações digitadas ali. Assim, se você não adicionar a função a seguir em seu functions.php tudo que você inserir na textarea que coleta as informações para o nosso meta dado personalizado não será salvo.

/* Função para Salvar Meta Dado Modo Uso */
function cwp_metadado_modo_uso_save_post($post_id){

//Verifico o AutoSave
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ){
return $post_id;
}

// Verifico as permissões de usuário
if( 'product' == $_POST['post_type'] ){

if( !current_user_can('edit_page', $post_id) )
return $post_id;
}
else{
if( !current_user_can('edit_post', $post_id) )
return $post_id;
}

//Salva e Atualiza Meta Dados
update_post_meta($post_id, '_cwp_txt_modo_uso', $_POST['txt_modo_uso']);
}
add_action('save_post', 'cwp_metadado_modo_uso_save_post');

Perceba que a antepenúltima linha dessa função salva as informações no banco de dados e precisa receber o nosso meta dado do jeito que foi criado e também o nome especificado para a nossa textarea.

Criação de Tabs Adicionais para WooCommerce

Beleza! Agora que a persistência dos dados inseridos está funcionando, precisamos criar a Tab para Modo de Uso na página de produtos. Você vai precisar disso aqui:

/* TAB ADICIONAL PARA PRODUTOS */
function cwp_register_woocommerce_product_tab_adicional( $tabs ) {

$tabs['modo_uso'] = array(
'title' => __( 'Modo de Uso', 'textdomain' ),
'priority' => 10,
'callback' => 'cwp_woocommerce_custom_tab_view_modo_uso'
);

return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'cwp_register_woocommerce_product_tab_adicional' );

Perceba que estamos utilizando o filtro woocommerce_product_tabs, definimos um título, prioridade (ordem) para exibição e chamamos uma função responsável por exibir as informações inseridas para o meta dado ‘Modo de Uso‘ de cada produto.

Exibindo o Conteúdo do Meta Dado Dentro da Nova Tab

Criamos a Tab para Modo de Uso, o próximo passo agora é exibir as informações cadastradas. Segue o código:

/* FUNÇÃO QUE EXIBE O CONTEÚDO DO META DADO _cwp_txt_modo_uso */
function cwp_woocommerce_custom_tab_view_modo_uso() {

echo wpautop(get_post_meta( get_the_ID(), '_cwp_txt_modo_uso', 1) );
}

Pronto! Agora salve todas as alterações, cadastre informações para Modo de Uso de um produto e depois vai olhar como ficou a página desta mesma mercadoria. Deve ficar dessa forma:

Observações Importantes

Neste exemplo nós utilizamos apenas o elemento HTML textarea para a coleta de dados. Em todo caso, você pode utilizar qualquer um que queria: input, select, radio butto, check-box. Assim para um meta box você pode adicionar quantos campos acredite ser necessário e claro, crie um novo meta dado para cada campo coletor (textarea, input, etc) que for utilizar.

Nós temos um artigo complementar que mostro a você Como Desabilitar e Reordenar Tabs no WooCommerce.

Conclusão

O post de hoje foi um pouco mais técnico e extremamente útil para desenvolvedores WooCommerce. Utilize para deixar uma loja ainda mais customizada e pronta para responder a todas as dúvidas de seus clientes. Para que fique sua página de produto fique mais organizada com sua nova Tab, é interessante alterar a ordem de exibição das Tabs nativas e se for o  caso, desabilitar alguma delas. Vou ensinar isso no próximo post!

Se você gostou desse artigo considere compartilhar nas redes sociais. Siga-nos nas redes sociais para acompanhar mais artigos como esse. Se de alguma forma este artigo lhe foi útil deixa seu comentário abaixo para podermos saber a sua opinião.