Cómo rediseñar el formulario de checkout en WooCommerce

El formulario de checkout es uno de los elementos más importantes en cualquier tienda WooCommerce. Personalizar su diseño puede mejorar significativamente la experiencia del usuario y la tasa de conversión. En este artículo aprenderás cómo modificar el diseño de los campos utilizando clases CSS específicas, ajustar el orden de los campos con la propiedad priority, y aplicar estos cambios correctamente con los hooks adecuados.

Clases CSS para el diseño del formulario

WooCommerce utiliza clases CSS que puedes aplicar a los campos del formulario de checkout para organizarlos en filas y columnas. Las clases más comunes son:

Estas clases se aplican mediante el atributo class dentro de la definición del campo.

Cómo aplicar estas clases usando woocommerce_checkout_fields

Para modificar los campos del checkout, puedes usar el hook woocommerce_checkout_fields, que permite personalizar campos como nombre, email, teléfono, etc. A continuación un ejemplo de cómo aplicar clases CSS personalizadas y cambiar la prioridad:

<?php
add_filter( 'woocommerce_checkout_fields', 'customizeCheckoutFields' );

function customizeCheckoutFields( $fields ) {
    // Nombre y apellido en la misma fila
    $fields['billing']['billing_first_name']['class'] = [ 'form-row-first' ];
    $fields['billing']['billing_last_name']['class']  = [ 'form-row-last' ];

    // Correo electrónico debajo, en una fila completa
    $fields['billing']['billing_email']['class']      = [ 'form-row-wide' ];

    // Teléfono antes que el correo electrónico
    $fields['billing']['billing_phone']['priority']   = 15;
    $fields['billing']['billing_email']['priority']   = 20;

    return $fields;
}

• El array billing contiene los campos relacionados a la facturación.
• classse usa para aplicar clases CSS.
• prioritydefine el orden en que se muestran los campos (menor valor = aparece antes).

¿Y los campos de dirección?

WooCommerce maneja los campos de dirección (como país, estado, ciudad y dirección) de forma diferente. No se pueden modificar completamente desde woocommerce_checkout_fields. Para esos campos, se debe usar el hook woocommerce_default_address_fields.

Ejemplo:

<?php
add_filter( 'woocommerce_default_address_fields', 'customizeDefaultAddressFields' );

function customizeDefaultAddressFields( $fields ) {
    // País y estado en la misma fila
    $fields['country']['class'] = [ 'form-row-first' ];
    $fields['state']['class']   = [ 'form-row-last' ];

    // Dirección ocupa una fila completa
    $fields['address_1']['class'] = [ 'form-row-wide' ];

    // Ciudad después de dirección
    $fields['city']['priority'] = 95;

    return $fields;
}

Rediseñar el formulario de checkout en WooCommerce es completamente posible con un poco de código y entendiendo cómo funcionan los hooks y las clases CSS. Recuerda usar woocommerce_checkout_fields para los campos generales, y woocommerce_default_address_fieldspara los campos de dirección. Combinando ambos enfoques, puedes lograr una experiencia de compra mucho más clara y profesional.

Related posts:

Cómo implementar reCAPTCHA v2 en WordPress con un formulario personalizado Crear campo personalizado en el checkout de WooCommerce Mostrar imágenes de los productos en la página de checkout en WooCommerce Personalizar los campos del checkout en WooCommerce