Elementor et WooCommerce forment ensemble l'une des combinaisons les plus flexibles pour créer des boutiques en ligne personnalisées sur WordPress. Alors que WooCommerce gère les fonctionnalités de commerce électronique (produits, panier, paiement), Elementor vous donne un contrôle visuel sur l'apparence et le fonctionnement de ces pages de boutique. Dans ce guide, nous parcourons la création des pages clés de WooCommerce avec Elementor, y compris les pages de produits, les archives de boutique et l'expérience du panier.
Ce tutoriel suppose que vous avez WordPress, WooCommerce et Elementor Pro installés. Elementor Pro est requis pour les widgets WooCommerce - la version gratuite d'Elementor ne les inclut pas.
Ce dont vous avez besoin avant de commencer
| Exigence | Pourquoi c'est nécessaire | Où l'obtenir |
|---|---|---|
| WordPress 6.x+ | Plateforme CMS principale | wordpress.org |
| WooCommerce (gratuit) | Fonctionnalité de commerce électronique | Répertoire des plugins WordPress |
| Elementor Pro | Widgets WooCommerce et constructeur de thèmes | PluginTheme.net |
| Thème compatible | Base pour votre boutique | Guide de sélection de thème |
| Produits d'exemple | Contenu pour la conception de modèles | WooCommerce → Outils → Importer des données d'exemple |
Comprendre le constructeur WooCommerce d'Elementor
Elementor Pro comprend un constructeur WooCommerce dédié au sein de son système de constructeur de thèmes. Cela vous permet de créer des modèles personnalisés pour :
- Page de produit unique : Contrôlez la mise en page des pages de produits individuelles
- Archive de produits : Personnalisez la page de la boutique et les pages de catégories
- Page du panier : Concevez une mise en page de panier personnalisée
- Page de paiement : Personnalisez la mise en page du formulaire de paiement
- Page Mon compte : Redessinez le tableau de bord du compte client
Chaque modèle utilise des widgets spécifiques à WooCommerce qui tirent des données dynamiques de vos produits. Cela signifie que vous concevez la mise en page une fois, et elle s'applique automatiquement à tous les produits (ou catégories spécifiques).
Créer une page produit personnalisée
Étape 1 : Créer le modèle
- Naviguez vers Modèles → Constructeur de thèmes dans votre admin WordPress
- Cliquez sur "Ajouter nouveau" et sélectionnez "Produit unique" comme type de modèle
- Choisissez un modèle de page produit préconçu ou commencez à partir d'une toile vierge
- L'éditeur Elementor s'ouvrira avec les widgets WooCommerce disponibles dans le panneau
Étape 2 : Ajouter des widgets WooCommerce
Widgets clés de WooCommerce pour les pages de produits :
| Widget | Ce qu'il affiche | Options de personnalisation |
|---|---|---|
| Images de produit | Galerie avec vignettes et lightbox | Mise en page de la galerie, position des vignettes, basculement du zoom |
| Titre du produit | Nom du produit (H1) | Typographie, couleur, alignement |
| Prix du produit | Prix normal et prix de vente | Typographie, couleur de l'étiquette de vente, mise en page |
| Évaluation du produit | Évaluation par étoiles des avis | Couleur des étoiles, taille, alignement |
| Ajouter au panier | Sélecteur de quantité + bouton ajouter au panier | Style du bouton, couleurs, mise en page de la quantité |
| Description courte du produit | Résumé bref du produit | Typographie, espacement |
| Méta du produit | SKU, catégories, étiquettes | Mise en page, typographie, séparateur |
| Onglets de données du produit | Description, avis, onglets d'informations supplémentaires | Style des onglets, bordure, espacement |
| Produits connexes | Produits de la même catégorie | Colonnes, nombre, ordre |
| Ventes incitatives | Vente incitative liée manuellement |
Étape 3 : Meilleures pratiques de mise en page
Une page produit à forte conversion suit un modèle de mise en page testé :
- Au-dessus de la ligne de flottaison : Images du produit (gauche, 50-60% de largeur) + titre, prix, évaluation, courte description et bouton d'ajout au panier (droite, 40-50% de largeur)
- En dessous de la ligne de flottaison : Onglets de données produit (description complète, spécifications, avis)
- Section inférieure : Produits connexes et ventes incitatives dans une grille (3-4 colonnes)
- Éléments de confiance : Informations sur la livraison, politique de retour, badges de sécurité près du bouton d'ajout au panier
Gardez le bouton d'ajout au panier visible sans faire défiler sur ordinateur et mobile. Utilisez des couleurs contrastées pour le bouton afin d'attirer l'attention.
Personnaliser la page boutique (archive de produits)
Étape 1 : Créer un modèle d'archive
- Allez à Modèles → Constructeur de thème → Archive de produits
- Ajoutez un nouveau modèle et sélectionnez "Archive de produits" comme type
- Assignez des conditions d'affichage (toutes les archives, catégories spécifiques ou pages de tags)
Étape 2 : Configurer la grille de produits
Le widget Produits d'archive affiche votre liste de produits avec ces options :
- Colonnes : 2-6 colonnes (3-4 fonctionnent bien pour la plupart des boutiques)
- Produits par page : 12-24 est standard pour l'expérience utilisateur
- Pagination : Pages numérotées, bouton "charger plus" ou défilement infini
- Menu déroulant de tri : Permettre aux clients de trier par prix, popularité ou évaluation
- Badge de vente : Personnalisez la position, la couleur et le texte du badge de vente
Pour les boutiques avec de nombreux produits, ajoutez un filtrage par catégorie au-dessus de la grille. Vous pouvez utiliser le widget Menu d'Elementor ou un plugin de filtrage de produits comme JetWooBuilder pour des options de filtrage avancées.
Conception de la page du panier
Elementor Pro vous permet de personnaliser la mise en page de la page du panier. Une bonne page de panier devrait :
- Afficher les images des produits, les noms, les prix et les quantités dans un tableau clair
- Afficher le total en cours de manière proéminente
- Inclure un bouton "Continuer vos achats" qui retourne à la page boutique
- Afficher un calculateur de livraison afin que les clients puissent estimer les frais de livraison
- Afficher des produits de vente croisée sous le tableau du panier
Le widget Panier d'Elementor remplace la mise en page de panier WooCommerce par défaut par un éditeur visuel où vous pouvez styliser chaque élément : bordures de tableau, couleurs de bouton, typographie et espacement.
Personnaliser la page de paiement
La page de paiement a un impact direct sur votre taux de conversion. Le widget Paiement d'Elementor Pro offre un contrôle sur :
- Mise en page du formulaire : Formulaire de facturation/livraison en une ou deux colonnes
- Position du résumé de commande : Côté à côté avec le formulaire ou au-dessus/en dessous
- Style du bouton : Couleur, taille et texte du bouton de commande
- Section de paiement : Bouton radio ou mise en page d'onglets pour les méthodes de paiement
- Badges de confiance : Ajouter des icônes de sécurité et du texte de garantie près du formulaire de paiement
Pour des conseils d'optimisation de conversion de paiement, consultez notre guide d'optimisation du paiement WooCommerce.
Considérations de performance
Elementor ajoute du CSS et du JavaScript à vos pages. Pour une boutique WooCommerce, la performance est directement liée aux conversions. Gardez ces conseils à l'esprit :
- Utilisez des conteneurs Flexbox au lieu de sections/colonnes pour moins d'éléments DOM
- Optimisez les images des produits : Utilisez le format WebP, des dimensions appropriées et le chargement différé. Consultez notre guide d'optimisation des images
- Limiter le nombre de widgets : Chaque widget ajoute du balisage ; utilisez uniquement ce dont vous avez besoin
- Activer les fonctionnalités de performance d'Elementor : Chargement amélioré des ressources, chargement amélioré du CSS
- Utiliser un plugin de mise en cache : WP Rocket fonctionne bien avec les configurations Elementor WooCommerce
Extensions Essentielles pour Elementor WooCommerce
Ces extensions Elementor étendent les capacités de construction de WooCommerce :
| Extension | Fonctionnalités Clés de WooCommerce |
|---|---|
| JetWooBuilder | Grilles de produits avancées, modèles d'archives personnalisés, mises en page de produits uniques avec logique conditionnelle |
| Essential Addons Pro | Grille de produits, carrousel de produits, paiement WooCommerce |
| Happy Elementor Addons | Grille de catégories de produits, mini panier, carrousel de produits |
Questions Fréquemment Posées
Ai-je besoin d'Elementor Pro pour WooCommerce, ou la version gratuite fonctionne-t-elle ?
Elementor Pro est requis pour les widgets spécifiques à WooCommerce (Images de produits, Ajouter au panier, Onglets de données produit, Panier, Paiement, etc.). La version gratuite d'Elementor n'inclut pas ces widgets. Vous pouvez utiliser la version gratuite pour concevoir des pages régulières, mais les modèles WooCommerce personnalisés nécessitent Elementor Pro.
Puis-je utiliser Elementor pour la page de paiement ?
Oui. Elementor Pro comprend un widget de paiement qui remplace la mise en page de paiement par défaut de WooCommerce. Vous pouvez personnaliser les champs du formulaire, le récapitulatif de commande, la section de paiement et la mise en page générale. Cependant, faites attention aux personnalisations lourdes qui pourraient casser les intégrations de passerelles de paiement : testez toujours le flux d'achat complet après avoir effectué des modifications.
Comment créer différentes mises en page de pages produits pour différentes catégories ?
Dans le générateur de thèmes d'Elementor, vous pouvez attribuer des conditions d'affichage à chaque modèle. Créez un modèle de page produit pour les vêtements (avec sélecteurs de taille/couleur), un autre pour les produits numériques (sans informations d'expédition), et ainsi de suite. Chaque modèle s'applique uniquement aux produits des catégories spécifiées.
Elementor ralentit-il WooCommerce ?
Elementor ajoute une surcharge CSS et JavaScript à chaque page. Sur les pages produits avec de nombreux widgets, cela peut augmenter les temps de chargement de 0,5 à 1,5 seconde par rapport aux modèles WooCommerce par défaut. L'utilisation des fonctionnalités de performance intégrées d'Elementor, l'optimisation des images et l'utilisation d'un plugin de mise en cache aident à atténuer cet impact. Pour les boutiques critiques en termes de performance, envisagez un thème plus léger comme GeneratePress.
Puis-je utiliser des modèles WooCommerce Elementor avec n'importe quel thème ?
La plupart des modèles WooCommerce Elementor fonctionnent avec n'importe quel thème qui prend en charge WooCommerce. Cependant, certains thèmes peuvent avoir leur propre style de page produit qui entre en conflit avec les modèles Elementor. Des thèmes comme Astra, GeneratePress et OceanWP sont conçus pour fonctionner sans problème avec Elementor et offrent la toile la plus propre pour des modèles personnalisés.
Obtenez Elementor Pro pour la Création de Boutique WooCommerce
Accédez à tous les widgets WooCommerce, au générateur de thèmes et à plus de 100 modèles Pro. Créez visuellement des pages produits personnalisées, des archives de boutique et des mises en page de paiement.
Parcourir Elementor Pro →
