La liste des commandes de WooCommerce propose une fenêtre d’aperçu rapide : un clic sur l’icône en forme d’œil ouvre une fenêtre avec les informations de facturation, de livraison et les articles. C’est très utile, mais par défaut en lecture seule : changer un statut ou consulter les notes de commande oblige encore à quitter la fenêtre et à ouvrir l’écran complet de modification.
Étendre le cœur de la bonne façon
Plutôt que de remplacer le modèle de la fenêtre de WooCommerce (ce qui casse à la prochaine mise à jour), nous avons utilisé les deux points d’extension officiels déjà fournis : le filtre woocommerce_admin_order_preview_get_order_details, qui permet d’injecter des données supplémentaires dans la fenêtre, et woocommerce_admin_order_preview_end, une action déclenchée à la fin du modèle Underscore.js de la fenêtre, qui permet d’ajouter du balisage ayant accès à ces mêmes données.
En combinant ces deux hooks, nous avons ajouté :
- Une liste déroulante de statut avec un bouton Enregistrer, reliée à un petit gestionnaire AJAX qui met à jour la commande et, surtout, la ligne correspondante de la liste, pas seulement la fenêtre, pour que la liste n’affiche jamais un statut obsolète une fois la fenêtre fermée.
- Un fil déroulant des notes internes de la commande, récupérées via
wc_get_order_notes()et affichées de la plus récente à la plus ancienne, exactement comme sur l’écran complet de la commande. - Le bouton d’envoi au coursier via WhatsApp, décrit dans un autre article, qui se trouve dans cette même fenêtre.
Lui donner un aspect natif
Le plus délicat n’était pas la fonctionnalité, mais de reproduire suffisamment le rythme visuel de WooCommerce pour que les ajouts ne paraissent pas plaqués. Nous avons repris les marges, le style des titres et les espacements que WooCommerce utilise déjà pour son panneau « Billing details », plutôt que d’inventer un nouveau langage visuel pour cette seule fenêtre. Le résultat se lit comme un prolongement de la fenêtre, pas comme un module agrafé en dessous.
Points clés
- Les points d’accroche officiels de WooCommerce pour cette fenêtre existent précisément pour éviter de remplacer son modèle : les utiliser garantit une personnalisation compatible avec les mises à jour.
- Une mise à jour AJAX côté administration doit toucher tous les endroits où les données modifiées sont affichées, pas seulement le contrôle utilisé, sinon l’interface devient obsolète sans prévenir.
- La cohérence visuelle avec les composants de la plateforme est une vraie décision de design, pas un bonus : c’est ce qui rend un ajout sur mesure digne de confiance.
À lire aussi : choisir les colonnes visibles sur mobile, modifier la variante d’un produit après la commande.
Vous rencontrez une limite similaire dans votre administration WooCommerce ou WordPress ? Parlons-en : ArtinTech Solution conçoit exactement ce type d’outils sur mesure pour les boutiques.