La lista de pedidos de WooCommerce tiene una ventana de vista rápida: al pulsar el icono del ojo en cualquier fila se abre un modal con los datos de facturación, de envío y los artículos del pedido. Es muy útil, pero por defecto es de solo lectura: cambiar un estado o consultar las notas del pedido obliga a salir de la ventana y abrir la pantalla completa de edición.
Ampliar el núcleo de la forma correcta
En lugar de sobrescribir la plantilla de la ventana de WooCommerce (lo que se rompe con la siguiente actualización), usamos los dos puntos de extensión oficiales que ya incluye: el filtro woocommerce_admin_order_preview_get_order_details, que permite añadir datos a lo que recibe la ventana, y woocommerce_admin_order_preview_end, una acción que se ejecuta al final de la plantilla Underscore.js de la ventana y permite añadir marcado con acceso a esos mismos datos.
Combinando esos dos hooks añadimos:
- Un desplegable de estado con botón Guardar, conectado a un pequeño controlador AJAX que actualiza el pedido y, lo que es clave, también la fila de la lista, no solo la ventana, para que la lista nunca muestre un estado desactualizado al cerrarla.
- Un listado desplazable de las notas internas del pedido, obtenidas con
wc_get_order_notes()y mostradas de la más reciente a la más antigua, igual que en la pantalla completa del pedido. - El botón de envío al mensajero por WhatsApp descrito en otro artículo, que vive en esta misma ventana.
Que parezca nativo
Lo más difícil no fue la funcionalidad, sino igualar el ritmo visual de WooCommerce lo suficiente para que los añadidos no parezcan pegados. Copiamos el relleno, el estilo de los encabezados y el espaciado que WooCommerce ya usa en su panel «Billing details», en lugar de inventar un lenguaje visual nuevo solo para esta ventana. El resultado parece una extensión de la ventana, no un complemento grapado debajo.
Conclusiones clave
- Los puntos de enganche oficiales de WooCommerce para esta ventana existen precisamente para no tener que sobrescribir su plantilla: usarlos mantiene la personalización segura frente a actualizaciones.
- Una actualización AJAX en el panel debe tocar todos los lugares donde se muestran los datos modificados, no solo el control que ha usado el usuario, o la interfaz se queda desactualizada sin avisar.
- La coherencia visual con los componentes de la propia plataforma es una decisión de diseño real, no un extra: es lo que hace que un añadido a medida inspire confianza.
Lecturas relacionadas: controlar qué columnas se ven en el móvil, cambiar la variante de un producto después de realizar el pedido.
¿Se encuentra con una limitación parecida en su panel de WooCommerce o WordPress? Hablemos: en ArtinTech Solution creamos exactamente este tipo de herramientas a medida para tiendas.