# Thème bloc et WooCommerce : templates produit, panier et compatibilité > Mettre en place les templates WooCommerce en blocs pour la fiche produit, l'archive et le panier, avec les surcharges depuis le thème et les pièges d'extensions courants. - Auteur : Clément Hadrot - Publié le : 2025-06-30 - Mis à jour le : 2025-06-30 - Catégorie : Thèmes - URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/theme-bloc-woocommerce-templates-tutoriel/ ## L’essentiel - WooCommerce fournit ses propres templates blocs depuis sa version compatible FSE - Le thème peut surcharger chaque template via son propre dossier templates - Certaines extensions WooCommerce injectent encore du HTML classique incompatible 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.html ``` Une 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. > L'essentiel à retenir : WooCommerce fournit ses propres templates blocs depuis sa version compatible FSE ; Le thème peut surcharger chaque template via son propre dossier templates ; Certaines extensions WooCommerce injectent encore du HTML classique incompatible ## É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). ``` ``` 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.