L'essentiel en 4 points
- Un fichier du même nom dans le dossier templates de ton thème remplace le modèle de WooCommerce : single-product.html pour la fiche, archive-product.html pour le catalogue.
- Le modèle de fiche fourni par WooCommerce écrit « Category: » et « Tags: » en anglais, en dur. Dans ton modèle, change l'attribut prefix des blocs, et ajoute un prefix au bloc de la référence.
- Les pages de catégorie se replient sur ton modèle de catalogue : au labo, un seul archive-product.html a servi la boutique et toutes les catégories.
- Panier et commande : habille le modèle, mais laisse les blocs Panier et Commande dans le contenu de leurs pages.
4.1Les modèles que WooCommerce fournit
Tu as déjà regardé la liste des modèles une fois WooCommerce activé ?
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.
| Titre dans l'éditeur | Nom du fichier | Ce qu'il affiche |
|---|---|---|
| Produit individuel | single-product.html | une fiche produit |
| Catalogue de produits | archive-product.html | la page Boutique |
| Produits par attribut | taxonomy-product_attribute.html | les produits d'une valeur d'attribut |
| Résultats de recherche des produits | product-search-results.html | la recherche de produits |
| Page : panier | page-cart.html | autour du bloc Panier |
| Page : validation de la commande | page-checkout.html | autour du bloc Commande |
| Confirmation de commande | order-confirmation.html | la page « Commande reçue » |
| Page : Bientôt disponible | (voir plus bas) | le mode « bientôt disponible » |
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). Pourquoi ces deux derniers n'apparaissaient-ils pas dans notre liste ? Tout simplement parce qu'ils se replient sur le catalogue.
4.2Surcharger un modèle : un fichier du même nom
Ce que j'aime ici, c'est que 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 je te conseille de partir du modèle de WooCommerce lui-même, c'est le meilleur point de départ. 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. Regarde ce que la fiche de Twenty Twenty-Five affichait sous le bouton « Ajouter au panier ».
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 donc pas traduisible, puisqu'il est dans le modèle et 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. Pour une boutique française, je trouve ça franchement dommage.
La correction se fait dans ton modèle, sur trois blocs. Je te mets le single-product.html du labo en entier, ce sera plus parlant :)
<!-- 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"} /-->Testé au labo : les libellés de la fiche
- Modèle d'origine de WooCommerce (Twenty Twenty-Five) : « SKU: LABO-TS » et « Category: Vêtements ».
- Modèle du thème Labo Boutique : « Réf. : LABO-TS » et « Catégorie : Vêtements ». Le bloc de la référence accepte bien un attribut prefix.
- Thème classique (gabarits PHP) : « UGS : LABO-TS » et « Catégorie : Vêtements », traduits d'office.
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. J'ai aussi ajouté une ligne sous le prix, « Prix TTC. Livraison offerte dès 50 € en France. », parce que ce genre d'information doit apparaître avant la commande (le dossier WooCommerce explique pourquoi).
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. Le nôtre affiche trois colonnes, douze produits par page, et pour chacun 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/, et 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.
Un fichier à maintenir au lieu de trois, je prends !
Le bloc term-description, en haut du modèle, affiche la description de la catégorie. Je te déconseille vraiment de le retirer. C'est la place du texte d'introduction qui fait vivre une page de catégorie dans Google, et le chapitre sur le référencement d'une boutique montre pourquoi.
4.5Panier, commande, confirmation : habiller sans toucher aux blocs
Pour le panier et la commande, la règle change. La documentation de WooCommerce dit explicitement que 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 à mon avis, c'est le plus sage. 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.
Tu veux changer l'apparence de la commande ? À ta place, je passerais par l'éditeur de site, sur le modèle « Page : validation de la commande », ou par 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. Il cache une 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.
Moi, 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 !
Et si tu as un thème classique, ou que tu en maintiens un pour un client ? La mécanique est très différente, et c'est tout le sujet du chapitre 5.
Sources
Historique de ce chapitre
- 19 octobre 2026 : première version, modèles du thème Labo Boutique sur WooCommerce 11.2.1.
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.
