Votre boutique WooCommerce fonctionne-t-elle ? C’est une question qui tient beaucoup de propriétaires de boutiques éveillés la nuit, mais qui peut être résolue avec un peu de préparation et de tests appropriés.

Au fil des ans, j’ai réalisé qu’il y a quatre écoles de pensée parmi les propriétaires de boutiques lorsque les mises à jour de WooCommerce arrivent :

  • Le cow-boy : Ces propriétaires de boutiques cliquent sur « Mettre à jour » sans hésitation. Puis leur boutique s’effondre autour d’eux.
  • La Coucho Potato : Ceux qui ignorent tout simplement les mises à jour, les traitant comme si elles n’existaient pas.
  • Le Scaredy-Cat : Ces propriétaires de boutiques ont tellement de plugins et de thèmes dépassés parce qu’ils sont terrifiés de ce qui se passera s’ils tentent une mise à jour.
  • Le Maverick : Enfin, ce sont les propriétaires de boutiques qui exécutent régulièrement des sauvegardes, testent les nouvelles versions de WooCommerce sur un site de développement, puis mettent à jour leur site en production sans problème.

Idéalement, tout le monde devrait être un Maverick. Heureusement, ce n’est pas difficile d’en être un ! Avec les bons outils en place, une solide liste de contrôle de test et un peu d’automatisation, vous pouvez commencer à maintenir votre site WooCommerce à jour et toujours bien fonctionner.

Dans ct article, je vais vous expliquer comment mettre à jour votre site WooCommerce du début à la fin, y compris les outils et une grande liste de contrôle pour tester/mettre à jour. N’oubliez pas d’ajouter cet article à vos favoris pour référence future !

Passez un peu de temps maintenant pour gagner beaucoup de temps (et d’anxiété) plus tard

Avant d’entrer dans le vif du sujet, ma règle de base personnelle est que vous ne devriez jamais mettre à jour votre site et en particulier WooCommerce sans d’abord tester minutieusement toutes les nouvelles versions. Cela vaut pour les versions majeures, mineures et les correctifs, peu importe.

Il faut être prêt à passer un peu de temps maintenant pour gagner beaucoup de temps plus tard.

Vous n’avez pas besoin d’appuyer sur le bouton de mise à jour tout de suite. Donnez-vous du temps et assurez-vous de bien comprendre les changements qui seront apportés à votre site lorsque vous le mettrez à jour, et comment ils pourraient avoir un impact sur tout le reste de votre site. Il suffit de lire les nouvelles fonctionnalités disponibles dans la version de WooCommerce que vous souhaitez mettre à jour pour vous aider à comprendre ce à quoi vous devez vous préparer.

Ce n’est pas facile d’être un développeur d’extension/plugin ou de thème. Devoir suivre les nouvelles versions des autres plugins n’est pas une mince affaire. De même, écrire du code pour le noyau de WooCommerce qui est rétrocompatible est tout aussi difficile – pouvez-vous imaginer essayer de maintenir la compatibilité pour tous les différents plugins et thèmes qui sont construits sur WooCommerce ?

Quand je consultais, je prenais toujours le temps de passer en revue les logs de modifications et les forums de support WordPress.org avant de mettre à jour WooCommerce sur les sites des clients. Souvent, s’il y avait un problème avec une mise à jour, 99% du temps, quelqu’un d’autre rencontrait le problème en premier, ce qui me faisait gagner beaucoup de temps (et m’évitait des tracas pour régler le problème moi-même).

Il n’est pas rare non plus d’avoir à attendre que les auteurs de plugins/thèmes publient leurs propres mises à jour de produits liés à WooCommerce avant de pouvoir mettre à jour votre site également. Il est donc très rentable d’être patient et de prendre le temps de vérifier la compatibilité.

Mise à jour de WooCommerce : Prise en main

Il y a quatre étapes essentielles quand il s’agit de mettre à jour WooCommerce, et je vous promets qu’une fois que vous aurez tout parcouru une fois, que ce sera plus rapide et plus facile la prochaine fois !

Mise à jour de WooCommerce : Prise en main

Regardons les choses en face, tester manuellement WooCommerce est fastidieux et prend beaucoup de temps. C’est pour ces raisons que tant de gens ne le font tout simplement pas – ou, lorsqu’ils le font, ils ne testent pas correctement et manquent des erreurs sur leur site.

Heureusement, il existe des outils qui peuvent aider à accélérer le processus de test et à le rendre moins ennuyeux. Je pense que c’est vraiment amusant !

Après d’innombrables essais et mises à jour de WooCommerce au fil des ans, voici les outils que je recommande :

  • Site de développement : Ce n’est pas négociable. Vous ne devez jamais mettre à jour votre site en production immédiatement après une nouvelle version de WooCommerce. Les sites de développement/staging offrent un environnement de test où vous êtes libre de casser des choses (généralement sans répercussion). Là, vous pouvez exécuter des mises à jour, tester de nouvelles versions, et voir comment votre site pourrait réagir avant demettre à jour votre site en production. Si vous n’avez pas de site de développement, Kinsta peut vous aider en vous offrant des environnements de développement en un seul clic.

    Create WordPress staging site

  • Outil de comparaison visuelle : Comment savoir si votre site a changé après une mise à jour ? Si vous exécutez un grand site avec des dizaines de pages, le suivi des petits changements dans le formatage ou même des widgets qui ont cessé d’être affichés peut prendre du temps. Avec un outil de comparaison visuelle comme WP Boom, que nous allons utiliser pour ce tutoriel, vous pouvez prendre un snapshot de votre site, cliquer sur « mettre à jour », puis prendre un deuxième snapshot pour voir rapidement ce qui a changé. Il est important de souligner qu’un changement visuel ne signifie pas nécessairement qu’une partie de la fonctionnalité de votre site est cassée, mais simplement qu’elle pourrait l’être. Il y a une excellente critique de WP Boom par BobWP qui date de quelques années, mais elle devrait vous donner un bon aperçu de son fonctionnement.
  • Outils de test End-to-end : Alors que les outils de comparaison visuelle peuvent vous aider à repérer rapidement les changements dans le formatage et le design de votre site, les outils de test End-to-end vont plus loin, testant la fonctionnalité réelle de votre site et fournissant plus de certitude lorsque quelque chose ne fonctionne pas. Cliquer sur votre site pour compléter les tests comme ajouter un article au panier et passer à la caisse prend du temps et vieillit assez rapidement quand vous avez testé WooCommerce une centaine de fois auparavant. Avec des outils de test End-to-end, vous pouvez automatiser ce processus pour qu’il se fasse automatiquement pour vous. Pour ce tutoriel, nous allons utiliser Robot Ninja, notre outil de test automatisé End-to-end pour WooCommerce sur les sites de développement et production. Nous verrons comment configurer Robot Ninja plus loin dans cet article.
    Robot NinjaWooCommerce propose également des tests E2E que vous pouvez effectuer si vous êtes plutôt développeur.
  • Sauvegardes : Vous devriez exécuter des sauvegardes régulières de votre site. Certains de mes outils de sauvegarde préférés incluent BackUpWP, VaultPress et BackupBuddy. Si vous êtes intéressé par les sauvegardes de bases de données, je vous recommande WP Migrate DB Pro ou simplement en utilisant WP-CLI pour exécuter des exportations rapides. Si vous êtes chez Kinsta, ils fournissent des sauvegardes quotidiennes automatiques, des points de sauvegarde manuels et la rétention des sauvegardes pour tous ses plans

    Sauvegardes WordPress

    Sauvegardes WordPress

Une fois que vous avez les bons outils en place, il est temps de vous préparer.

Mise à jour de WooCommerce : Préparation

Si vous voulez que votre mise à jour se passe bien, vous devez vous préparer. Il y a un peu de préparation, mais une fois que vous l’avez fait, il est plus facile de remplir les blancs et de le faire plus rapidement la prochaine fois que vous mettrez à jour.

Voici ce que je recommande :

  1. Familiarisez-vous de nouveau avec le site que vous mettez à jour. Si vous n’êtes pas sûr de la façon dont votre site est censé fonctionner (c’est-à-dire s’il s’agit du site d’un nouveau client), prenez quelques notes. Cela aidera à soulager une partie de l’anxiété que vous pourriez ressentir si vous devenez confus sur la façon dont le site fonctionne après une mise à jour (cela arrive plus souvent que vous ne le pensez).
  2. Dressez une liste d’URLset de fonctionnalitésessentielles pour votre site (et vos clients). Cela devrait inclure les pages importantes de votre site, telles que votre page d’accueil, les pages des catégories et des produits, mon compte, mon panier et les pages de paiement.
  3. Vérifiez que vos sauvegardes sont à jour et, dans le cas contraire, exécutez une autre sauvegarde. Familiarisez-vous à nouveau avec votre outil de sauvegarde. Plus important encore, vérifiez qu’il fonctionne correctement et que vous savez comment revenir à un snapshot précédent de votre site.
  4. Configurez WP Boom. L’installation ne prend qu’une minute. Si votre mémoire et la prise de notes ne sont pas bonnes (comme moi) WP Boom peut vous aider à combler les lacunes avec des captures d’écran de votre. Prenez votre premier snapshot de site afin d’avoir un enregistrement visuel de base de votre site de développement, avant sa mise à jour. Il ne sera généralement pas en mesure de prendre des captures d’écran de la page de commande (vous avez besoin de certains produits dans votre panier) et des pages protégées, mais c’est là que le prochain outil peut aider…
  5. Configurer Robot Ninja. Si vous testiez WooCommerce manuellement, c’est la partie où vous feriez une liste de scénarios de test, c’est-à-dire ouvrir votre site, ajouter un produit au panier, passer à la caisse, entrer les informations de paiement, etc. Heureusement, Robot Ninja peut automatiquement faire tout cela pour vous.
  6. En vous basant sur la liste des URLs critiques et des fonctionnalités que vous avez créées précédemment, identifiez toutes les autres parties de votre site que vous souhaitez tester. Il peut s’agir de fonctionnalités telles que des formulaires de contactou des fenêtres contextuelles, des diaporamas ou des galeries d’images. Vous pouvez tester ces choses manuellement ou, si vous êtes plus technique, vous pouvez essayer d’automatiser cela aussi (j’ai inclus quelques ressources à ce sujet plus loin dans l’article mais c’est plus pour les développeurs).
  7. Découvrez les nouveautés de la version de WooCommerce que vous souhaitez mettre à jour et si vos plugins sont compatibles. Encore une fois, passez un peu de temps maintenant pour vous épargner du temps et de l’anxiété plus tard. Je vous recommande de consulter : les annonces de sortie sur WooCommerce.com, les logs des modifications, les numéros de GitHub, les forums WordPress.org.
  8. Clonez votre site de production dans votre environnement de développement. Si vous utilisez des plugins qui disposent d’un mode de développement, comme WooCommerce Subscription, activez-les ou désactivez-les simplement. De même, désactivez les emails. Vérifiez deux fois que votre environnement de développement imite le plus fidèlement possible votre site en production. J’aime aussi activer les logs de débogage dans WordPress et WooCommerce à ce stade pour aider à résoudre les problèmes
    Important :
    Après avoir poussé votre site vers l’environnement de développement, vous ne voulez pas perdre les commandes qui pourraient passer. Pour éviter cela, la recommandation serait de mettre votre boutique WooCommerce en mode maintenance. Ceci vous assurera qu’aucune commande n’est passée pendant que vous effectuez les mises à jour et les tests.

Mise à jour de WooCommerce : Mise à jour et test sur le site de développement

Maintenant que vous êtes prêt à vous lancer, voici la partie amusante : la mise à jour de votre site de développement. Ce qui est génial avec les sites de développement, c’est qu’il n’y a pas d’importance si votre site se casse parce qu’il ne s’agit que d’une copie.

  1. Prenez un snapshot de votre site avec WP Boom afin d’avoir un enregistrement visuel de base de votre site de développement, avant la mise à jour.
  2. Exécutez Robot Ninja et assurez-vous que vos tests réussissent.
  3. Mettez à jour vos plugins et votre thème vers des versions qui sont déclarées compatibles avec la version de WooCommerce vers laquelle vous voulez mettre à jour.
  4. Mettez à jour WooCommerce sur votre site de développement.
  5. Vérifiez vos logs pour voir s’il y a des erreurs évidentes résultant des mises à jour et vérifiez rapidement que vous pouvez toujours accéder à la page d’accueil et à la zone d’administration. Si vous obtenez un écran blanc de la mort ou êtes coincé dans une autre situation irrécupérable, c’est maintenant le bon moment pour revenir à un snapshot précédent de votre site et faire un peu de résolution de problème vous-même ou en demandant de l’aide.
  6. Si tout se passe bien jusqu’à présent, exécutez WP Boom à nouveau et obtenez un second snapshot. Comparez vos photos avant et après pour voir ce qui a changé. Ce qui est génial avec WP Boom, c’est qu’il vous dira à quel point votre site a changé depuis votre dernier snapshot, c’est-à-dire qu’il peut y avoir un changement visuel de 7% entre vos deux séries de snapshots. Bien que cela ne signifie pas nécessairement que votre site est cassé, cela peut signifier que vous avez besoin d’ajuster certains styles.
  7. Exécutez Robot Ninja à nouveau pour vérifier que le flux de votre commande fonctionne toujours correctement.
  8. Effectuez toute autre vérification manuelle (ou automatisée) des autres fonctionnalités de votre site, comme les formulaires de contact.
  9. Si quelque chose ne fonctionne pas comme prévu, c’est le moment de signaler ou de réparer tout ce qui est cassé. Si vous avez du code personnalisé en cours d’exécution sur votre site (c’est-à-dire du code qui n’est pas maintenu par un développeur de plugin/extension tiers), vous devrez le corriger et vous assurer que les corrections sont appliquées à votre site en production avant ou après la mise à jour (selon le problème). Le contrôle de version, comme avoir votre site dans Git, peut vous aider à mieux gérer les changements. L’endroit où vous signalerez les bugs dépendra des plugins que vous utilisez et de vos arrangements de support.

A partir de là, vous devrez soit attendre les nouvelles versions de vos plugins/thèmes, puis réessayer le processus, soit travailler vous-même sur les correctifs et mettre à jour votre code.

La bonne nouvelle, c’est que votre site en production n’est pas cassé, vos clients sont toujours en mesure de faire des achats et vous pouvez prendre le temps de répéter le processus autant de fois que nécessaire jusqu’à ce que vous soyez à l’aise, tout va fonctionner comme prévu.

Mise à jour de WooCommerce : Mise à jour et test du site en production

Une fois que vous avez mis à jour votre site de développement et que vous l’avez fait fonctionner correctement, avec toutes les fonctionnalités cassées corrigées et tous les bugs corrigés, vous êtes prêt à mettre à jour votre site en production.

Vous êtes maintenant prêt à mettre à jour votre site en production. Voilà ce que vous devez faire :

  1. Sauvegardez votre site en production. Ne manquez pas cette étape.
  2. Prenez un snapshot de votre site avec WP Boom afin d’avoir un enregistrement visuel de base de votre site en production, avant la mise à jour.
  3. Exécutez Robot Ninja et assurez-vous que vos tests réussissent. Ceci fournit une autre base de référence pour la pré-mise à jour de votre site.
  4. Ensuite, selon la façon dont vos environnements de développement et en production fonctionnent, vous aurez peut-être simplement besoin de synchroniser les changements entre le développement et la production ou vous aurez à mettre à jour les plugins et le code à nouveau. Si vous êtes avec un hébergeur comme Kinsta, vous pouvez pousser les changements en production en un seul clic. N’oubliez pas de sortir votre boutique WooCommerce du mode maintenance.

    Pousser le développement vers la production dans MyKinsta

    Pousser le développement vers la production dans MyKinsta

  5. Vérifiez que vos logs ne contiennent pas d’erreurs évidentes résultant de la synchronisation et vérifiez rapidement que vous pouvez toujours accéder à la page d’accueil et à la zone d’administration. Si vous obtenez un écran blanc de la mort ou êtes coincé dans une autre situation irrécupérable, c’est maintenant le bon moment pour revenir à un snapshot précédent de votre site et faire un peu de résolution de problème vous-même ou demander de l’aide.
  6. Exécutez WP Boom à nouveau pour avoir une deuxième série de snapshots. Comparez vos photos avant et après pour voir si quelque chose a changé.
  7. Exécutez Robot Ninja à nouveau pour vérifier que le flux de votre commande fonctionne toujours correctement.
  8. Effectuez toute autre vérification manuelle (ou automatisée) des autres fonctionnalités de votre site, comme les formulaires de contact.
  9. Si vous avez traité et corrigé des problèmes plus tôt lors de la mise à jour de votre site de développement, tels que des conflits entre le code de plugin et votre propre code personnalisé, il ne devrait pas y avoir trop de problèmes, le cas échéant, à résoudre à cette étape.
  10. Faites une dernière vérification visuelle de votre site et vérifiez votre liste d’URLs critiques et de fonctionnalités pour vous assurer que tout fonctionne.

Et c’est tout. Votre site en production est maintenant à jour !

Premiers pas avec WP Boom

WP Boom est un outil de test visuel et de comparaison conçu pour WordPress. Une fois configuré, vous pouvez comparer les captures d’écran avant et après la mise à jour de votre site, et recevoir des alertes chaque fois que des mises à jour automatiques provoquent des changements visuels sur vos sites.

WP Boom

WP Boom

Pour commencer à utiliser WP Boom, ouvrez un compte gratuit. Après avoir entré votre email et votre mot de passe, une modale apparaîtra vous demandant de vous connecter à un nouveau site.

S'inscrire à WP Boom

S’inscrire à WP Boom

Une fois que vous cliquez sur « Créer un site », WP Boom se mettra au travail en prenant le premier snapshot de votre site. Cela prendra une minute ou deux, selon le nombre de pages de votre site.

Premier snapshot de WP Boom

Premier snapshot de WP Boom

La page se rafraîchira et lorsque vous cliquerez sur le nom de votre site, vous verrez un aperçu de votre snapshot, y compris l’heure à laquelle il a été pris, et combien de pages sont sur votre site.

Dernier snapshot WP Boom

Dernier snapshot WP Boom

Lorsque vous êtes prêt à prendre un deuxième snapshot, retournez simplement au tableau de bord WP Boom, sélectionnez le site que vous voulez photographier, puis cliquez sur « Snapshot Selected Sites ».

WP Boom - Snapshot Selected Sites

WP Boom – Snapshot Selected Sites

Quelques fonctionnalités intéressantes de WP Boom sont la possibilité de programmer des snapshots hebdomadaires et des rapports hebdomadaires par email qui détaillent tout changement visuel sur votre site. C’est très utile si vous gérez une tonne de sites et que vous avez des mises à jour automatiques en place. Comme je l’ai mentionné, pour une critique complète, consultez l’article de BobWP : WP Boom. Les mises à jour de WordPress simplifiées.

Premiers pas avec Robot Ninja

Robot Ninja est le seul outil de test de commande automatisé End-to-end conçu spécifiquement pour WooCommerce. Nous l’avons construit pour aider à rendre les tests WooCommerce plus accessibles et moins difficiles pour les propriétaires de boutiques.

Robot Ninja

Robot Ninja

Lorsque vous connectez votre boutique à Robot Ninja, elle est soumise à une série de tests complets utilisant des produits réels et des paiements réels. Pour commencer, inscrivez-vous gratuitement, connectez-vous à votre compte et cliquez sur le gros bouton vert « Let’s Begin… » pour connecter votre première boutique en seulement 3 étapes :

Robot Ninja bienvenue

Robot Ninja bienvenue

1. Installez le plugin Robot Ninja Helper.

Vous pouvez télécharger gratuitement le plugin Robot Ninja Helper sur WordPress.org, ou simplement l’installer via le tableau de bord WordPress de votre site.

Plugin WordPress Robot Ninja

Plugin WordPress Robot Ninja

Une fois que vous avez installé et activé le plugin Helper, revenez à l’onglet du navigateur avec le site Web Robot Ninja ouvert et cochez le champ intitulé « I have activated the helper plugin

Le texte doit devenir vert et le bouton « Step 2. » devient actif et aussi vert. Cliquez sur le bouton « Step 2 ».

2. Entrez l’URL de votre boutique.

L’étape suivante consiste à entrer l’URL de la boutique que vous souhaitez connecter à Robot Ninja. Une fois que vous avez entré un domaine valide, cliquez sur le bouton « Check URL ». Robot Ninja fera alors un premier test pour s’assurer qu’il peut se connecter à votre site.

Ajouter une boutique WooCommerce

Ajouter une boutique WooCommerce

Si vous avez des problèmes de connexion, assurez-vous d’avoir vidé le cache de votre site WordPress après avoir installé le plugin.

3. Autoriser Robot Ninja

La troisième et dernière étape est de permettre à Robot Ninja d’accéder à votre site. Pour ce faire, nous utilisons l’Application Authentication Endpointqui est déjà disponible dans WooCommerce.

Pour commencer le processus d’authentification, cliquez sur le bouton vert « Allow now ». Vous serez redirigé vers le point final d’authentification de votre site. Si vous n’êtes pas déjà connecté à votre site, il vous sera demandé de vous connecter. Une fois connecté, vous verrez apparaître un écran vous demandant d' »Autoriser » ou de « Refuser » l’accès à Robot Ninja.

Autoriser Robot Ninja

Autoriser Robot Ninja

Après avoir cliqué sur « Approve », un message de « Félicitations » s’affiche. Cliquez sur le bouton vert « Begin Testing » pour continuer.

Commencez à tester Robot Ninja

Commencez à tester Robot Ninja

Maintenant que tout est installé, vous pouvez le faire :

  • Commencez à mettre en file d’attente les tests de commandeet regardez comment ils sont traités en temps réel.
  • Planifiez des tests automatisésà exécuter au moment qui vous convient – chaque jour, chaque semaine, vous définissez ce qui fonctionne pour votre programme de maintenance.
  • Consultez les résultats devotre dernier test Robot Ninja.
  • Recevez des notifications par email lorsqu’un test échoue, y compris des informations sur l’erreur, la configuration de votre boutique et une capture d’écran de ce qu’un utilisateur verrait au moment de l’échec pour aider à diagnostiquer le problème.
  • Testez votre boutique en ligne en utilisant des produits réels et des paiements réels.
  • Gérez et testez plusieurs boutiquesàpartir d’un seul compte.

Outils de test automatisés

Il est important de tester la fonctionnalité à travers votre site fonctionne correctement après avoir fait les mises à jour, pas seulement votre commande. Après tout, si un client remplit un formulaire de contact ou utilise le chat en production, comment saurez-vous si vous ne les avez pas testés ?

Il est facile d’effectuer des tests manuels – cliquez simplement sur votre site, remplissez des formulaires et utilisez votre fenêtre de chat en production. Pour vous aider à automatiser cela, dressez une liste des fonctionnalités critiques (comme je l’ai mentionné précédemment) ainsi que des instructions sur la façon d’effectuer manuellement des tests, c’est-à-dire d’ouvrir un site, de naviguer vers la page contact, de remplir un formulaire, etc). Cela vous assurera de ne rien manquer à chaque fois que vous faites un test manuel.

Si vous préférez automatiser ce processus, avoir plus de contrôle sur vos tests automatisés, ou avoir un site ou une fonctionnalité hautement personnalisée, je vous recommande de consulter Ghost Inspector et UseTrace. Les deux sont d’excellentes options si vous n’êtes pas familier avec PHP et que vous ne voulez pas jouer avec les scripts et le code.

Ghost Inspector

Ghost Inspector

Ces deux options offrent des fonctionnalités similaires pour automatiser vos tests de commande. En fin de compte, le choix de l’option que vous choisirez dépendra si vous voulez utiliser une extension Chrome ou un outil en ligne pour enregistrer vos tests.

Alternativement, si vous êtes un développeur et que vous aimez vous salir les mains, Codeception est un excellent choix pour les développeurs.

Résumé

Avec les bons outils, un peu de préparation et une solide liste de contrôle en place, vous ne devriez pas avoir de problèmes à aller de l’avant avec les tests réguliers et la mise à jour de WooCommerce. Afin d’éliminer l’anxiété entourant la mise à jour de WooCommerce, il est important de démystifier le processus, ce que nous avons fait ici. Nous espérons que ce guide a fourni une base solide pour garder votre site WooCommerce à jour.

Je tiens également à souligner qu’il est important de tester les courriels transactionnels de votre boutique. Découvrez ces 5 différentes façons de tester les emails transactionnels WooCommerce.

Utilisez-vous des outils de visualisation/capture d’écran lors de la mise à jour de WooCommerce et WordPress ? Quels autres outils et workflows utilisez-vous pour les mises à jour ? Si vous avez des questions concernant les tests de WooCommerce, faites-le nous savoir dans les commentaires ci-dessous !

21
Partages