Este es otro plugin que desarrollé por encargo de un cliente que, por el tipo de negocio que gestiona, necesitaba algo muy concreto: capturar una firma manuscrita en el checkout de WooCommerce, ya fuese con el dedo (en móviles y tablets) o con el ratón (en ordenadores). Esa firma debía guardarse como parte del pedido y quedar visible tanto desde el área de administración como desde la cuenta del cliente.
Así creé Fran Salas WooCommerce Checkout Signature, un plugin sencillo, funcional y perfectamente integrado con WooCommerce. Como siempre, la prioridad ha sido crear algo limpio, ligero, sin dependencias externas y muy fácil de mantener.
¿Qué hace exactamente este plugin?
El plugin añade un nuevo campo al formulario de checkout de WooCommerce: una pequeña área donde el cliente puede firmar directamente antes de finalizar la compra. Esa firma:
- Se guarda automáticamente como una imagen codificada en base64.
- Se asocia al pedido como metadato.
- Se muestra en la administración del pedido.
- También es visible para el cliente en la sección «Mis pedidos» > Ver pedido.
Además, el campo es obligatorio: si el cliente no firma, no podrá completar el pedido.
¿Cómo se integra?
Una vez activas el plugin:
- Aparece automáticamente el campo de firma al final del formulario de compra.
- No tienes que configurar nada más: el sistema ya se encarga de guardar y mostrar la firma.
- La imagen de la firma se muestra directamente dentro de los detalles del pedido (en admin y frontend).
- El código está organizado en carpetas (
/assets/js/,/assets/css/) por si necesitas personalizar la apariencia.
¿Es compatible con móviles?
Sí, por supuesto. La firma funciona perfectamente tanto en pantallas táctiles como con ratón. De hecho, la experiencia en móviles es muy natural, permitiendo al usuario escribir con el dedo con total precisión.
¿Y si el usuario no firma?
No se permite finalizar la compra. El plugin incluye validación de seguridad y, si el campo no contiene una firma válida, WooCommerce lanza un mensaje de error impidiendo continuar. De esta forma, te aseguras de que todos los pedidos incluyan la firma sin margen de error.
¿Es personalizable?
El diseño del área de firma es neutro: fondo claro, trazo oscuro y dimensiones equilibradas para no romper el diseño del checkout. El CSS está separado, así que puedes adaptarlo fácilmente a tu estilo visual. Todo el código está limpio, comentado y sin librerías externas innecesarias.
¿Se actualiza?
Este tipo de plugin no necesita actualizaciones frecuentes, ya que cumple una función concreta que no depende de APIs externas ni de cambios en WooCommerce. Aun así, si en algún momento es necesario actualizarlo por compatibilidad o mejoras, subiré la nueva versión a la zona de descargas.
Descarga
Este plugin forma parte de las herramientas que comparto con los usuarios premium de la web. Si ya estás registrado, puedes descargarlo directamente desde la zona de descargas.
¿Aún no eres usuario premium?
Puedes registrarte desde aquí y acceder a este y otros plugins y códigos prácticos que uso en mis propios proyectos.
Conclusión
Fran Salas WooCommerce Checkout Signature es un plugin pensado para tiendas que necesitan una confirmación visual y legal por parte del cliente antes de finalizar una compra. Es ideal para negocios que entregan productos bajo pedido, servicios personalizados o cualquier otro escenario en el que quieras contar con una firma como respaldo.
Como siempre, está diseñado con ligereza y eficiencia en mente. Lo subes, lo activas y ya tienes el campo de firma en funcionamiento. Y lo mejor: sin complicaciones.
Nos vemos en el siguiente tutorial. Un saludo.
Todos los plugins creados por mí han sido desarrollados pensando en la ligereza, la optimización y la independencia de recursos externos. Solo utilizan librerías externas en caso de ser absolutamente necesario, y están diseñados para funcionar sin necesidad de actualizaciones frecuentes. Si en algún momento necesitan mejoras o compatibilidad, subiré una nueva versión a la zona de descargas premium.
¿Tienes alguna duda? Déjala en los comentarios.