La página de checkout es uno de los elementos más críticos en cualquier tienda en línea, ya que es el paso final antes de completar una compra. Personalizar esta página, específicamente añadiendo campos personalizados en el checkout de WooCommerce, puede ayudarte a recopilar información adicional sobre tus clientes o adaptar el proceso de pago según las necesidades específicas de tu negocio.
WooCommerce, gracias a su flexibilidad, permite a los desarrolladores y usuarios personalizar prácticamente cualquier aspecto de la tienda, y esto incluye el formulario de checkout. Utilizando hooks y filtros, es posible añadir nuevos campos de entrada, modificar los existentes o eliminar campos que no sean necesarios.
En este tutorial, te enseñaremos cómo agregar campos personalizados en el checkout de WooCommerce de manera sencilla, utilizando código y sin la necesidad de plugins adicionales.
¿Por qué agregar campos personalizados en el checkout de WooCommerce?
Añadir campos personalizados en el checkout puede tener varios beneficios. Por ejemplo, puedes solicitar información adicional para personalizar los pedidos, crear encuestas rápidas o recopilar datos adicionales que mejoren tu marketing. Algunos usos comunes incluyen campos como “cómo conociste nuestra tienda”, opciones de regalo o preferencias de envío.
Al utilizar hooks y filtros en WooCommerce, puedes hacer estos cambios sin alterar los archivos principales del sistema, manteniendo tu tienda actualizable y segura.
Tutorial paso a paso para agregar campos personalizados en el checkout de WooCommerce
1. Crear una función para agregar el campo personalizado
El primer paso para agregar un nuevo campo en el checkout de WooCommerce es crear una función que añada el campo de entrada. Utilizaremos el hook woocommerce_checkout_fields para lograr esto. El siguiente código agrega un campo de texto llamado "Número de identificación" en el formulario de pago.
// Agregar un nuevo campo personalizado en el checkout
function agregar_campo_personalizado_checkout( $fields ) {
$fields['billing']['billing_identificacion'] = array(
'type' => 'text',
'label' => __('Número de Identificación', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'priority' => 25,
);
return $fields;
}
add_filter('woocommerce_checkout_fields', 'agregar_campo_personalizado_checkout');
Este código añade el campo personalizado "Número de identificación" dentro de la sección de facturación. Puedes modificar los parámetros según lo que necesites (tipo de campo, clase, prioridad, etc.).
2. Mostrar el valor del campo en el área de administración
Es importante que la información que el cliente ingresa en este campo sea accesible desde el panel de administración de WooCommerce. Para ello, añadimos el siguiente código, que guarda y muestra el valor del campo personalizado en la pantalla de administración del pedido.
// Guardar el valor del campo personalizado
function guardar_campo_personalizado_checkout( $order_id ) {
if ( ! empty( $_POST['billing_identificacion'] ) ) {
update_post_meta( $order_id, '_billing_identificacion', sanitize_text_field( $_POST['billing_identificacion'] ) );
}
}
add_action( 'woocommerce_checkout_update_order_meta', 'guardar_campo_personalizado_checkout' );
// Mostrar el campo personalizado en la página de administración de pedidos
function mostrar_campo_personalizado_admin( $order ) {
$identificacion = get_post_meta( $order->get_id(), '_billing_identificacion', true );
if ( $identificacion ) {
echo '<p><strong>' . __('Número de Identificación') . ':</strong> ' . $identificacion . '</p>';
}
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'mostrar_campo_personalizado_admin', 10, 1 );
Este código guarda el valor ingresado en el campo "Número de identificación" y lo muestra en el área de administración de pedidos para que los administradores lo vean fácilmente.
3. Validar el campo personalizado
Si el campo que has añadido es obligatorio, necesitarás validar su entrada antes de que el cliente pueda proceder con la compra. El siguiente código valida que el campo no esté vacío:
// Validar el campo personalizado en el checkout
function validar_campo_personalizado_checkout() {
if ( isset( $_POST['billing_identificacion'] ) && empty( $_POST['billing_identificacion'] ) ) {
wc_add_notice( __('Por favor, introduce tu número de identificación.'), 'error' );
}
}
add_action( 'woocommerce_checkout_process', 'validar_campo_personalizado_checkout' );
Este código asegura que el cliente debe rellenar el campo antes de poder completar la compra. Si el campo está vacío, WooCommerce mostrará un mensaje de error.
4. Mostrar el campo en el email de confirmación
Para completar la integración del campo personalizado, también puedes optar por mostrar este dato en los correos electrónicos de confirmación de pedido. Añade el siguiente código para incluir el campo en los emails:
// Incluir el campo personalizado en el email de confirmación
function incluir_campo_personalizado_email( $fields, $sent_to_admin, $order ) {
$identificacion = get_post_meta( $order->get_id(), '_billing_identificacion', true );
if ( $identificacion ) {
$fields['billing_identificacion'] = array(
'label' => __('Número de Identificación'),
'value' => $identificacion,
);
}
return $fields;
}
add_filter( 'woocommerce_email_order_meta_fields', 'incluir_campo_personalizado_email', 10, 3 );
Con este código, el campo personalizado "Número de identificación" aparecerá en los correos electrónicos de confirmación de pedido enviados tanto al cliente como al administrador.
Ventajas y desventajas de agregar campos personalizados en el checkout
Ventajas:
- Personalización avanzada: Te permite adaptar el proceso de pago según las necesidades específicas de tu negocio.
- Mejora la experiencia del cliente: Puedes solicitar información relevante para mejorar la atención o los servicios postventa.
- Mayor flexibilidad: Facilita la recopilación de datos adicionales sin necesidad de utilizar plugins de terceros.
Desventajas:
- Posible sobrecarga en el formulario: Agregar demasiados campos podría abrumar a los usuarios y disminuir las conversiones.
- Compatibilidad con plugins: Algunos plugins pueden no funcionar correctamente si se personaliza demasiado el checkout.
- Mantenimiento adicional: Requiere gestionar y mantener el código personalizado, especialmente con futuras actualizaciones de WooCommerce.
Preguntillas y Respuestillas
Sí, puedes agregar diferentes tipos de campos, como campos de texto, casillas de verificación, menús desplegables, entre otros. WooCommerce es altamente flexible en este aspecto.
No, puedes usar hooks y filtros como se mostró en el tutorial. Sin embargo, hay plugins que facilitan esta tarea sin necesidad de escribir código.
En general, no. Pero si agregas muchos campos o los gestionas incorrectamente, el formulario de checkout podría ralentizarse o volverse complicado para los usuarios.
Sí, WooCommerce permite añadir estos campos personalizados tanto en la página de administración como en los emails de confirmación.
Puedes usar el filtro woocommerce_checkout_fields para eliminar un campo personalizado específico utilizando unset().
Te lo resumo
Agregar campos personalizados en el checkout de WooCommerce no solo mejora la experiencia del cliente, sino que también ofrece a los propietarios de tiendas la flexibilidad de recopilar información adicional que puede ser valiosa para el negocio. A través de hooks y filtros, puedes personalizar este proceso de una manera sencilla y eficiente, adaptándolo a las necesidades específicas de tu tienda en línea. Sin embargo, es importante mantener un equilibrio entre la cantidad de campos y la facilidad del proceso de compra, para no afectar negativamente las conversiones.