WooCommerce: 4 sencillos pasos para añadir campos en la página de pago
Escrito por Luis Ruiz Actualizado el
En este artículo mostramos como añadir fácilmente un horario de entrega en la página de pago en WooCommerce, para que tus clientes elegirlo.
Sumario
Con estos 4 sencillos pasos podrás añadir campos sin problemas a la Página de pago o Checkout.
Para más información puedes dirigirte a codex de WooCommerce.
Definir necesidades
Lo mejor para explicar cómo se implementaría el código es crear una posible necesidad, y definirla, para buscar la solución más idónea.
En este caso vamos a crear un bloque nuevo para que el cliente pueda seleccionar un horario de entrega.
1. Añadiendo campos personalizados a WooCommerce
El nuevo bloque lo queremos añadir antes del bloque de Comentarios / Notas del pedido. Lo primero es abrir el fichero “functions.php”, aunque lo mejor sería separarlo en un plugin. Para no complicar el código solo añadiremos el título y una opción con el siguiente código:
// Añadimos el módulo de horario de entrega.
add_action('woocommerce_before_order_notes', 'add_schedule_module_delivery');
function add_schedule_module_delivery( $checkout ) {
echo '<div class="form-row schedule_delivery" id="schedule_delivery_field"><h3>'.__('¿En qué horario prefieres la entrega?').'</h3>';
woocommerce_form_field("shipping_schedule_delivery", array(
'type' => 'radio',
'class' => array('form-row-wide radio_schedule_delivery'),
'label' => '',
'label_class' =>; '',
'options' => array(
'8:00-15:00h (L-V)' => __('<strong>Por la mañana</strong> 8:00-15:00h LUNES-VIERNES'),
'15:00-19:00h (L-V)' => __('<strong>Por la tarde</strong> 15:00-19:00h LUNES-VIERNES'),
'19:00-22:30h (L-V)' => __('<strong>Por la noche</strong> 19:00-22:30h LUNES-VIERNES'),
'Fines de semana' => __('<strong>Fines de semana</strong>')
),
), $checkout->get_value( 'shipping_schedule_delivery' ) );
echo '</div>';
}Con este código lo que hemos hecho es utilizar el Hook woocommerce_before_order_notes para poner una zona antes del bloque de Notas del Pedido. Si lo necesitamos después, utilizaríamos el Hook woocommerce_after_order_notes.
Añadir campos personalizados al formulario de pago de WooCommerce puede ser una tarea sencilla mediante los Hooks y Filtros que vienen implementados.
Definiríamos luego un título y los campos que necesitemos mediante woocommerce_form_field. Puedes ver los diferentes tipos de campos en Tipos de campos personalizados para WooCommerce.
Dependiendo de los estilos de tu tema de WordPress, y de los estilos que le des, se vería algo así:
2. Validar campo personalizado en WooCommerce
Ahora tenemos que validar lo que el cliente haya seleccionado en el horario, añadiendo el siguiente código:
// Validados el nuevo campo
add_action('woocommerce_checkout_process', 'validate_checkout_field_process');
function validate_checkout_field_process() {
// Comprobar si el campo trae algún valor, en caso contrario agregar un error.
if (!$_POST['shipping_schedule_delivery']){
wc_add_notice( __('Por favor seleccione un horario de entrega.'), 'error' );
}
}Mediante la función wc_add_notice de WooCommerce notificaremos el mensaje de error y, según el estilo de tu tema de WordPress, quedaría así:
3. Guardar el valor del campo en el panel de administración de WooCommerce
Lo siguiente es guardar el dato en el pedido para que podamos saber el horario elegido por el cliente, con el siguiente código:
// Mostramos los Campos en el pedido del CMS
add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');
function my_custom_checkout_field_update_order_meta( $order_id ) {
if ($_POST['shipping_schedule_delivery']){
update_post_meta( $order_id, 'Horario de entrega', esc_attr($_POST['shipping_schedule_delivery']));
}
}En esta ocasión utilizaremos el Hook woocommerce_checkout_update_order_meta donde definiremos el texto a mostrar y el campo a guardar.
Si accedemos al panel de control de WordPress, la orden del pedido se vera así:
4. Añadir el campo al email de notificación de WooCommerce
Y para finalizar… ya solo quedaría añadir la selección del cliente en los emails que utiliza WooCommerce para las notificaciones de los pedidos.
En este caso utilizaremos el Hook woocommerce_email_order_meta_keys. Gracias a este hook podemos añadir cualquier campo personalizado a nuestros correos electrónicos de pedido en WooCommerce. Tendremos que volver a ir a nuestro fichero “functions.php”, donde añadiremos el siguiente código:
// Para insertar en los emails de notificación de Pedido el campo personalizado.
add_filter('woocommerce_email_order_meta_keys', 'my_custom_checkout_field_order_meta_keys');
function my_custom_checkout_field_order_meta_keys( $keys ) {
$keys[] = 'Horario de entrega';
return $keys;
}Recordad qué Horario de entrega es el identificador del campo que hemos utilizado en el paso 3 para guardar el valor del campo.
El email que recibirá el cliente, y el administrador de WooCommerce, será algo así dependiendo del diseño que se le hayamos dado.
Conclusión
Consideramos que los siguientes pasos requieren tener conocimiento técnico del plugin de comercio electrónico WooCommerce. Si desconoces su funcionamiento, entonces te sugerimos utilizar plugins como WooCommerce Checkout Manager (gratuito) o Checkout Field Editor (de pago).
Más información:
