Como adicionar um novo campo na página de checkout do Woocommerce
Como adicionar um novo campo na página de checkout do Woocommerce
Elena Ás vezes precisamos coletar mais informação sobre o pedido que o cliente faz numa loja desenvolvida em Woocommerce.
Vamos ver como podemos adicionar algum novo campo na página do checkout e depois mostrar o resultado na página do pedido no admin painel.
O WooCommerce nos permite adicionar campos a lugares diferentes no formulário de checkout. Há um gancho específico para cada local da página!
| hook | lugar |
woocommerce_before_checkout_billing_form | Antes dos campos do billing address |
woocommerce_after_checkout_billing_form | Depois dos campos do billing address |
woocommerce_before_checkout_registration_form | Antes do formulário de cadastro |
woocommerce_after_checkout_registration_form | Depois do formulário do cadastro |
woocommerce_before_checkout_shipping_form | Antes dos campos do shipping address |
woocommerce_after_checkout_shipping_form | Depois dos campos do shipping address |
woocommerce_before_order_notes | Antes do campo de Notas sobre o pedido |
woocommerce_after_order_notes | Depois do campo de Notas sobre o pedido |
Agora, vamos adicionar um campo de data depois do campo de notas
add_action( 'woocommerce_after_order_notes', 'wptuts_custom_checkout_field' );
function wptuts_custom_checkout_field() {
woocommerce_form_field(
'billing_presente',
array(
'type' => 'text', // text, textarea, select, radio, checkbox, password
'required' => true,
'class' => array( 'true-field', 'form-row-wide' ), // matriz com classes
'placeholder' => 'Presente? Para quem?',
'label_class' => 'true-label', // classe da etiqueta
)
);
}
E o resultado é este
Agora passo dois. Vamos salvar os dados no banco de dados
add_action( 'woocommerce_checkout_update_order_meta', 'wptuts_save_field', 25 );
function wptuts_save_field( $order_id ){
if( ! empty( $_POST[ 'billing_presente' ] ) ) {
update_post_meta( $order_id, 'billing_presente', sanitize_text_field( $_POST[ 'billing_presente' ] ) );
}
}
Agora, nós precisamos que essa opção aparece no painel de admin. Como vamos mostrar isso?
Podemos fazer isso em vários lugares do pedido. Quis hooks temos lá?
woocommerce_admin_order_data_after_order_details– Na primeira coluna, abaixo do “Cliente”woocommerce_admin_order_data_after_billing_address– abaixo do billing addresswoocommerce_admin_order_data_after_shipping_address– abaixo do shipping address
add_action( 'woocommerce_admin_order_data_after_billing_address', 'wptuts_print_field_value', 25 );
function wptuts_print_field_value( $order ) {
if( $method = get_post_meta( $order->get_id(), 'billing_presente', true ) ) {
echo '<p><strong>Cliente solicitou embalar como presente? </strong><br>' . esc_html( $method ) . '</p>';
}
}