Un client vendant du matériel de randonnée nous a demandé une boutique entièrement en thème bloc, WooCommerce compris. Contrairement à un thème classique où chaque template WooCommerce s’écrit en PHP avec des appels aux fonctions du plugin, le mode bloc de WooCommerce repose sur ses propres templates HTML en blocs, que le thème peut surcharger exactement comme un template de page classique.
Ce tutoriel couvre la mise en place de ces templates ; il ne traite pas des questions de performance d’une boutique WooCommerce, qui relèvent d’un travail distinct sur le cache et la base de données.
Étape 1 : identifier les templates fournis par WooCommerce
WooCommerce enregistre ses propres templates en mode bloc, visibles dans l’éditeur de site au même titre que les templates du thème : single-product, archive-product, product-search-results, taxonomy-product_cat, et le template de panier et de commande via des pages dédiées contenant les blocs woocommerce/cart et woocommerce/checkout.
Templates WooCommerce visibles dans l'éditeur de site :
Produit (single-product)
Produits (archive-product)
Catégorie de produit (taxonomy-product_cat)
Recherche de produits (product-search-results)Étape 2 : surcharger un template depuis le thème
Pour personnaliser la fiche produit, il suffit de créer un fichier du même nom dans le dossier templates/ du thème, précisément comme pour n’importe quel autre template de page.
wp-content/themes/mon-theme/templates/single-product.htmlUne fois ce fichier créé, il apparaît dans l’éditeur de site comme la version « active » du template produit, modifiable directement avec les blocs WooCommerce dédiés : woocommerce/product-title, woocommerce/product-price, woocommerce/product-image-gallery, woocommerce/add-to-cart-form. Sur le projet du magasin de randonnée, nous avons réorganisé ces blocs pour placer un badge de disponibilité en stock juste sous le prix, un ajustement impossible à faire aussi simplement sur un template PHP classique sans toucher au code.
Étape 3 : personnaliser le panier et la commande
Le panier et la page de commande fonctionnent différemment : ce ne sont pas des templates au sens strict, mais des pages classiques contenant respectivement les blocs woocommerce/cart et woocommerce/checkout, chacun composé de sous-blocs modifiables (récapitulatif des articles, champs d’adresse, méthodes de livraison).
<!-- wp:woocommerce/cart -->
<!-- wp:woocommerce/filled-cart-block -->
<!-- wp:woocommerce/cart-items-block /-->
<!-- wp:woocommerce/cart-totals-block /-->
<!-- /wp:woocommerce/filled-cart-block -->
<!-- /wp:woocommerce/cart -->Sur ce projet, nous avons ajouté un bloc de réassurance (paiement sécurisé, retour sous 30 jours) directement dans la structure du bloc panier, visible pour toute personne qui rédige du contenu sans devoir modifier un fichier PHP dédié.
Étape 4 : gérer la compatibilité des extensions tierces
C’est le point qui a demandé le plus d’attention sur ce projet. Certaines extensions WooCommerce, notamment celles dédiées aux avis vérifiés et aux ventes croisées, injectent encore du HTML via des hooks PHP classiques (woocommerce_after_single_product_summary) plutôt que via des blocs natifs.
| Type d’extension | Comportement observé |
|---|---|
| Extension avec blocs natifs | S’intègre directement dans l’éditeur, modifiable comme un bloc classique |
| Extension avec hooks PHP classiques | S’affiche correctement en front, mais reste invisible et non modifiable dans l’éditeur |
Pour l’extension de ventes croisées restée en hooks classiques sur ce projet, la solution retenue a été de conserver son affichage tel quel en front — le rendu visuel restait satisfaisant — sans chercher à la forcer dans l’éditeur de blocs, une modification qui aurait dépassé le périmètre du projet pour un gain limité.
Étape 5 : vérifier le rendu des e-mails transactionnels
Un point souvent oublié : les e-mails de confirmation de commande WooCommerce restent générés à partir de templates PHP classiques, indépendants du système de templates blocs. Sur ce projet, nous avons vérifié explicitement que la personnalisation de ces e-mails suivait toujours l’ancienne méthode (fichiers PHP dans woocommerce/emails/), sans lien avec les templates blocs mis en place pour le reste de la boutique.
Avant de promettre à un client une boutique « 100 % blocs », vérifiez la compatibilité de chaque extension critique une par une. Une seule extension restée en hooks PHP classiques peut suffire à limiter l’autonomie éditoriale que le thème bloc était censé apporter sur cette zone précise de la boutique.
En résumé
WooCommerce en mode bloc permet de surcharger fiche produit, archive et panier exactement comme des templates de thème classiques, avec un vrai gain d’autonomie éditoriale. Le principal point de vigilance reste la compatibilité des extensions tierces, dont certaines n’ont pas encore migré leurs points d’intégration vers des blocs natifs.
