Como adicionar campos personalizados no “checkout” do Woocommerce

Sem dúvida, o Woocommerce é unânime em questão e-commerce com WordPress, são mais de 5 milhões de Downloads e diversos plugins para estender suas funcionalidades.

Diante deste gigante do e-commerce, as vezes é necessário personalizar um pouco e é isto que vamos ensinar, como criar novos campos na tela de fechamento de pedido. Criar campos personalizados no Woocommerce pode parecer complicado, mas, vamos mostrar uma maneira fácil, rápida e sem a necessidade de utilizar mais plugins.

O que vamos precisar fazer é:

1. Criar o campo na tela de Checkout
2. Validar o novo campo
3. Salvar o valor do novo campo no banco de dados
4. Mostrar o campo na tela gerencial de pedidos

 

Vamos começar, acesse a pasta do seu tema e edite o arquivo functions.php, adicione no final os códigos citados.

 

1 – Criar o campo na tela de Checkout

add_action( 'woocommerce_after_order_notes', 'novo_campo_woocommerce' );
 
function novo_campo_woocommerce( $checkout ) {
 
    echo '<div id="novo_campo_woocommerce"><h2>' . __('Novo campo, informação de teste') . '</h2>';
 
    woocommerce_form_field( 'novo_campo', array(
        'type'          => 'text',
        'class'         => array('novo_campo form-row-wide'),
        'label'         => __('Campo de Teste'),
        'placeholder'   => __('Digite suas informações aqui'),
        ), $checkout->get_value( 'novo_campo' ));
 
    echo '</div>';
 
}

 

Exemplo de como ficará na tela de Checkout.

 

2 – Validar o novo campo

O próximo passo agora é validar o campo conforme nossa necessidade.

add_action('woocommerce_checkout_process', 'validar_novo_campo_woocommerce');
 
function validar_novo_campo_woocommerce() {

    if ( empty( $_POST['novo_campo']) )
        wc_add_notice( __( 'Obrigatório o preenchimento.' ), 'error' );
}

 

Exemplo de mensagem de erro retornada.

 

3 – Salvar o novo valor no banco de dados

add_action( 'woocommerce_checkout_update_order_meta', 'novo_campo_checkout_order' );
 
function novo_campo_checkout_order( $order_id ) {
    if ( ! empty( $_POST['novo_campo'] ) ) {
        update_post_meta( $order_id, 'Novo Campo', sanitize_text_field( $_POST['novo_campo'] ) );
    }
}

 

4 – Mostrar o campo na tela de gerenciamento

add_action( 'woocommerce_admin_order_data_after_billing_address', 'mostrar_novo_campo', 10, 1 );
 
function mostrar_novo_campo($order){
    echo '<p><strong>'.__('Novo Campo').':</strong> ' . get_post_meta( $order->id, 'Novo Campo', true ) . '</p>';
}

 

Exemplo de como aparecerá na tela de gerenciamento de pedido, campo destacado com a cor amarela.

 

Também é possível remover os campos que não são necessários, vamos postar esta dica amanhã.