Le thème classique : déclaration, surcharges et crochets

5.1Déclarer WooCommerce

Dans un thème classique, tout commence par une déclaration dans functions.php. Le guide du développeur de thèmes classiques insiste sur deux points : utiliser le crochet after_setup_theme, et non init, et déclarer la galerie produit à part, élément par élément. Voilà le functions.php du thème du labo.

<?php
// Labo Classique : un thème PHP déclare son support de WooCommerce, et les options de la galerie.
add_action(
	'after_setup_theme',
	function () {
		add_theme_support( 'title-tag' );
		add_theme_support(
			'woocommerce',
			array(
				'thumbnail_image_width' => 400,
				'single_image_width'    => 600,
			)
		);
		add_theme_support( 'wc-product-gallery-zoom' );
		add_theme_support( 'wc-product-gallery-lightbox' );
		add_theme_support( 'wc-product-gallery-slider' );
	}
);
add_action( 'wp_enqueue_scripts', function () { wp_enqueue_style( 'labo-classique', get_stylesheet_uri(), array(), '1.0.0' ); } );

// Un crochet : la promesse de livraison sous le prix, sans toucher aux gabarits.
add_action(
	'woocommerce_single_product_summary',
	function () {
		echo '<p class="labo-livraison">Prix TTC. Livraison offerte dès 50 € en France.</p>';
	},
	11
);

Les deux largeurs passées à add_theme_support fixent la taille des images de la boutique : 400 px pour les vignettes du catalogue, 600 px pour l'image principale de la fiche. Les trois lignes suivantes activent le zoom au survol, la visionneuse plein écran et le diaporama de la galerie. Le guide précise que la galerie est désactivée par défaut pour un thème compatible qui ne la déclare pas, et que tu peux n'en prendre qu'une partie.

5.2Le fichier woocommerce.php

Le plus simple, pour qu'une boutique s'affiche dans un thème classique, c'est un fichier woocommerce.php à la racine du thème. Celui du labo tient en trois lignes : l'en-tête du thème, la fonction woocommerce_content(), le pied de page. WooCommerce l'utilise pour toutes ses pages.

<?php get_header(); ?>
<?php woocommerce_content(); ?>
<?php get_footer(); ?>

Mais attention à l'effet de bord, que l'État du système nous a signalé noir sur blanc : « Votre thème a un fichier woocommerce.php, vous ne serez pas en mesure de substituer le modèle personnalisé woocommerce/archive-product.php étant donné que woocommerce.php a la priorité sur archive-product.php. » Autrement dit : avec woocommerce.php, tu ne peux plus personnaliser le catalogue par un gabarit dédié. Choisis l'un ou l'autre.

5.3Surcharger un gabarit

WooCommerce embarque 230 gabarits PHP, dans wp-content/plugins/woocommerce/templates/. Pour en modifier un, la documentation sur la structure des gabarits indique de le copier dans un dossier woocommerce/ de ton thème, en gardant la même arborescence mais sans le niveau templates/.

Au labo, on a copié single-product/title.php, le gabarit du titre de la fiche, dans labo-classique/woocommerce/single-product/title.php. Et on n'y a changé qu'une chose, une classe sur le titre :

the_title( '<h1 class="product_title entry-title labo-titre-surcharge">', '</h1>' );

Sur la fiche produit, le titre portait bien la classe labo-titre-surcharge : la copie du thème passe devant le gabarit de WooCommerce.

5.4Préférer un crochet

La surcharge marche, mais elle a un coût : ta copie est figée, et WooCommerce, lui, continue d'évoluer. Le guide du développeur le dit sans détour : quand c'est possible, utilise les crochets pour ajouter ou retirer du contenu, c'est plus robuste que surcharger les gabarits.

Un crochet, c'est un point d'accroche que WooCommerce te laisse dans ses gabarits. La fiche produit en a un pour son résumé, woocommerce_single_product_summary, où chaque élément (titre, prix, extrait, bouton) a sa priorité. En s'y accrochant à la priorité 11, juste après le prix, le functions.php du labo ajoute une ligne : « Prix TTC. Livraison offerte dès 50 € en France. »

Même résultat que dans le thème en blocs du chapitre 4, où la même phrase est un paragraphe dans le modèle. Mais ici, sans aucune copie de gabarit : à la prochaine mise à jour de WooCommerce, il n'y a qu'un nom de crochet à vérifier, pas un fichier entier.

5.5Le gabarit obsolète

Pour voir ce qui arrive à une copie qui vieillit, on a fait une seconde surcharge, volontairement datée : cart/cart.php, copié depuis WooCommerce 11.2.1, mais dont on a changé le numéro de version en 3.8.0. C'est exactement la situation d'un thème acheté il y a quelques années et jamais mis à jour.

L'État du système (WooCommerce > État) l'a repéré tout de suite.

« La version 3.8.0 est obsolète. La version du noyau est 11.2.0 ». WooCommerce compare l'en-tête @version de ta copie à celle de son propre gabarit. Sa documentation sur les gabarits obsolètes renvoie justement à cette rubrique de l'État du système, et rappelle que le plus souvent, il suffit de mettre à jour le thème. Si c'est ton thème, c'est à toi de reprendre la copie : récupère la nouvelle version du gabarit, et réapplique tes modifications.

5.6La surcharge du panier ne sert plus à rien

Et voilà la surprise du labo. Notre copie de cart/cart.php était bien chargée, puisque l'État du système la listait. Mais sur la page Panier, rien : aucune trace du tableau du panier classique. La page affichait le bloc Panier.

C'est logique quand on y pense. Depuis WooCommerce 8.3, sur une boutique récente, la page Panier contient le bloc Panier dans son contenu, et ce bloc ne passe pas par cart.php. Ton thème classique peut surcharger ce gabarit autant qu'il veut : tant que la page contient le bloc, la copie dort. La page de commande repose sur le même principe, un bloc dans le contenu de la page : je m'attends au même résultat, sans l'avoir mesuré.

Et si ton thème est un thème enfant d'un thème acheté, l'État du système te le rappelle à sa façon : « Si vous modifiez WooCommerce dans un thème parent que vous n'avez pas créé vous-même, nous vous recommandons d'utiliser un thème enfant. » C'est le sujet du dernier chapitre, avec l'allègement.

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