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 é:
- Criar o campo na tela de Checkout
- Validar o novo campo
- Salvar o valor do novo campo no banco de dados
- 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ã.