Cómo Personalizar los Campos y el Diseño del Checkout de WooCommerce (Con Código PHP y Plugins Ligeros)

El formulario de pago por defecto de WooCommerce pide más de 12 campos pensados para envíos postales internacionales (como Código Postal obligatorio, línea 2 de dirección o Estado/Provincia separado), lo que en mercados como Colombia y Latinoamérica genera fricción y abandono de carrito, especialmente desde teléfonos móviles.

En esta guía técnica aprenderás cómo personalizar los campos del checkout de WooCommerce con código PHP usando el filtro woocommerce_checkout_fields (para eliminar campos innecesarios o añadir el campo de Cédula / NIT para facturación) y cómo transformar el diseño visual con nuestros dos plugins gratuitos publicados en el repositorio oficial de WordPress.org.

1. Cómo eliminar campos innecesarios del Checkout de WooCommerce con PHP

Si vendes infoproductos, cursos en Tutor LMS, membresías con cobro recurrente en WooCommerce Subscriptions o productos nacionales donde el código postal no se utiliza, añade este snippet usando el filtro woocommerce_checkout_fields:

add_filter( 'woocommerce_checkout_fields', 'dc_simplificar_campos_checkout_woocommerce', 20 );
function dc_simplificar_campos_checkout_woocommerce( $fields ) {
    // Eliminar campos que generan fricción
    unset( $fields['billing']['billing_company'] );   // Nombre de la empresa
    unset( $fields['billing']['billing_postcode'] );  // Código postal
    unset( $fields['billing']['billing_address_2'] ); // Apartamento, habitación, etc.

    // Hacer que el teléfono de WhatsApp ocupe todo el ancho y sea obligatorio
    if ( isset( $fields['billing']['billing_phone'] ) ) {
        $fields['billing']['billing_phone']['label']       = 'Teléfono / WhatsApp';
        $fields['billing']['billing_phone']['placeholder'] = 'Ej: 300 123 4567';
        $fields['billing']['billing_phone']['required']    = true;
        $fields['billing']['billing_phone']['class']       = array( 'form-row-wide' );
    }

    return $fields;
}

2. Cómo añadir el campo Cédula o NIT en el Checkout y guardarlo en el pedido

En Colombia y varios países de Latinoamérica, pasarelas como Wompi, Mercado Pago o ePayco y los sistemas de facturación electrónica requieren el número de identificación del comprador. Así puedes añadirlo y mostrarlo en el panel de administración de WooCommerce (compatible con HPOS):

// 1. Añadir el campo Cédula / NIT al formulario de facturación
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
    $fields['billing']['billing_documento'] = array(
        'type'        => 'text',
        'label'       => 'Cédula o NIT',
        'placeholder' => 'Ingresa tu número de identificación',
        'required'    => true,
        'class'       => array( 'form-row-wide' ),
        'priority'    => 25,
    );
    return $fields;
});

// 2. Guardar el valor en los metadatos del pedido (Compatible con HPOS)
add_action( 'woocommerce_checkout_create_order', function( $order, $data ) {
    if ( ! empty( $_POST['billing_documento'] ) ) {
        $order->update_meta_data( '_billing_documento', sanitize_text_field( wp_unslash( $_POST['billing_documento'] ) ) );
    }
}, 10, 2 );

// 3. Mostrar el documento en el detalle del pedido dentro de wp-admin
add_action( 'woocommerce_admin_order_data_after_billing_address', function( $order ) {
    $doc = $order->get_meta( '_billing_documento' );
    if ( $doc ) {
        echo '<p><strong>Cédula / NIT:</strong> ' . esc_html( $doc ) . '</p>';
    }
});

3. Plugins Oficiales en WordPress.org para Optimizar el Checkout sin lentitud

Si además de limpiar los campos quieres mejorar radicalmente la experiencia visual de compra sin cargar constructores pesados en la página de pago, puedes instalar directamente desde el repositorio oficial de WordPress nuestros dos plugins gratuitos:

• MCOD Minimalist Checkout for WooCommerce: Transforma el formulario estándar de WooCommerce en una interfaz moderna y minimalista de dos columnas enfocada 100% en conversión.
• Modal COD Form for WooCommerce: Si vendes con pago contraentrega (Cash On Delivery), despliega un popup emergente de compra en un solo paso en la misma ficha del producto.
• Conversión automática de moneda en el Checkout: Si tus precios están en dólares pero tu pasarela cobra en pesos colombianos, combina estos ajustes con nuestro tutorial para convertir automáticamente de USD a TRM COP en el checkout de WooCommerce.