Agregar campos adicionales de usuario en la página de pedido de WooCommerce

En un artículo anterior habíamos visto cómo agregar campos adicionales al perfil de usuario, sin embargo en algunos casos es posible que necesitemos recolectar información adicional del usuario directamente en el proceso de compra.

 

Resultado Final

Al final queremos obtener algo similar a lo que se muestra en la siguiente imagen:

 

Generalidades

Nos gustaría obtener un dato adicional obligatorio de la profesión del usuario, para esto recolectaremos este dato al momento de que realizará el proceso de compra.

 

Código para agregar un campo adicional en la página de pedido

El siguiente código agrega un campo adicional de «profesión» en el formulario de pedido, y guarda el dato como parte de la metadata del usuario.

Si quieres mostrar o editar este dato adicional en el perfil de usuario, puedes revisar el siguiente artículo: Agregar campos adicionales al perfil de usuario

// Crear el campo personalizado en la página de pago llamado profesión
add_action( 'woocommerce_after_order_notes', 'create_custom_checkout_field' );
function create_custom_checkout_field( $checkout ) {

        echo '<div class="custom_checkout_field">';
        echo '<h3>Campos adicionales</h3>';

        woocommerce_form_field( 'profesion', [
                'type'     => 'text',
                'required' => 'true',
                'label'    => __( 'Profesión' )
        ],
                $checkout->get_value( 'profesion' )
        );

        echo '</div>';
}

// Validar el campo personalizado
add_action( 'woocommerce_checkout_process', 'validate_custom_checkout_field' );
function validate_custom_checkout_field() {
        if ( ! $_POST['profesion'] || empty( $_POST['profesion'] ) ) {
                wc_add_notice( __( 'Se requiere ingresar la profesión' ), 'error' );
        }
}

// Guardar el campo personalizado en los datos del usuario
add_action( 'woocommerce_checkout_order_processed', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
        // Get user_id from order
        $order   = wc_get_order( $order_id );
        $user_id = $order->get_user_id();

        if ( $user_id && $_POST['profesion'] ) {
                update_user_meta( $user_id, 'profesion', sanitize_text_field( $_POST['profesion'] ) );
        }
}

En el código anterior:

• Utilizamos el hook woocommerce_after_order_notes para agregar contenido al formulario de pedido
• Para crear el campo adicional usamos una función de WooCommerce woocommerce_form_field, aunque también podría hacerse con HTML directamente
• Al ser el campo obligatorio es recomendable emitir algún mensaje de error si el campo no se ha llenado, por lo que usamos el hook woocommerce_checkout_process para hacer esta comprobación
• finalmente para guardar el dato del nuevo campo usamos el hook woocommerce_checkout_order_processed, guardamos el dato como metadatada del usuario con la función update_user_meta()

 

Conclusión

Como has podido comprobar, puedes usar código para añadir directamente campos adicionales que necesites como información adicional de tus usuarios al momento de comprar y evitar el uso de un plugin adicional.

 

La entrada Agregar campos adicionales de usuario en la página de pedido de WooCommerce es un artículo reciente del sitio DecodeCMS.