Personnaliser la page produit WooCommerce avec Elementor
Un modèle de page produit sur-mesure : formule requise, widgets produit, mise en page qui convertit et conditions.
Les menus sont cités tels qu’ils apparaissent dans Elementor en français. Selon votre version et vos réglages de langue, certains libellés restent en anglais (Single Post, Loop Item…).
La page produit est celle qui fait vendre. Avec Elementor Pro et WooCommerce, vous remplacez la mise en page standard par un modèle conçu pour vos produits, appliqué automatiquement à tout le catalogue.
Prérequis : WooCommerce, Elementor et Elementor Pro actifs. D’après le comparatif officiel, le WooCommerce Builder n’est pas inclus dans la formule Pro Essential : il faut une formule Advanced Solo, Advanced ou supérieure. Ayez au moins un produit publié pour prévisualiser le modèle.
Créer le modèle
- Ouvrez Elementor › Constructeur de thème, rubrique Single Product, puis Add New.
- Nommez le modèle et cliquez sur Create Template.
- Insérez un bloc de page produit depuis la bibliothèque, ou construisez votre propre design.
Les widgets produit
Ces widgets affichent automatiquement les données de chaque produit :
- Product Images : l’image ou la galerie ;
- Product Title, Product Price et Product Rating ;
- Short Description : les arguments clés, juste sous le prix ;
- Add To Cart : bouton, quantité et choix des variations ;
- Product Stock et Product Meta (référence, catégories) ;
- Product Data Tabs et Additional Information : description complète, caractéristiques, avis ;
- Upsells et Product Related : pour prolonger la visite ;
- WooCommerce Breadcrumbs : le fil d’Ariane.
À noter : le widget Product Related s’appuie sur la fonction « produits apparentés » de WooCommerce, qui rapproche les produits ayant les mêmes étiquettes et catégories (pas les ventes incitatives).
Une mise en page qui convertit
- En haut, sur deux colonnes : images d’un côté, titre, prix, description courte et bouton de l’autre. Tout ce qui sert à décider doit être visible sans défiler.
- Sous le bouton : la réassurance (livraison, retours, paiement sécurisé) en quelques mots.
- Plus bas : description détaillée, caractéristiques, avis, puis produits apparentés.
- Sur mobile : vérifiez que le prix et le bouton restent proches du haut de l’écran.
Publier avec les bonnes conditions
Au clic sur Publish, choisissez une condition : tous les produits, ou seulement certaines catégories pour avoir des modèles différents selon les gammes (voir conditions d’affichage).
Lien affilié : si vous achetez Elementor Pro via un lien de cette page, Expertor perçoit une commission, sans surcoût pour vous.
