Personalizar los campos del checkout en WooCommerce

La página de checkout en WooCommerce se puede personalizar para mejorar la experiencia del usuario. WooCommerce permite agregar, quitar y reorganizar los campos del formulario de pago utilizando filtros y acciones.

Agregar campos personalizados al Checkout

Añadiremos dos nuevos campos:

• billing_num_dni: Un campo de texto para el número de identificación.
• billing_type_dni: Un conjunto de opciones de radio con los valores «DNI» y «NIT».

<?php
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
    // Campo de tipo de documento (DNI o NIT)
    $fields['billing']['billing_type_dni'] = [
        'type'     => 'radio',
        'label'    => __( 'Tipo de Documento', 'woocommerce' ),
        'options'  => [
            'DNI' => __( 'DNI', 'woocommerce' ),
            'NIT' => __( 'NIT', 'woocommerce' )
        ],
        'required' => true,
        'class'    => [ 'form-row-wide' ],
        'priority' => 20
    ];

    // Campo de número de documento
    $fields['billing']['billing_num_dni'] = [
        'type'        => 'text',
        'label'       => __( 'Número de Documento', 'woocommerce' ),
        'placeholder' => __( 'Ingrese su número de documento', 'woocommerce' ),
        'required'    => true,
        'class'       => [ 'form-row-wide' ],
        'priority'    => 25
    ];

    return $fields;
} );

Eliminar un campo del Checkout.

Si no queremos mostrar un campo en el checkout, podemos eliminarlo con unset(). En este caso, eliminamos la segunda línea de la dirección de facturación:

<?php
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
    unset( $fields['billing']['billing_address_2'] );
    return $fields;
} );

Cambiar la posición de un campo

Los campos en WooCommerce se ordenan con la propiedad priority. Cuanto menor sea el número, más arriba aparecerá el campo.

Por ejemplo, para mostrar el campo «Teléfono» antes que «Correo Electrónico»:

<?php
add_filter( 'woocommerce_checkout_fields', function( $fields ) {
    $fields['billing']['billing_phone']['priority'] = 10;
    $fields['billing']['billing_email']['priority'] = 20;
    return $fields;
} );

Guardar los campos personalizados en el pedido

Para que los valores ingresados en billing_type_dniy billing_num_dnise guarden en el pedido, usamos woocommerce_checkout_update_order_meta:

<?php
add_action( 'woocommerce_checkout_update_order_meta', function( $orderId, $data ) {
    $order = wc_get_order( $orderId );

    if ( ! empty( $data['billing_type_dni'] ) ) {
        $order->update_meta_data( '_billing_type_dni', sanitize_text_field( $data['billing_type_dni'] ) );
    }

    if ( ! empty( $data['billing_num_dni'] ) ) {
        $order->update_meta_data( '_billing_num_dni', sanitize_text_field( $data['billing_num_dni'] ) );
    }

    $order->save_meta_data();
}, 10, 2 );

Mostrar los campos en la administración de WooCommerce

Para que el administrador pueda ver estos datos en la página del pedido, los agregamos en la sección de facturación:

<?php
add_action( 'woocommerce_admin_order_data_after_billing_address', function( $order ) {
    $typeDni = $order->get_meta( '_billing_type_dni' );
    $numDni  = $order->get_meta( '_billing_num_dni' );

    if ( $typeDni ) {
        echo '<p><strong>' . __( 'Tipo de Documento:', 'woocommerce' ) . '</strong> ' . esc_html( $typeDni ) . '</p>';
    }

    if ( $numDni ) {
        echo '<p><strong>' . __( 'Número de Documento:', 'woocommerce' ) . '</strong> ' . esc_html( $numDni ) . '</p>';
    }
} );

Con estos métodos, podemos agregar nuevos campos personalizados al checkout, eliminarlos y reordenarlos según nuestras necesidades. También aseguramos que los datos se guarden correctamente y sean visibles en la administración de WooCommerce.

Si necesitas más ejemplos o tienes alguna duda, ¡pregunta con confianza!