Le squelette d'un thème en blocs pour une boutique

2.1Les fichiers du thème

Combien de fichiers faut-il pour un thème en blocs ? Deux seulement : style.css, pour son nom, et templates/index.html, le modèle par défaut. C'est le minimum exigé.

Pour une boutique utilisable, on en a écrit sept au labo :

labo-boutique/
├── style.css               le nom et la description du thème
├── theme.json              couleurs, police, tailles, boutons
├── parts/
│   ├── header.html         l'en-tête : titre, navigation, compte, mini-panier
│   └── footer.html         le pied de page
└── templates/
    ├── index.html          le modèle par défaut (liste d'articles)
    ├── page.html           les pages
    └── single.html         les articles

Pas de functions.php, pas de PHP du tout !

Les modèles propres à la boutique (fiche produit, catalogue) viennent au chapitre 4. Tant que le thème ne les fournit pas, WooCommerce utilise les siens, et je te conseille de le laisser faire tant que ton squelette n'est pas stable.

2.2style.css, la carte d'identité

Dans un thème en blocs, style.css ne contient souvent aucun style. Un comble pour un fichier qui porte ce nom ;) Son en-tête suffit à WordPress pour reconnaître le thème.

/*
Theme Name: Labo Boutique
Theme URI: https://insidedaweb.com/dossiers/theme-woocommerce/
Author: Inside da WeB (labo)
Description: Thème en blocs minimal pour WooCommerce, construit au labo d'Inside da WeB : une palette, une police système, les modèles de boutique réécrits en français.
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: labo-boutique
*/

« Requires at least: 7.0 » n'est pas un hasard. C'est la version minimale de WordPress que demande WooCommerce 11.2.1, et je ne vois aucun intérêt à annoncer une compatibilité que la boutique n'aura pas.

2.3L'en-tête, avec la boutique dedans

L'en-tête est une « partie de modèle », c'est-à-dire un fichier HTML fait de blocs, réutilisé par tous les modèles. Celui du labo aligne le titre du site à gauche, et à droite la navigation, l'icône du compte client et le mini-panier.

<!-- wp:group {"style":{"spacing":{"padding":{"top":"1rem","bottom":"1rem"}}},"backgroundColor":"vert-pale","layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group has-vert-pale-background-color has-background" style="padding-top:1rem;padding-bottom:1rem">
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group">
<!-- wp:site-title {"level":0} /-->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
<div class="wp-block-group">
<!-- wp:navigation {"overlayMenu":"mobile","layout":{"type":"flex","justifyContent":"right"}} -->
<!-- wp:navigation-link {"label":"Boutique","url":"/boutique/","kind":"custom"} /-->
<!-- wp:navigation-link {"label":"Objets","url":"/categorie-produit/objets/","kind":"custom"} /-->
<!-- wp:navigation-link {"label":"Vêtements","url":"/categorie-produit/vetements/","kind":"custom"} /-->
<!-- /wp:navigation -->
<!-- wp:woocommerce/customer-account {"displayStyle":"icon_only","iconStyle":"line","iconClass":"wc-block-customer-account__account-icon"} /-->
<!-- wp:woocommerce/mini-cart /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->

Je te fais remarquer deux choses.

La navigation contient ses liens en dur (Boutique, Objets, Vêtements). C'est le point de départ, que l'éditeur de site te laissera ensuite modifier. Et les deux derniers blocs viennent de WooCommerce, woocommerce/customer-account pour l'icône qui mène au compte client, et woocommerce/mini-cart pour le panier qui s'ouvre sur le côté. Leurs noms et leurs rôles sont dans la référence des blocs de WooCommerce.

2.4Le piège : WooCommerce s'invite dans ton en-tête

Ma première version de cet en-tête n'avait ni le compte client ni le mini-panier. Juste le titre et la navigation. Je voulais voir ce que WooCommerce en ferait. Tu devines la suite ?

Il les a ajoutés tout seul !

Sur toutes les pages, l'en-tête affichait l'icône du compte et celle du panier, que je n'avais jamais écrites. C'est un mécanisme de WordPress, les block hooks. Une extension peut accrocher ses blocs à côté d'un bloc du thème, et WooCommerce accroche les siens juste après la navigation.

Le résultat était fonctionnel, mais pas à sa place.

Dans mon groupe aligné « espace entre les éléments », les deux blocs ajoutés se sont répartis comme des éléments à part entière. Le compte client s'est retrouvé au milieu de la barre, le panier à l'extrême droite.

Mon conseil est simple : place toi-même ces deux blocs dans ton en-tête, là où tu les veux.

2.5Le pied de page et les modèles de base

Le pied de page du labo tient en un paragraphe, avec deux liens, vers les conditions générales de vente et vers le compte client. Pour une vraie boutique, c'est là que vont les mentions légales, la page de livraison, et le lien de rétractation que la loi impose depuis juin 2026 (le dossier WooCommerce explique pourquoi). Les trois modèles de base sont courts. Le modèle des pages, par exemple, ne fait qu'empiler l'en-tête, le titre, le contenu et le pied de page :

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Au labo, les pages Panier et Mon compte affichaient bien l'en-tête et le pied de page du thème. La page de commande, non. WooCommerce lui applique son propre modèle, « Page : validation de la commande », avec un en-tête allégé, sans menu ni pied de page, pour ne pas distraire l'acheteur. Plutôt bien vu, à mon avis. On le retrouve au chapitre 4. Avec ces sept fichiers, le thème s'active et la boutique fonctionne, avec les modèles de WooCommerce pour les fiches et le catalogue. Il reste à l'habiller, et c'est le rôle de theme.json.

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