Modifier la page produit WooCommerce avec Elementor, étape par étape

Pour modifier la page produit WooCommerce avec Elementor, il faut Elementor Pro : on crée un modèle « Produit unique » dans le Theme Builder, on y place les widgets WooCommerce (images, titre, prix, bouton d’ajout au panier…), puis on choisit à quels produits il s’applique grâce aux conditions d’affichage. La version gratuite d’Elementor ne permet pas de remplacer la fiche produit.

Voici la méthode que j’applique après quatorze ans de développement WordPress : prérequis, étapes dans le Theme Builder, widgets, balises dynamiques, modèles par catégorie, pièges des produits variables et des extensions, vitesse et données structurées.

Pourquoi remplacer la fiche produit par défaut de WooCommerce

Sans modèle dédié, la fiche produit WooCommerce est celle que fournit le thème actif. Pour beaucoup de boutiques, elle n’a jamais été remise en question depuis la mise en ligne. La galerie est correcte, le bouton « Ajouter au panier » est là, et voilà. Mais la conversion se joue sur des détails que ce gabarit ne permet pas de régler finement : l’ordre des informations, la place de la réassurance dans la zone d’achat, la visibilité des avis, la présentation des produits complémentaires.

Quand je reprends une boutique WooCommerce, je retrouve souvent le même paradoxe : les e-commerçants investissent dans le trafic payant, dans le SEO, dans des fiches rédigées par des copywriters, et ils envoient tout ce trafic sur des pages dont la structure n’a pas évolué depuis l’installation. C’est comme avoir un vendeur brillant dans une boutique mal agencée où personne ne trouve la caisse.

Un modèle Elementor vous rend la main sur cette structure, sans toucher aux gabarits PHP de WooCommerce :

Ce qu’il faut avant de commencer

• WooCommerce, Elementor et Elementor Pro actifs et à jour. Le Theme Builder, les widgets de la fiche produit et les balises dynamiques WooCommerce sont réservés à Elementor Pro.
• Un thème qui laisse Elementor gérer les modèles : un thème léger (Hello Elementor ou équivalent) pose moins de problèmes de styles en double qu’un thème qui a déjà sa propre mise en page de boutique.
• Un serveur à jour : WordPress recommande PHP 8.3 ou plus, et les exigences techniques d’Elementor demandent au moins WordPress 6.5 et conseillent 512 Mo de mémoire avec WooCommerce.
• Une préproduction : je construis et teste toujours un nouveau modèle de fiche sur une copie du site, jamais directement sur la boutique en ligne. Une condition mal réglée change tous les produits d’un coup.

Elementor 4 et son éditeur « atomique » sont activés par défaut sur les nouvelles installations depuis avril 2026 ; les widgets WooCommerce décrits ici restent utilisables à côté des nouveaux éléments.

Créer le modèle de page produit dans le Theme Builder, étape par étape

Étape 1 : créer un modèle « Produit unique »

Ouvrez le Theme Builder depuis l’administration (menu Elementor ou Modèles, selon votre version), choisissez Single Product (Produit unique), puis Add New. Donnez au modèle un nom explicite, par exemple « Produit – modèle principal » : quand vous en aurez plusieurs, vous saurez lequel s’applique où.

Étape 2 : partir d’un bloc prédéfini ou d’une page vierge

Les blocs de produit unique tout faits font gagner du temps, mais apportent souvent des sections et des styles inutiles. Je pars plutôt d’une page vierge et de conteneurs simples : deux colonnes pour la zone d’achat (images à gauche, informations à droite), puis une ou deux sections pleine largeur pour la description et les produits complémentaires.

Étape 3 : placer les widgets WooCommerce

Glissez les widgets de la fiche produit dans la structure (détails dans la section suivante). Un point est obligatoire : le widget Ajouter au panier (Add to Cart) doit figurer dans le modèle. Sans lui, l’éditeur d’Elementor ne se charge pas, comme le précise la documentation d’Elementor sur le modèle de produit unique.

Étape 4 : prévisualiser avec de vrais produits

Dans les réglages d’aperçu du modèle, choisissez un produit réel, puis testez un produit simple, un produit variable et un produit en promotion : c’est là qu’apparaissent les titres trop longs et les prix barrés mal stylés.

Étape 5 : publier et définir les conditions

Au moment de publier, Elementor demande où appliquer le modèle. Laissez « tous les produits » pour un modèle principal, ou incluez et excluez des catégories, des étiquettes ou des produits précis (voir la liste complète des conditions). Si deux modèles visent les mêmes produits, Elementor affiche un avertissement : réglez le conflit plutôt que de compter sur un ordre de priorité.

Étape 6 : tester le parcours d’achat complet

Ajoutez un produit au panier, changez de variation, passez une commande test, puis recommencez sur un vrai téléphone, pas seulement dans l’aperçu mobile de l’éditeur. Videz le cache de page après chaque modification du modèle.

Les widgets WooCommerce à placer, et dans quel ordre

Elementor Pro fournit un widget pour chaque partie de la fiche (entre parenthèses, son nom dans l’interface en anglais) :

Sans faire défiler la page, le client doit voir l’image, le titre, la note, le prix et le bouton. Placez la réassurance (livraison, retours, paiement) sous le bouton, dans un widget Liste d’icônes enregistré comme modèle réutilisable : vous la modifierez une seule fois pour toute la boutique.

Deux erreurs fréquentes : combiner Onglets de données et Contenu du produit, qui affichent deux fois la description, et attendre du widget Méta du produit des données personnalisées (il n’affiche que l’UGS, les catégories et les étiquettes). Pour une composition, une garantie ou une certification, utilisez les attributs WooCommerce ou une balise dynamique de champ personnalisé dans un widget Texte. Ces informations existent dans votre catalogue WooCommerce mais elles dorment dans des champs que personne ne voit.

Les balises dynamiques WooCommerce : ce qu’elles font vraiment

Les balises dynamiques WooCommerce injectent une donnée du produit dans un widget compatible (titre, texte, appel à l’action…) : prix, note, statut de promotion, description courte, UGS, stock, catégories et étiquettes, titre et image. Chaque balise accepte un texte avant, un texte après et une valeur de repli : de quoi afficher la note en grand dans la zone d’achat, ou reprendre la catégorie dans le titre d’un bloc. Leur limite : elles affichent des valeurs, elles ne calculent rien.

Afficher le pourcentage de remise

Aucune balise ne calcule le pourcentage de remise, et le badge « Promo ! » de WooCommerce n’affiche pas de chiffre. Pour un badge « -25 % », voici une petite extension qui crée le shortcode [devwp_remise] ; pour un produit variable, elle affiche la remise maximale (« Jusqu’à -30 % ») :

<?php
/**
 * Plugin Name:       DevWP - Pourcentage de remise WooCommerce
 * Description:       Shortcode devwp_remise : affiche le pourcentage de remise du produit courant.
 * Version:           1.0.0
 * Requires at least: 6.5
 * Requires PHP:      8.1
 * Requires Plugins:  woocommerce
 * Text Domain:       devwp-remise
 * License:           GPL-2.0-or-later
 */

defined( 'ABSPATH' ) || exit;

add_action( 'init', 'devwp_remise_register_shortcode' );

/**
 * Enregistre le shortcode.
 */
function devwp_remise_register_shortcode() {
	add_shortcode( 'devwp_remise', 'devwp_remise_shortcode' );
}

/**
 * Pourcentage de remise arrondi, ou 0 si le prix promo n'est pas valide.
 *
 * @param float $regulier Prix normal.
 * @param float $promo    Prix promo.
 * @return int
 */
function devwp_remise_calcul( float $regulier, float $promo ): int {
	if ( $regulier <= 0 || $promo <= 0 || $promo >= $regulier ) {
		return 0;
	}

	return (int) round( ( 1 - $promo / $regulier ) * 100 );
}

/**
 * Affiche la remise du produit courant (simple ou variable).
 *
 * @return string Badge HTML, ou chaîne vide si le produit n'est pas en promotion.
 */
function devwp_remise_shortcode() {
	if ( ! function_exists( 'wc_get_product' ) ) {
		return '';
	}

	$product = wc_get_product( get_the_ID() );

	if ( ! $product instanceof WC_Product || ! $product->is_on_sale() ) {
		return '';
	}

	if ( $product->is_type( 'variable' ) ) {
		$pourcentage = 0;
		$prix        = $product->get_variation_prices( true );

		foreach ( $prix['regular_price'] as $variation_id => $regulier ) {
			$promo       = (float) ( $prix['sale_price'][ $variation_id ] ?? 0 );
			$pourcentage = max( $pourcentage, devwp_remise_calcul( (float) $regulier, $promo ) );
		}

		/* translators: %d: remise maximale parmi les variations, en pourcentage. */
		$format = __( 'Jusqu’à -%d %%', 'devwp-remise' );
	} else {
		$pourcentage = devwp_remise_calcul( (float) $product->get_regular_price(), (float) $product->get_sale_price() );

		/* translators: %d: remise en pourcentage. */
		$format = __( '-%d %%', 'devwp-remise' );
	}

	if ( $pourcentage <= 0 ) {
		return '';
	}

	return '<span class="devwp-remise">' . esc_html( sprintf( $format, $pourcentage ) ) . '</span>';
}

Enregistrez ce fichier dans wp-content/plugins/devwp-remise/devwp-remise.php, activez l’extension sur votre préproduction, puis placez un widget Shortcode contenant [devwp_remise] à côté du prix dans le modèle et stylez la classe devwp-remise. Ne mettez jamais ce code dans le thème parent : sa prochaine mise à jour l’effacerait. Un thème enfant convient, mais une extension survit à un changement de thème. Calculé côté serveur, le pourcentage reste compatible avec le cache de page, à condition de vider ce cache quand une promotion programmée commence ou se termine.

Ce genre de besoin marque la frontière entre intégration et développement : si elle vous paraît floue, lisez la différence entre un intégrateur et un développeur WordPress.

Afficher « stock limité » seulement quand il reste peu de pièces

Elementor n’a pas de condition sur le niveau de stock. La solution est dans WooCommerce : activez la gestion du stock sur vos produits, puis, dans les réglages d’inventaire (onglet Produits), définissez un seuil de stock faible et choisissez de n’afficher la quantité restante que lorsque le stock est faible. Le widget Stock du produit affichera « En stock » en temps normal, puis la quantité restante (« Plus que 3 en stock ») sous le seuil ; stylez-le pour que ce message se voie.

Les conditions d’affichage des éléments et le cache

Elementor Pro peut aussi afficher ou masquer un élément selon le contenu (auteur, date de publication, catégories, étiquettes), selon le visiteur (connexion, rôle) ou selon la date et l’heure. La documentation d’Elementor prévient que ces conditions s’accordent mal avec le cache et conseille de le désactiver. Sur une boutique, ce n’est pas envisageable : gardez des critères liés au contenu, identiques pour tous les visiteurs, et évitez ceux qui dépendent du visiteur ou de l’heure.

Un modèle par catégorie : quand c’est utile

Un seul modèle bien construit suffit à beaucoup de boutiques. Un second modèle se justifie quand une famille de produits demande une autre hiérarchie d’informations : des vêtements avec un guide des tailles près du sélecteur, des produits numériques sans bloc livraison, des produits techniques dont la fiche s’ouvre sur les caractéristiques.

Les conditions du Theme Builder ciblent une catégorie de produits, ses sous-catégories, une étiquette, des produits précis ou un auteur. Elles ne ciblent ni le type de produit (simple ou variable) ni l’état « en promotion ». Pour un modèle réservé aux promotions ou aux produits variables, créez une catégorie ou une étiquette dédiée et ciblez-la.

Inutile de créer un template par produit : chaque modèle de plus est une mise en page à faire évoluer et à retester. Je recommande un modèle principal, plus un ou deux pour des familles vraiment différentes.

Produits variables, ventes incitatives et extensions : les pièges

Produits variables

Le widget Ajouter au panier gère les listes de variations, avec des réglages de style dédiés. Le prix et la disponibilité de la variation choisie s’affichent dans ce formulaire ; le widget Prix du produit montre la fourchette. Pour que l’image change avec la variation, gardez le widget Images du produit, qui utilise la galerie de WooCommerce, plutôt qu’un widget Image alimenté par une balise dynamique.

Ventes incitatives, ventes croisées et produits apparentés

Ces trois blocs sont souvent confondus. D’après la documentation de WooCommerce :

• les ventes incitatives (upsells) sont des alternatives plus haut de gamme, choisies dans l’onglet Produits liés de chaque produit : elles s’affichent sur la fiche produit (widget Upsells) ;
• les ventes croisées (cross-sells) sont des produits complémentaires, choisis au même endroit, mais elles s’affichent dans le panier, pas sur la fiche ;
• les produits apparentés sont calculés automatiquement à partir des catégories et des étiquettes communes (widget Product Related).

Pour un bloc plus travaillé, du type « Complétez votre équipement » avec deux ou trois produits et une carte personnalisée, utilisez le widget Loop Grid d’Elementor Pro, filtré par catégorie ou par étiquette. Restez sur peu de produits : un bloc trop fourni détourne l’attention du bouton d’achat.

Extensions qui ajoutent des éléments à la fiche

Options de produit, guide des tailles, paiement express, badges d’avis : beaucoup d’extensions se greffent sur les crochets (hooks) de la fiche par défaut. Celles qui visent le formulaire d’ajout au panier suivent en général le widget Ajouter au panier ; celles qui visent le résumé de la fiche peuvent disparaître d’un modèle Elementor. Vérifiez-les une à une ; si l’une ne s’affiche plus, cherchez son widget ou son shortcode. À défaut, il faut adapter une extension WordPress existante ou passer par un développement WooCommerce sur mesure.

Thème et modèle en concurrence

Un thème qui a sa propre mise en page de boutique peut ajouter un second titre, un fil d’Ariane en double ou des styles concurrents. Revérifiez la fiche après chaque mise à jour du thème, d’Elementor et de WooCommerce : c’est le rôle des mises à jour testées en préproduction dans une maintenance WordPress.

Vitesse et données structurées : ne pas casser ce qui marche

Vitesse

Un template produit Elementor sophistiqué peut devenir un fardeau pour les Core Web Vitals si la construction n’est pas rigoureuse. Sur une fiche produit, l’élément mesuré par le LCP (Largest Contentful Paint) est le plus souvent l’image principale : vérifiez que votre extension de cache ou d’images ne la charge pas en différé, et servez-la au bon format et aux bonnes dimensions.

Côté Elementor, le chargement amélioré des ressources (Improved Asset Loading), le chargement optimisé des images et le chargement optimisé de Gutenberg ne sont plus des options à activer : ils ont été intégrés au cœur d’Elementor et d’Elementor Pro avec la version 3.21, en avril 2024. Restent entre vos mains : des conteneurs plutôt que des colonnes imbriquées, peu de widgets et d’extensions de widgets, aucune animation dans la zone d’achat. Pour le reste (cache, base de données, hébergement), voyez comment optimiser les performances d’une boutique WooCommerce.

Données structurées Product

Les résultats enrichis de Google (prix, disponibilité, note) reposent sur le balisage Product. WooCommerce génère le sien pendant l’affichage de la fiche par défaut ; Rank Math produit son propre balisage. D’après le comparatif de Rank Math, la version gratuite ajoute la marque, le prix, la devise et la disponibilité ; les GTIN et MPN (y compris par variation) et une offre distincte pour chaque variation sont réservés à Rank Math PRO.

Un modèle Elementor ne doit ni supprimer ce balisage ni le dupliquer. Après publication, passez une fiche simple et une fiche variable au test des résultats enrichis de Google : vous devez y trouver un seul produit, avec son prix et sa disponibilité.

Et sans Elementor ?

Si vous n’avez pas Elementor Pro, deux autres voies existent. Avec un thème de blocs, WooCommerce fournit un modèle « Produit unique » modifiable dans l’éditeur de site (Apparence, puis Éditeur, puis Modèles), avec la possibilité de créer des modèles pour certains produits. Avec un thème classique, on surcharge les gabarits WooCommerce dans un thème enfant : c’est du développement, mais c’est la méthode la plus légère. Même logique côté compte client : voyez comment personnaliser la page de connexion et le compte client WooCommerce.

Questions fréquentes sur la page produit WooCommerce avec Elementor

Par où commencer

La fiche produit est la page où tout se joue. Arrêtez de la traiter comme un gabarit générique et commencez à la construire comme un argumentaire de vente structuré. Voici les priorités, dans l’ordre où je les aborde :

• créer un template produit dédié dans le Theme Builder Elementor, même imparfait, plutôt que de garder le template par défaut ;
• placer les éléments de réassurance dans la zone d’achat, pas en bas de page ;
• afficher la note moyenne près du titre et le badge de remise près du prix ;
• présenter les ventes incitatives dans un bloc soigné, et laisser les ventes croisées au panier ;
• tester les produits variables et chaque extension qui ajoute des éléments à la fiche ;
• mesurer le LCP mobile après la mise en ligne et alléger le modèle si besoin.

Vous préférez déléguer ? Vous pouvez faire construire votre modèle de fiche produit par un intégrateur Elementor, de la maquette aux tests sur mobile.

Mis à jour en octobre 2026 par un développeur WordPress freelance senior.