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.

 '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.

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.

 
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.
get_id(), '_billing_custom_field', true);

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

 
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.
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.





Related posts:
No related posts.