El Checkout de toda tienda online es uno de los puntos claves en un eCommerce.
Por este motivo debes cuidarlo al máximo, siguiendo algunas reglas básicas:
- Intentar que el número de campos obligatorios sea el mínimo posible.
- Ponerlo todo bien clarito. A la hora de obtener el pago del cliente no podemos hacerle dudar.
- Transmitir seguridad, añadiendo logos que inspiren confianza (pero implementando medidas, claro).
- Dar un visión global. Es más fácil para un cliente ver todo el Checkout de un tirón (OneStep) que verlo a modo de «pasos» ocultos que se van abriendo a medida que los completamos.
Pues bien, si tienes montada una tienda en WordPress y estás utilizando el plugin más popular para esto, WooCommerce, ordenar los campos de la configuración original es bastante sencillo.
Ordenando los campos del Checkout de tu tienda online en WooCommerce
Lo primero que tienes que saber (o recordar) es que WooCommerce clasifica estos campos en 4 grupos:
- billing: todos los campos relacionados con Billing Address, esto es, dirección de facturación.
- shipping: igual para la Shipping Address, o dirección de envío.
- account: campos relacionados con la cuenta y/o login.
- order: campos propios del pedido, incluyendo la información adicional (como notas o comentarios).
El secreto, como casi siempre que utilizamos WordPress, consiste en extender nuestro archiconocido fichero functions.php
Para ordenar los campos, simplemente añade una función parecida a esta:
function checkout_fields_reorder( $checkout_fields ) {
// as you can see, no needs to specify a field group anymore
$checkout_fields['billing']['billing_first_name']['priority'] = 10;
$checkout_fields['billing']['billing_last_name']['priority'] = 20;
$checkout_fields['billing']['billing_email']['priority'] = 30;
$checkout_fields['billing']['billing_address_1']['priority'] = 40;
$checkout_fields['billing']['billing_postcode']['priority'] = 50;
$checkout_fields['billing']['billing_city']['priority'] = 60;
$checkout_fields['billing']['billing_country']['priority'] = 70;
$checkout_fields['billing']['billing_state']['priority'] = 80;
$checkout_fields['billing']['billing_phone']['priority'] = 90;
$checkout_fields['billing']['billing_company']['priority'] = 100;
return $checkout_fields;
}
add_filter( 'woocommerce_checkout_fields', 'checkout_fields_reorder' ); El resultado será algo mucho más legible, cómodo y ordenado como os mostramos a continuación. Añade un poco de css para cuadrarlo todo y, listo: