Les modèles WooCommerce : surcharger, corriger, franciser

4.1Les modèles que WooCommerce fournit

Avec WooCommerce actif, ouvre Apparence > Éditeur > Modèles. À côté des modèles de ton thème, tu en trouves une série signés WooCommerce. Au labo, avec Twenty Twenty-Five, on en a compté huit.

La documentation des modèles en blocs de WooCommerce en liste dix : ces huit-là, plus « Produits par catégorie » (taxonomy-product_cat.html) et « Produits par étiquette » (taxonomy-product_tag.html). Ces deux derniers n'apparaissaient pas dans notre liste, et pour cause : on va voir qu'ils se replient sur le catalogue.

4.2Surcharger un modèle : un fichier du même nom

La règle est la même que pour tous les modèles de WordPress, et la documentation de WooCommerce la rappelle : pour remplacer un de ses modèles, ton thème place un fichier du même nom dans son dossier templates. Un templates/single-product.html dans ton thème passe devant le modèle « Produit individuel » de WooCommerce.

Au labo, on a écrit deux modèles : single-product.html et archive-product.html. Et le meilleur point de départ, c'est le modèle de WooCommerce lui-même. Il est dans l'extension, à wp-content/plugins/woocommerce/templates/templates/blockified/. Copie-le dans ton thème, puis modifie-le.

4.3La fiche produit, et ses libellés en anglais

C'est en lisant ce fichier qu'on a trouvé l'origine des libellés anglais repérés dans le dossier WooCommerce. Sous le bouton « Ajouter au panier », la fiche de Twenty Twenty-Five affichait ça :

Dans le modèle de WooCommerce, la catégorie et les étiquettes sont affichées par le bloc post-terms de WordPress, avec un préfixe écrit en dur : "prefix":"Category: " et "prefix":"Tags: ". Ce texte n'est pas traduisible : il est dans le modèle, pas dans les fichiers de traduction. Quant à « SKU: », c'est le texte par défaut du bloc de la référence, resté en anglais dans la traduction française de la 11.2.1.

La correction se fait dans ton modèle, sur trois blocs. Voilà le single-product.html du labo, en entier.

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained","contentSize":"1200px"}} -->
<main class="wp-block-group">
<!-- wp:woocommerce/breadcrumbs /-->
<!-- wp:woocommerce/store-notices /-->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"3rem"}}}} -->
<div class="wp-block-columns">
<!-- wp:column {"width":"55%"} -->
<div class="wp-block-column" style="flex-basis:55%">
<!-- wp:woocommerce/product-image-gallery /-->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:post-title {"level":1,"__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
<!-- wp:woocommerce/product-price {"isDescendentOfSingleProductTemplate":true,"fontSize":"large"} /-->
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Prix TTC. Livraison offerte dès 50 € en France.</p>
<!-- /wp:paragraph -->
<!-- wp:post-excerpt {"__woocommerceNamespace":"woocommerce/product-query/product-summary"} /-->
<!-- wp:woocommerce/add-to-cart-form /-->
<!-- wp:woocommerce/product-meta -->
<div class="wp-block-woocommerce-product-meta">
<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"},"fontSize":"small"} -->
<div class="wp-block-group has-small-font-size">
<!-- wp:woocommerce/product-sku {"prefix":"Réf. : "} /-->
<!-- wp:post-terms {"term":"product_cat","prefix":"Catégorie : "} /-->
<!-- wp:post-terms {"term":"product_tag","prefix":"Étiquettes : "} /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:woocommerce/product-meta -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- wp:woocommerce/product-details {"className":"is-style-minimal"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Au passage, j'ai fait trois autres choix dans ce modèle. J'ai retiré le bloc de la note (pas d'avis sur nos produits de test) et celui des produits apparentés, pour garder une fiche courte. Et j'ai ajouté une ligne sous le prix, « Prix TTC. Livraison offerte dès 50 € en France. » : le dossier WooCommerce explique pourquoi ce genre d'information doit apparaître avant la commande. Si ton seuil change, c'est un seul fichier à modifier.

4.4Le catalogue, et le repli des catégories

Le second modèle du labo, archive-product.html, affiche la page Boutique. Il repose sur le bloc Product Collection, que la documentation de WooCommerce décrit comme le bloc qu'elle utilise par défaut dans tous ses modèles pour afficher les produits. Dans le nôtre : trois colonnes, douze produits par page, l'image, le titre, le prix et le bouton.

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","className":"labo-catalogue","layout":{"type":"constrained","contentSize":"1200px"}} -->
<main class="wp-block-group labo-catalogue">
<!-- wp:woocommerce/breadcrumbs /-->
<!-- wp:query-title {"type":"archive","showPrefix":false} /-->
<!-- wp:term-description /-->
<!-- wp:woocommerce/store-notices /-->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group">
<!-- wp:woocommerce/product-results-count /-->
<!-- wp:woocommerce/catalog-sorting /-->
</div>
<!-- /wp:group -->

Tu as remarqué la classe labo-catalogue ? C'est un marqueur, posé pour une vérification. La documentation de WooCommerce indique que les modèles par catégorie, par étiquette et par attribut se replient sur le catalogue. Au labo, on a ouvert /categorie-produit/objets/ : la page portait bien la classe labo-catalogue. Un seul archive-product.html dans le thème a donc servi la boutique et toutes les catégories. Pratique : un fichier à maintenir au lieu de trois.

Le bloc term-description, en haut du modèle, affiche la description de la catégorie. Ne le retire pas : c'est la place du texte d'introduction qui fait vivre une page de catégorie dans Google, comme on l'a vu dans le chapitre sur le référencement d'une boutique.

4.5Panier, commande, confirmation : habiller sans toucher aux blocs

Pour le panier et la commande, la règle change. La documentation de WooCommerce est explicite : les modèles page-cart.html et page-checkout.html doivent afficher le contenu des pages Panier et Validation de la commande. Tu peux ajouter autour la mise en page, l'en-tête, le pied de page, mais les blocs Panier et Commande restent dans le contenu des pages.

Au labo, on n'a donc écrit ni l'un ni l'autre. Et on a constaté que WooCommerce n'utilise pas son modèle de commande à moitié : même avec notre thème, la page Validation de la commande s'affichait sans notre menu ni notre pied de page, avec l'en-tête allégé de WooCommerce. Le panier, lui, reprenait bien notre en-tête et notre pied de page.

Si tu veux changer l'apparence de la commande, fais-le dans l'éditeur de site, sur le modèle « Page : validation de la commande », ou avec les réglages des blocs. Le libellé du bouton, la case des conditions générales : tout ça se règle dans les blocs de la page, et le dossier WooCommerce montre comment.

4.6La page « Bientôt disponible »

Un dernier modèle à connaître, même si tu n'y toucheras qu'une fois : « Page : Bientôt disponible », celui du mode d'avant-ouverture. Petite incohérence relevée en préparant ce chapitre : la documentation de WooCommerce le nomme page-coming-soon.html, mais au labo, l'extension l'enregistrait sous l'identifiant coming-soon. Je ne l'ai pas surchargé. Si tu veux le faire, modifie-le dans l'éditeur de site plutôt que par un fichier : tu éviteras de deviner le bon nom.

Les modèles en blocs, c'est fait. Pour ceux qui ont un thème classique, ou qui en maintiennent un pour un client, la mécanique est très différente : c'est le chapitre 5.

Co-fondateur de Kōeki · Consultant SEO et IA

Sébastien Grillot

Consultant SEO depuis 2009 : c'est ici, sur Inside da WeB, qu'il a monté sa première agence, spécialisée dans l'e-commerce sous WordPress. Il construit aujourd'hui ses propres outils, thèmes compris, avec l'IA.

Son parcours completDiscuter de ta boutique avec KōekimIAou, ma newsletter IA