Crear campo personalizado en el checkout de WooCommerce

WooCommerce es una plataforma extremadamente flexible que permite personalizar diversos aspectos de tu tienda en línea. Una de estas personalizaciones incluye la adición de campos personalizados en el checkout. Este tutorial te mostrará paso a paso cómo agregar un campo personalizado al checkout de WooCommerce utilizando PHP.

Agregar el campo personalizado al formulario de checkout

Para agregar un nuevo campo al formulario de checkout, utilizaremos el filtro woocommerce_checkout_fields. Este filtro nos permite modificar los campos predeterminados del checkout o añadir nuevos.

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

function add_custom_checkout_field($fields) {
    $fields['billing']['billing_custom_field'] = array(
        'type'        => 'text',
        'label'       => __('Custom Field', 'your-text-domain'),
        'placeholder' => __('Enter your value', 'your-text-domain'),
        'required'    => true,
        'class'       => array('form-row-wide'),
        'priority'    => 25,
    );

    return $fields;
}

En este ejemplo, hemos agregado un campo llamado billing_custom_field al grupo de campos de facturación (billing). El campo es de tipo texto y es obligatorio.

Validar el campo personalizado

Para asegurarnos de que el campo se complete correctamente, podemos agregar una validación personalizada utilizando el hook woocommerce_checkout_process.

<?php
add_action('woocommerce_checkout_process', 'validate_custom_checkout_field');

function validate_custom_checkout_field() {
    if (empty($_POST['billing_custom_field'])) {
        wc_add_notice(__('Please fill in the custom field.', 'your-text-domain'), 'error');
    }

}

Esta función verifica si el campo billing_custom_field está vacío y muestra un mensaje de error si no se completa.

Guardar el valor del campo personalizado

Después de validar el campo, necesitamos guardar su valor en el pedido. Para ello, usaremos el hook woocommerce_checkout_update_order_meta.

<?php
add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_field');

function save_custom_checkout_field($order_id) {
    if (!empty($_POST['billing_custom_field'])) {
        update_post_meta($order_id, '_billing_custom_field', sanitize_text_field($_POST['billing_custom_field']));
    }
}

Aquí estamos almacenando el valor del campo personalizado como un meta dato del pedido.

Mostrar el campo personalizado en el panel de administración

Para asegurarnos de que los administradores puedan ver el valor ingresado por el cliente, utilizaremos el hook woocommerce_admin_order_data_after_billing_address.

<?php
add_action('woocommerce_admin_order_data_after_billing_address', 'display_custom_checkout_field_admin', 10, 1);

function display_custom_checkout_field_admin($order) {
    $custom_field_value = get_post_meta($order->get_id(), '_billing_custom_field', true);

    if (!empty($custom_field_value)) {
        echo '<p><strong>' . __('Custom Field', 'your-text-domain') . ':</strong> ' . esc_html($custom_field_value) . '</p>';
    }
}

Con este código, el valor del campo personalizado se mostrará en la sección de facturación dentro del panel de administración del pedido.

Mostrar el campo personalizado en las notificaciones de pedido

Si deseas incluir este campo en los correos electrónicos o en el resumen del pedido del cliente, puedes usar el hook woocommerce_email_order_meta.

<?php
add_filter('woocommerce_email_order_meta_fields', 'add_custom_checkout_field_to_email', 10, 3);

function add_custom_checkout_field_to_email($fields, $sent_to_admin, $order) {
    $custom_field_value = get_post_meta($order->get_id(), '_billing_custom_field', true);

    if (!empty($custom_field_value)) {
        $fields['custom_field'] = array(
            'label' => __('Custom Field', 'your-text-domain'),
            'value' => $custom_field_value,
        );
    }

    return $fields;
}

Con este código, el valor del campo aparecerá en los correos electrónicos relacionados con el pedido.

Personalizar el checkout de WooCommerce es una excelente forma de adaptar tu tienda a las necesidades de tus clientes. Con los pasos descritos anteriormente, puedes agregar y gestionar un campo personalizado utilizando PHP. Este ejemplo es completamente funcional, pero siempre puedes adaptarlo para agregar más campos o realizar validaciones más complejas.