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

2.1Les fichiers du thème

Un thème en blocs n'exige que deux fichiers : style.css, pour son nom, et templates/index.html, le modèle par défaut. 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.

2.2style.css, la carte d'identité

Dans un thème en blocs, style.css ne contient souvent aucun style. 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. Inutile d'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 » : 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 -->

Deux choses à remarquer. 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, l'icône qui mène au compte client, et woocommerce/mini-cart, 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.

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. 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 au milieu de la barre, le panier à l'extrême droite.

La règle 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 : les conditions générales de vente et 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. 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 : 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