Menu

WooCommerce: 4 sencillos pasos para añadir campos en la página de pago

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 puedan elegir el horario de la misma.

Fill 1 checkout, WooCommerce

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.

El cliente podrá seleccionar el horario de entrega en WooCommerce

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:

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í:

Este sería el resultado de cómo quedaría la zona para seleccionar el horario de entrega.

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:

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í:

Mensaje de error que mostraremos a nuestro cliente en WooCommerce

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:

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í:

Detalle del pedido en WooCommerce

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:

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.

Resultado de como se verán los email de pedido en WooCommerce

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: