Les pages de la boutique et les blocs de validation de commande

Module 2: Installation et configuration · Temps de lecture : 9 minutes

Objectif pédagogique : À l’issue de cette leçon, vous saurez reconnaître les pages de boutique de WooCommerce et les lier correctement, et vous choisirez en connaissance de cause entre les blocs et les shortcodes pour le panier et la validation de commande.

Notions clés : page de boutique, panier, validation de commande, Mon compte, page des conditions générales, configuration des pages, blocs, shortcodes, thème à blocs, thème classique, compatibilité des extensions, noindex

Quatre pages au rôle particulier

Un site WordPress se compose de pages et d’articles (formation WordPress, leçon 4.2). WooCommerce ajoute les produits comme type de contenu à part entière, et attribue à quelques pages ordinaires un rôle particulier. Dans la liste Pages, ces pages ressemblent à n’importe quelle autre page, mais WooCommerce sait quelle page remplit quelle tâche. Cette information figure dans les réglages, pas dans le nom ni dans l’adresse de la page.

Comme le lien se trouve dans les réglages, vous pouvez donner aux pages un autre titre et une autre adresse. Theehuis Example appelle son panier « Mandje » à l’adresse /mandje/, et cela fonctionne, tant que cette page est indiquée comme panier dans Configuration de la page.

Si le lien est rompu, vous le remarquez à des endroits inattendus. Quelques exemples fréquents :

• Quelqu’un supprime la page Panier parce qu’« elle figurait en double ». Ensuite, après avoir cliqué sur Ajouter au panier, le visiteur arrive sur une page d’erreur, et certains thèmes n’affichent plus le panier dans l’en-tête.
• Après un déménagement ou une importation, c’est une autre page que celle contenant le bloc de validation de commande qui est liée à Validation de commande. Le visiteur voit une page vide et ne peut pas commander.
• Une deuxième page « Commande-2 » apparaît après un second passage dans l’assistant. L’une des pages est liée, l’autre figure dans le menu.

Après chaque modification importante (thème, déménagement, importation), vérifiez donc dans Configuration de la page quelle page est liée, puis cliquez pour ouvrir cette page.

Blocs ou shortcodes

Le panier et la validation de commande peuvent s’afficher sur la page de deux façons.

Les shortcodes sont l’ancienne méthode : la page contient un court code entre crochets, comme [woocommerce_cart] et [woocommerce_checkout]. Lors de l’affichage, WooCommerce le remplace par le formulaire. La mise en forme vient du thème, et de très nombreuses extensions ont été conçues pendant des années pour ce format.

Les blocs sont la nouvelle méthode : la page contient le bloc Panier ou Validation de commande, composé de blocs plus petits (adresse, livraison, moyen de paiement, récapitulatif, bouton de commande). Vous les voyez et les modifiez dans l’éditeur de blocs (formation WordPress, leçon 4.1). Les blocs communiquent avec le serveur via la Store API (leçon 2.4) : le formulaire fonctionne directement dans le navigateur, sans recharger la page à chaque fois.

Depuis WooCommerce 8.3 (novembre 2023), une nouvelle installation reçoit les blocs. Une boutique existante qui se met à jour conserve ce qu’elle avait. Les shortcodes restent disponibles.

Que choisir ? Quelques questions vous aideront :

• Vos extensions fonctionnent-elles avec les blocs ? C’est la question la plus importante. Une extension qui ajoute un champ à la validation de commande (une date de livraison, un numéro de TVA intracommunautaire, un message cadeau) doit avoir été adaptée spécifiquement aux blocs. La page de l’extension indique généralement si elle est « compatible avec le bloc de validation de commande ». Dans l’éditeur du bloc de validation de commande, WooCommerce peut afficher un avertissement concernant les extensions actives qui ne sont pas signalées comme compatibles.
• Quel thème utilisez-vous ? Les blocs conviennent le mieux à un thème à blocs (formation WordPress, leçon 5.1). Ils fonctionnent aussi avec un thème classique, mais la mise en forme s’harmonise alors moins naturellement.
• Devez-vous adapter le bouton de commande ? Avec les blocs, vous définissez le texte du bouton dans l’éditeur. C’est pratique au regard des règles qui s’y appliquent (leçon 5.4).
• Acceptez-vous que la Store API soit publique ? Avec les blocs, elle doit être accessible ; une extension de sécurité qui ferme l’API REST casse la validation de commande.

Theehuis Example n’utilise aucune extension qui ajoute des champs et dispose d’un thème à blocs. Elle conserve les blocs. Une autre boutique, dotée d’une extension de date de livraison qui ne fonctionne qu’avec le shortcode, choisit temporairement le shortcode et réexamine la question à chaque mise à jour majeure de cette extension.

Si vous changez de format, faites-le dans votre boutique de test, puis testez une commande complète (leçon 4.5). Dans WooCommerce > État > Outils, WooCommerce propose un outil pour recréer les pages de boutique manquantes ; il crée de nouvelles pages, il ne convertit pas les pages existantes.

Pourquoi le panier et la validation de commande n’ont pas leur place dans les moteurs de recherche

Un panier est différent pour chaque visiteur, et toujours vide pour un moteur de recherche. Un panier vide dans les résultats de recherche n’aide personne. WooCommerce place donc lui-même un noindex sur les pages panier, validation de commande et Mon compte : le moteur de recherche peut visiter la page, mais ne l’inclut pas dans les résultats de recherche. Vous le voyez dans le code source sous cette forme :

<meta name='robots' content='noindex, follow' />

Une extension SEO ou un thème peut écraser cette ligne. C’est rarement voulu. Dans l’exercice de cette leçon, vous vérifiez si elle est présente.

Ces trois mêmes pages ne doivent pas non plus se retrouver dans le cache de pages. WooCommerce envoie des en-têtes qui indiquent aux caches qu’ils ne doivent pas conserver la page. La façon de vérifier que votre cache les respecte est abordée dans la leçon 6.4.

Ce que voit un visiteur sans panier

Si vous ouvrez la page de validation de commande sans rien dans votre panier, il se passe autre chose qu’avec des articles dedans :

• Avec les blocs, la page de validation de commande affiche généralement un message indiquant que le panier est vide, avec un bouton pour retourner à la boutique.
• Avec le shortcode, WooCommerce vous redirige souvent vers le panier.

Les deux comportements sont normaux. Le contrôle de cette leçon en tient compte : le programme ne place jamais rien dans votre panier et examine uniquement ce que voit un visiteur sans panier.

En pratique : voici à quoi cela ressemble dans WooCommerce

Avec d’autres thèmes et d’autres hébergeurs, le fonctionnement est comparable ; seule la mise en forme diffère.

1. Allez dans WooCommerce > Réglages > Avancé (Advanced) et ouvrez Configuration de la page (Page setup). Notez quelle page est indiquée pour Panier, Validation de commande, Mon compte et Conditions générales.
2. Dans Pages, cliquez sur chacune de ces pages et vérifiez que le bloc (ou le shortcode) y figure.
3. Ouvrez la page de validation de commande dans l’éditeur. Cliquez sur le bloc Validation de commande et examinez ses éléments dans la vue en liste : coordonnées, adresse de livraison, options de livraison, options de paiement, note, conditions, le bouton.
4. Regardez dans l’éditeur du bloc de validation de commande (et auprès des extensions elles-mêmes) si un avertissement signale des extensions non compatibles avec les blocs.
5. Ouvrez le panier dans une fenêtre de navigation privée et affichez le code source (Ctrl+U) : recherchez noindex.

Résumé

• WooCommerce attribue un rôle à quatre pages (boutique, panier, validation de commande, Mon compte) ainsi qu’à la page des conditions générales ; le lien se trouve dans les réglages, pas dans le nom.
• Après un déménagement, une importation ou un changement de thème, vous vérifiez les liens dans Configuration de la page.
• Depuis WooCommerce 8.3, les nouvelles boutiques reçoivent les blocs ; les shortcodes existent toujours. Choisissez en fonction de vos extensions et de votre thème.
• Les blocs ont besoin de la Store API ; ne fermez pas l’API REST.
• Le panier, la validation de commande et Mon compte reçoivent un noindex de WooCommerce et n’ont pas leur place dans le cache.

Quiz

Exercice

Exercice A2.2 : Les pages de votre boutique. Saisissez l’adresse de votre boutique (de test) ainsi que les adresses de votre panier, de votre page de validation de commande et de Mon compte (un chemin, comme /panier/, ou l’URL complète sur le même hôte). Le programme interroge chaque page une seule fois, sans cookies et sans rien mettre dans le panier.

Pour chaque page, le résultat est bon si :

• la page répond via https avec le statut 200 ;
• le HTML contient une marque de WooCommerce : pour le panier, le bloc wp-block-woocommerce-cart ou la classe body woocommerce-cart, pour la validation de commande wp-block-woocommerce-checkout ou woocommerce-checkout, pour Mon compte woocommerce-account ou un formulaire de connexion de WooCommerce ;
• un noindex est présent (balise meta robots ou en-tête X-Robots-Tag).

Si la page de validation de commande, avec un panier vide, redirige vers le panier que vous avez saisi, c’est également bon.

Orange : pas de noindex (vérifiez si une extension SEO ou votre thème le supprime) ; la page utilise le shortcode au lieu du bloc (ce n’est pas une erreur, mais demandez-vous s’il s’agit d’un choix délibéré). Rouge : un statut d’erreur comme 404, une page sans marque WooCommerce (liez la bonne page dans Configuration de la page), une redirection vers un autre hôte, ou http sans https.

Notez ensuite pour vous-même quel format (blocs ou shortcode) vous utilisez et pourquoi.

Pour aller plus loin

• Formation WordPress gratuite 5.1: Thèmes : thèmes basés sur des blocs et thèmes classiques
• Formation WordPress gratuite 4.2: Pages, articles, catégories et étiquettes
• Formation WordPress gratuite 4.1: L'éditeur de blocs
• WooCommerce 8.3 : les blocs par défaut pour les nouvelles boutiques (developer.woocommerce.com, en anglais) : https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• La Store API (developer.woocommerce.com, en anglais) : https://developer.woocommerce.com/docs/apis/store-api/