WooCommerce et Elementor : Comment construire une boutique avec style

WooCommerce ajoute une fonctionnalité de commerce électronique à un site WordPress, mais que se passe-t-il lorsque vous voulez plus que les outils de conception intégrés de WooCommerce ?

Comme vous l’avez peut-être découvert, WooCommerce limite vos possibilités de conception, en particulier pour les pages de produits et la zone de commande.

C’est là que l’intégration d’Elementor dans WooCommerce entre en jeu : elle ouvre la fonctionnalité du glisser-déposer, le contrôle créatif sur toutes les pages WooCommerce, et la prise en charge des modules et thèmes avancés d’Elementor WooCommerce que vous n’utiliseriez peut-être pas autrement.

Dans ce guide, nous explorons les bases de WooCommerce et Elementor, comment ils fonctionnent ensemble, et comment créer un beau site de commerce électronique avec la combinaison WooCommerce Elementor. Continuez à lire pour commencer.

Qu’est-ce que WooCommerce ?

WooCommerce est une extension pour WordPress qui transforme n’importe quelle installation WordPress standard en site de commerce électronique.

C’est la solution la plus populaire pour gérer une boutique en ligne sur WordPress en raison de son intégration rapide dans l’écosystème WordPress, d’une collection robuste de thèmes de commerce électronique pris en charge et d’une flexibilité de développement avancée.

Voici quelques caractéristiques clés de WooCommerce :

• Vente de produits numériques et physiques : WooCommerce prend en charge un large éventail d’autres types de produits, y compris les abonnements, les produits variables, les produits affiliés et les produits groupés.
• Gestion d’une boutique de commerce électronique : WooCommerce gère les commandes, l’inventaire des produits et tous les contacts dans son tableau de bord.
• Création automatisée des pages essentielles du commerce électronique : Vous obtenez une page Boutique, une page Panier, une page Mon compte, et bien d’autres encore une fois que vous avez activé WooCommerce sur votre site.
• Extension et évolutivité : Il existe un vaste écosystème d’extensions et de modules complémentaires pour WooCommerce, ce qui vous permet d’incorporer de nouvelles fonctionnalités qui ne sont pas intégrées. Il est également facile de faire évoluer une entreprise avec WooCommerce en raison de sa prise en charge de grandes quantités de commandes, de produits et d’autres données.
• Communauté et support : Bien qu’il n’y ait pas de support humain direct, WooCommerce dispose d’une large communauté de développeurs et d’utilisateurs actifs, et l’internet est rempli de forums et de tutoriels pour trouver des solutions.
• Paiements, expédition et taxes : Choisissez parmi des centaines de processeurs de paiement et associez le fournisseur de services d’expédition de votre choix. Vous pouvez même définir des taxes en fonction des zones.
• Données analytiques : Peu de plateformes de commerce électronique rivalisent avec l’ensemble robuste de rapports et d’analyses fournis par WooCommerce. Suivez les performances de votre boutique tout au long de l’année, et analysez tout, des actions des clients aux revenus quotidiens.

Dans l’ensemble, WooCommerce offre un large éventail de fonctionnalités, ce qui en fait l’extension de commerce électronique de référence pour WordPress. Cela dit, il existe d’autres extensions de commerce électronique à considérer, que nous vous recommandons avant de vous engager entièrement dans WooCommerce.

À quoi sert Elementor ?

Elementor est utilisé pour contrôler facilement la conception de n’importe quel site web WordPress. Il s’intègre parfaitement à WooCommerce. Ainsi, vous pouvez personnaliser les éléments de votre boutique WooCommerce qui n’ont normalement pas de possibilités de modification.

Par exemple, Elementor vous aide à personnaliser :

• La page de la boutique WooCommerce
• Les pages de produits
• Les pages de commande et de panier
• La page Mon compte
• La page Boutique

Elementor offre une expérience d’édition par glisser-déposer, ce qui en fait une interface de conception visuelle qui utilise principalement une souris d’ordinateur, par opposition à un code informatique ou à des réglages de développement avancés.

L’éditeur par glisser-déposer permet non seulement de personnaliser les pages énumérées ci-dessus, mais aussi de mieux contrôler la conception de chaque partie de votre site web.

Vous pouvez, par exemple, personnaliser la page d’accueil ou ajouter une page « Coming Soon » en quelques secondes, grâce aux modèles de page et de section fournis avec Elementor.

Dans l’ensemble, Elementor offre :

• Un constructeur en glisser-déposer avec des blocs WooCommerce
• Des modèles préf-construits pour le commerce électronique
• Un outil WooCommerce Builder spécifique avec des widgets et des fonctionnalités dédiés aux éléments de commerce électronique
• Un style avancé pour chaque bloc, section et page créés dans WooCommerce

Grâce à la facilité d’utilisation d’Elementor avec WooCommerce, l’extension est utilisée par des développeurs et des propriétaires de sites du monde entier pour créer des boutiques en ligne hautement personnalisées.

Est-ce que WooCommerce fonctionne avec Elementor ?

Oui, Elementor est conçu pour fonctionner avec l’extension WooCommerce.

En fait, Elementor est vendu comme un produit qui :

• Réduit le nombre d’extensions nécessaires pour WooCommerce
• Augmente les conversions (avec des sections et des thèmes WooCommerce optimisés et pré-construits)
• Aide à visualiser le développement d’une boutique en ligne sans avoir besoin de code

Elementor est également livré avec divers widgets WooCommerce.

Voici une liste de quelques widgets WooCommerce Elementor :

• Méta produit
• Description courte
• Fil d’Ariane du produit
• Mon compte
• Panier
• Menu Panier
• Stock de produits
• Ajouter au panier
• Classement des produits
• Beaucoup plus

En ce qui concerne la conception personnalisée, Elementor vous aide à personnaliser les zones d’une boutique WooCommerce qui, auparavant, n’étaient généralement pas disponibles pour les personnalisations. Elementor vous permet de modifier la commande, le résumé des achats, la page Mon compte, les pages de produits, le panier et plus encore.

Avec des kits complets de sites WooCommerce et une fonction d’installation d’une seule page pour WooCommerce, on peut dire que WooCommerce et Elementor fonctionnent plutôt bien ensemble.

Pourquoi devriez-vous utiliser Elementor pour les sites WooCommerce ?

Utiliser WooCommerce sans Elementor est tout à fait possible. C’est toujours une plateforme de commerce électronique puissante pour la grande majorité des entreprises. Cependant, vous trouverez que les options de personnalisation sont limitées sans Elementor, et vous passerez plus de temps à développer votre site web.

Voici les principales raisons d’utiliser Elementor avec WooCommerce :

Conception visuelle améliorée

WordPress a son constructeur de pages Gutenberg, mais Elementor étend cette fonctionnalité avec un plus grand nombre de blocs et de sections pré-construites.

Personnalisation des pages non modifiables de WooCommerce

De la page Panier à la page Mon compte, Elementor vous permet de personnaliser diverses pages WooCommerce qui sont généralement verrouillées. Il vous permet également de personnaliser presque tous les aspects des pages de produits.

Conceptions orientées vers la conversion

Tous les éléments d’Elementor sont responsives, et beaucoup de ses widgets et blocs WooCommerce sont conçus spécifiquement pour stimuler les ventes, comme les tableaux de prix, les témoignages et les comptes à rebours.

Intégration transparente avec WooCommerce

Elementor fonctionne parfaitement avec WooCommerce, ce qui dévoile un large écosystème de thèmes et de modules complémentaires compatibles avec WooCommerce et conçus spécialement pour la construction de pages Elementor.

Gain de temps et rentabilité

Les modèles, blocs et sections pré-conçus d’Elementor éliminent le besoin de codage personnalisé et de configuration manuelle fastidieuse. Quelques minutes suffisent pour créer des pages de commerce électronique de qualité professionnelle. Cela réduit les frais de développement potentiels et le temps passé à construire votre boutique.

Avec de tels avantages, nous recommandons de toujours utiliser Elementor (ou un autre constructeur de pages que vous appréciez) lors de la construction d’un site avec WooCommerce.

Comment créer un site de commerce électronique avec Elementor et WooCommerce ?

Elementor et WooCommerce constituent la meilleure combinaison d’outils pour créer un site de commerce électronique sur WordPress. Dans ce guide, nous vous expliquons toutes les étapes nécessaires à la création d’une boutique en ligne avec ces deux outils.

1. Installer WooCommerce et Elementor

Pour commencer, vous devez avoir :

1. WordPress
2. Un hébergeur (de préférence une solution d’hébergement puissante et infogérée comme Kinsta)

Installez WordPress sur votre hébergeur. Kinsta propose une installation de WordPress en un clic.

Une fois ces éléments en place, installez l’extension WooCommerce. Les utilisateurs de l’hébergement Kinsta ont l’avantage d’installer automatiquement WooCommerce lors de la création d’un compte.

Sinon, ajoutez l’extension gratuite WooCommerce à votre site WordPress.

Vous pouvez également apprendre à installer WooCommerce sur votre site en toute simplicité. Veillez à activer WooCommerce et à suivre les étapes de configuration.

Une fois la configuration terminée, vous verrez apparaître un onglet WooCommerce dans WordPress et des liens pour ajouter des produits, configurer des paiements, ajouter des taux de taxe, etc.

La dernière partie de cette étape consiste à installer et à activer le constructeur de pages Elementor. Vous pouvez soit installer la version gratuite d’Elementor, soit suivre les étapes d’achat et de téléchargement d’Elementor Pro.

2. Ajouter un thème WooCommerce Elementor

WooCommerce est compatible avec la grande majorité des thèmes WordPress. Il en va de même pour Elementor. Cependant, il est préférable de choisir un thème polyvalent (un thème qui vous permet de construire n’importe quel type de site web) ou un thème orienté vers le commerce électronique. De cette façon, vous n’êtes pas coincé avec un thème de blog lorsque vous essayez de créer une boutique en ligne à part entière.

Plus loin dans cet article, consultez nos recommandations des meilleurs thèmes WooCommerce Elementor pour commencer. Vous pouvez également rechercher des thèmes WooCommerce Elementor en ligne.

Une fois que vous avez trouvé le thème parfait pour vos besoins, installez-le sur votre site WordPress.

3. Créer une page d’accueil WooCommerce

Par défaut, une page d’accueil n’est pas générée pour une boutique WooCommerce, ce qui vous oblige à la créer de toutes pièces. Pour accélérer ce processus, vous pouvez créer automatiquement une page d’accueil en allant sur WooCommerce > Accueil dans WordPress. Cliquez sur Créer une page d’accueil personnalisée et adaptez-la à vos besoins.

Cela ajoute une page d’accueil à personnaliser.

Enfin, allez dans Apparence > Personnaliser, et sélectionnez Réglages de la page d’accueil. Choisissez Une page statique sous Votre page d’accueil affiche. Sélectionnez Page d’accueil dans la liste déroulante Page d’accueil.

Cette page sera votre page d’accueil globale et vous pourrez la personnaliser à l’aide d’Elementor ou du Customizer de thème de WordPress.

La conception de votre page d’accueil (et de l’ensemble du site web en général) dépend du thème choisi. Par exemple, le thème Astra propose des modèles de départ pour créer une belle boutique en ligne en quelques secondes. Ceux-ci se trouvent sous Apparence > Modèles de démarrage (si vous utilisez Astra).

Nous vous recommandons également d’explorer le Constructeur de thème d’Elementor. Pour cela, allez dans Modèles > Constructeur de thème.

Utilisez l’option Page unique et cliquez sur Ajouter. Utilisez les onglets Pages et Blocs pour concevoir rapidement une page d’accueil professionnelle ou toute autre page de votre site.

4. Ajouter des produits à WooCommerce

Pour ajouter un produit à WooCommerce, allez dans Produits > Ajouter. Vous avez également la possibilité d’importer plusieurs produits avec un fichier CSV.

Remplissez tous les champs, du nom du produit à la description du produit, du prix à la catégorie du produit. Cliquez sur le bouton Publier lorsque vous avez terminé avec le produit.

Votre liste de produits est toujours disponible sous Produits > Tous les produits dans WordPress.

5. Configurer l’expédition, les passerelles de paiement et les taxes

Il est important de configurer les éléments essentiels tels que le traitement des paiements, l’expédition et les règles fiscales avant d’accepter les achats des clients.

Ces éléments sont tous situés dans la zone WooCommerce > Réglages de WordPress.

Pour l’expédition, allez dans l’onglet Expédition. Cliquez sur Ajouter une zone d’expédition. Cela vous permet de définir des tarifs d’expédition spécifiques basés sur des zones géographiques.

Vous pouvez également descendre au bas de la page pour configurer l’extension WooCommerce Shipping, qui propose des libellés USPS et DHL imprimables.

Il existe également de nombreux autres modules et extensions WooCommerce pour l’expédition, disponibles pour différentes régions, transporteurs et pour la gestion des envois.

Pour configurer le traitement des paiements, accédez à l’onglet Paiements dans les Réglag de WooCommerce. Installez l’extension WooCommerce Payments pour accepter les moyens de paiement tels que les cartes bancaires et Apple Pay.

Vous pouvez également envisager une autre solution de traitement des paiements comme Stripe, Alipay ou Klarna. Suivez les étapes présentées pour activer le traitement des paiements, comme la saisie de l’adresse de votre entreprise et l’ajout d’un compte chèque pour recevoir les paiements.

Pour les taxes, allez dans l’onglet Général sous WooCommerce. Veillez à ce que l’adresse de votre entreprise soit renseignée ; les taxes et les frais d’expédition sont calculés sur la base de cette adresse.

Faites défiler jusqu’à la case Activer les taxes et cochez-la pour que les taxes soient calculées en fonction de votre adresse lors du paiement.

Cela fait apparaître un nouvel onglet dans les Réglages de WooCommerce appelé Taxes. Sélectionnez-le pour configurer des réglages tels que les classes de taxes supplémentaires, les prix entrés avec les taxes et la manière dont les taxes doivent être calculées.

Comme pour l’expédition, il existe plusieurs extensions de taxes pour WooCommerce que vous pouvez activer pour obtenir des fonctionnalités plus avancées.

6. Configurer une page de boutique dans WooCommerce en utilisant Elementor

Par défaut, WooCommerce génère une page de boutique pour vous. Vous pouvez la trouver en allant dans l’onglet Pages de WordPress.

Cliquez sur Modifier avec Elementor. Il y a aussi un bouton Kits de modèles Elementor pour ajouter rapidement un beau design à votre page de boutique.

Utilisez Elementor pour modifier le style et la mise en forme de la page de la boutique, et envisagez d’insérer un kit de modèles pour accélérer le processus.

Une fois terminé, vous aurez une page Boutique avec une vitrine de vos produits, des outils de filtrage et une barre de recherche.

7. Afficher des collections de produits élégantes avec Elementor

Pour créer une collection de produits – affichée sur votre page d’accueil ou en tant que page de catégorie séparée – nous vous recommandons d’utiliser le créateur de thèmes Elementor ou d’ajouter un simple widget à une page existante.

Dans le constructeur de thèmes, choisissez Archives de produits, puis sélectionnez et enregistrez l’une des mises en page proposées pour les collections de produits.

Vous pouvez affecter ces modèles à la page de votre choix ou créer une page entièrement nouvelle.

D’autre part, vous pouvez aller sur une page déjà créée, l’ouvrir dans Elementor et ajouter le widget Produits à n’importe quelle section pour obtenir une collection de vos produits à l’aspect agréable.

Ensuite, Elementor fournit des réglages pour ajuster le nombre de colonnes, de lignes et le style entier du widget.

8. Personnaliser les pages produits avec Elementor

Les pages de produits sont gérées de la même manière que n’importe quelle autre page dans Elementor.

Une option consiste à ouvrir n’importe quel produit de votre inventaire et à cliquer sur le bouton Modifier avec Elementor.

Pour un contrôle plus granulaire et pour ajouter un design fait par des professionnels, allez dans Modèles > Constructeur de thème dans WordPress. Sélectionnez l’onglet Produit unique et cliquez sur Ajouter.

Vous pouvez opter pour des blocs ou des pages conçus spécifiquement pour les pages de produits WooCommerce.

Ceci vous connecte à la bibliothèque de modèles d’Elementor. Ensuite, vous pouvez insérer n’importe quel bloc ou modèle de page de produit globalement ou dans des pages de produit individuelles.

9. Personnaliser la commande et le panier de WooCommerce avec Elementor

Les prochaines sections concernent la personnalisation des pages de commerce électronique essentielles générées automatiquement par WooCommerce.

Par défaut, ces pages (comme Commande, Panier, et Mon compte) ont un potentiel d’édition limité. Mais avec Elementor, vous avez un contrôle total sur le formatage, le style et l’apparence générale de chacune d’entre elles.

Pour éditer les pages de commande et de panier, allez dans Pages dans WordPress. Faites défiler la page souhaitée et cliquez sur Modifier avec Elementor.

Elementor Pro fournit des widgets de remplacement pour remplacer entièrement le panier/la commande par défaut de WooCommerce.

Trouvez le widget Panier sous WooCommerce et ajoutez-le à votre design. Vous pouvez ensuite supprimer le panier par défaut de WooCommerce.

Vous pouvez ensuite modifier le contenu, le style et les réglages avancés du panier dans Elementor. Sur la page Panier, par exemple, vous pouvez ajuster les couleurs et les polices pour mieux correspondre à votre marque.

Il est également possible d’ajouter des widgets pour du texte supplémentaire, des produits recommandés ou des médias pendant que les clients consultent leur panier. Il existe même des outils pour modifier les coupons, les totaux et le récapitulatif de la commande.

L’édition de la zone de commande est similaire, vous ouvrez la page de commande dans Elementor et faites glisser le widget Commande Elementor dans l’éditeur. Cela remplace le module de commande par défaut de WooCommerce, à condition que vous supprimiez l’ancien.

Une fois inséré et sélectionné, le widget Commande propose des onglets pour le contenu, le style et les réglages avancés.

Elementor propose une série de paramètres avancés qui permettent de personnaliser des éléments tels que la section Votre commande, les détails sur les clients qui reviennent et les informations sur le paiement. Vous pouvez modifier les couleurs, les styles, les tailles, etc.

10. Personnaliser la page Mon Compte avec WooCommerce et Elementor

Pour personnaliser la page Mon Compte par défaut de WooCommerce, ouvrez Pages dans WordPress. Cliquez sur Modifier avec Elementor après avoir fait défiler la page Mon compte.

Supprimez l’ancien module Mon compte et ajoutez la version d’Elementor située en tant que widget sous WooCommerce.

Cela vous permet d’accéder aux réglages de contenu pour les onglets et les options supplémentaires, ainsi qu’aux réglages de style et aux réglages avancés.

Vous pouvez, par exemple, modifier le type de bordure ou la couleur de la page Mon compte pour qu’elle corresponde mieux à votre marque.

Voilà comment créer une boutique en ligne avec l’intégration de WooCommerce Elementor !

Nous vous présentons les meilleurs thèmes et modules Elementor WooCommerce pour vous aider dans le processus de conception.

11 meilleurs thèmes WooCommerce pour Elementor en 2024

Lorsque vous recherchez des thèmes WooCommerce Elementor, il est préférable de cibler les thèmes avec :

• Prise en charge de WooCommerce et d’Elementor
• Design responsive
• Vitesse de chargement des pages rapide
• Compatibilité avec les principaux navigateurs
• Fonctionnalités de commerce électronique essentielles dont vous avez besoin (vous pouvez combler les lacunes avec Elementor et WooCommerce)
• Design qui correspond à votre marque
• Interface propre
• Notes élevées et un support client/une documentation de haute qualité

Vous pouvez consulter nos thèmes WooCommerce préférés pour voir si l’un d’entre eux convient à votre marque. Vous devez cependant vérifier si ces thèmes supportent effectivement Elementor.

D’un autre côté, vous pouvez opter pour les thèmes WooCommerce les plus rapides, en mettant l’accent sur la vitesse avant tout. La bonne nouvelle, c’est que la grande majorité des thèmes fonctionnent à la fois avec WooCommerce et Elementor.

Nous avons une liste des meilleurs thèmes Elementor; certains d’entre eux sont excellents pour WooCommerce, mais ils ne sont pas tous destinés aux boutiques en ligne.

Au cours de nos nombreuses années de recherche sur les thèmes WooCommerce, nous avons sélectionné les meilleurs thèmes WooCommerce Elementor :

1. Astra

Astra offre une intégration transparente avec WooCommerce et, avec Elementor, il fonctionne comme un thème polyvalent pour construire n’importe quel type de site web, y compris les boutiques de commerce électronique.

Il possède une base légère et rapide, de puissantes options de personnalisation et certaines des fonctionnalités les plus conviviales pour modifier les polices, les en-têtes et les pieds de page.

2. Hello Elementor (avec le constructeur Elementor WooCommerce)

Hello Elementor est le thème officiel d’Elementor. Le thème comprend un design épuré, simple et sans fioritures, vous permettant essentiellement de construire n’importe quel type de site.

Nous vous recommandons de le combiner avec le constructeur Elementor WooCommerce pour créer des sites WooCommerce propres et modernes, et parmi les plus rapides du marché.

3. OceanWP

En tant que thème WordPress polyvalent, OceanWP dispose d’une intégration WooCommerce et d’une prise en charge directe pour le constructeur de pages Elementor.

Vous bénéficiez d’un support client de qualité, de mises à jour régulières et d’une documentation complète pour ce thème WordPress léger et rapide.

Il est hautement personnalisable pour améliorer l’apparence de votre marque de commerce électronique, avec des réglages rapides pour tout modifier, des couleurs aux polices et des mises en page aux en-têtes.

4. Shopkeeper

Shopkeeper n’est pas un thème polyvalent mais plutôt un thème destiné aux propriétaires de boutiques de commerce électronique. Une grande partie de l’infrastructure des sites de commerce électronique que nous attendons est déjà construite et prête à l’emploi.

Il y a des modèles pré-construits pour des catégories spécifiques de commerce électronique et une intégration profonde de WooCommerce. Elementor fonctionne bien avec le thème, vous permettant d’ajuster les mises en page, de modifier le panier et de personnaliser à peu près toutes les facettes de votre boutique en ligne.

5. Zakra

Le thème Zakra propose des démonstrations de démarrage pour accélérer le processus de création de votre boutique. Il s’intègre à Elementor et WooCommerce et propose des démos de niche que vous pouvez mettre en œuvre en un seul clic.

Il est considéré comme l’un des thèmes polyvalents les plus rapides du marché, et vous avez le contrôle sur les jeux de couleurs, les polices et les variations de mise en page.

6. Storefront

Peut-être l’un des thèmes de commerce électronique gratuit les plus polyvalents, Storefront inclut un large éventail de fonctionnalités de boutique en ligne dès sa sortie de l’emballage.

Le thème a été développé par les mêmes personnes que WooCommerce, vous savez donc qu’il est conçu pour fonctionner sans problème avec l’extension de commerce électronique. Il fonctionne également bien avec Elementor et offre une simplicité que vous ne trouverez pas ailleurs avec d’autres thèmes de commerce électronique.

7. ShopIsle Pro

Le thème ShopIsle Pro est une solution premium avec une typographie avancée, des démos e-commerce pré-construites, et une intégration profonde avec Elementor et WooCommerce.

Combiné avec le constructeur Elementor WooCommerce, vous pouvez construire un design élégant pour n’importe quelle boutique en ligne, personnaliser les polices et les en-têtes, et lancer une boutique en ligne en quelques minutes. De plus, vous bénéficiez d’un excellent support client et d’une documentation sur le thème.

8. Neve

Le thème Neve offre des fonctionnalités polyvalentes avec une interface rapide et légère. Avec Elementor, vous êtes en mesure de construire un site web pour n’importe quelle industrie, en particulier dans le monde du commerce électronique.

Le thème permet d’ajouter une vue rapide des produits, ainsi que des avis de panier et des filtres de boutique « hors-canva ». Nous l’aimons aussi pour ajuster les dispositions du panier WooCommerce ou pour mettre en place un panier épinglé.

Le thème Neve est livré avec une myriade de sites de démarrage conçus spécialement pour les boutiques de commerce électronique.

9. Customify

L’idée derrière le thème Customify est de construire virtuellement n’importe quel type de site web, blog, ou boutique en ligne, car il exploite des options de personnalisation profondes pour les styles, les polices, et les zones de widgets.

En ce qui concerne la boutique en ligne, l’intégration de WooCommerce Elementor vous permet de présenter facilement les produits et de modifier l’ensemble de l’expérience de commande sans aucune connaissance en matière de codage.

10. GeneratePress

Le thème WordPress GeneratePress est une solution polyvalente avec le support de WooCommerce et Elementor. Son principal avantage par rapport aux autres thèmes est sa légèreté, mais aussi sa conception modulaire.

Par conséquent, vous pouvez essentiellement activer et désactiver les modules en fonction de vos besoins et utiliser la personnalisation en direct pour contrôler au maximum les exigences de votre marque en matière de design.

11. Phlox

Le thème WordPress Phlox est encore un autre thème polyvalent qui présente une forte expérience de construction de site pour les développeurs WooCommerce et Elementor.

Toutes les démos en un clic s’intègrent directement dans le design et offrent une apparence moderne sans trop de travail de votre part. Vous pouvez également personnaliser la plupart des aspects d’une boutique en ligne, du panier d’achat à la façon dont les produits s’affichent sur un appareil mobile.

Nous vous encourageons à explorer ces thèmes et à les tester avec WooCommerce et Elementor. Lorsque vous prendrez votre décision, vous voudrez peut-être avoir un contrôle total, ce qui signifie qu’un thème polyvalent pourrait vous convenir.

D’autres utilisateurs, cependant, veulent que leur thème ressemble et agisse comme un site de commerce électronique dès le départ. Dans ce cas, optez pour un thème comme Storefront ou ShopIsle Pro pour une expérience plus orientée vers le commerce électronique.

Vous pouvez également vous tourner vers les modules WooCommerce pour Elementor afin d’étendre le nombre de widgets et de fonctionnalités dans Elementor. Consultez-les ci-dessous.

Les 5 meilleurs modules WooCommerce pour Elementor

Il existe plusieurs extensions WooCommerce essentielles à ajouter à votre boutique dès le départ. Cependant, nous vous recommandons de rechercher des modules complémentaires et des extensions plus spécifiques qui non seulement s’intègrent à WooCommerce mais étendent également les fonctionnalités d’Elementor.

Voici nos modules WooCommerce Elementor préférés :

1. HappyAddons

L’extension Happy Addons est en fait une collection de widgets et de modules conçus spécifiquement pour Elementor. Parmi les exemples de widgets de Happy Addons, on trouve un méga menu, une navigation sur une page, un panier WooCommerce et un kit d’articles de blog.

Certains widgets spécifiques à WooCommerce sont destinés aux carrousels de produits, aux grilles, aux commandes et aux mini-paniers. Il existe même des widgets pour améliorer d’autres aspects de votre boutique en ligne, comme les articles de blog, les graphiques, le marketing et les réseaux sociaux.

2. PowerPack for Elementor

PowerPack for Elementor propose une large gamme de widgets uniques pour les sites WooCommerce utilisant Elementor. Avec plus de 70 widgets Elementor, vous pouvez incorporer des fils d’Ariane, des témoignages, des boutons et bien plus encore.

Il y a une bibliothèque de modèles pour ajouter immédiatement des designs et des widgets WooCommerce spéciaux pour des choses comme la page Mon compte, le style de la page de commande et le bouton d’ajout au panier.

3. WooLentor

WooLentor est un module pour le constructeur de pages Elementor, car il améliore le constructeur de pages WooCommerce et offre des fonctionnalités pour la personnalisation des e-mails.

Le module comprend un gestionnaire de champs de commande et des options permettant d’accepter des paiements partiels de la part des clients. Il y a même une option pour que les clients suggèrent des prix ou pour que vous fassiez une offre spéciale pour la journée.

4. Essentials Addons for Elementor

La solution Essential Addons dispose d’une version gratuite et d’une version premium. Ce module améliore l’expérience de construction de pages dans Elementor avec des widgets pour les tableaux de prix, les grilles de produits, les appels à l’action, et plus encore.

Certains des éléments premium comprennent une carte Google avancée, un flux Instagram et des conceptions parallaxe.

5. JetWooBuilder

JetWooBuilder est un module WooCommerce Elementor de Crocoblock, un autre module Elementor qui vaut la peine d’être examiné. L’option JetWooBuilder permet de mélanger et d’associer des éléments tels que des modèles personnalisés, des commutateurs de mise en page et des pages spécifiques à la boutique.

Vous pouvez configurer des types de carrousels et des cartes de catégories avec facilité tout en créant des pages de produits uniques à partir d’un modèle élégant.

Plus important encore, le module JetWooBuilder offre un contrôle absolu sur votre page de boutique, en vous aidant à configurer des filtres intelligents avancés.

Quand considérer Elementor Pro vs Elementor ?

Vous vous demandez peut-être : « Quelle est la différence entre Elementor et Elementor Pro ? »

Heureusement, la version gratuite d’Elementor est plutôt puissante et inclut la plupart des fonctionnalités dont vous aurez besoin pour construire un site web ou une boutique en ligne avec la fonctionnalité de glisser-déposer. Cela dit, les outils WooCommerce s’améliorent considérablement lorsque vous passez à Elementor Pro.

Tout d’abord, regardons la différence de prix entre Elementor et Elementor Pro :

• Elementor : Gratuit
• Elementor Pro : À partir de 59 $ par an. Les autres plans sont à 99 $, 199 $ et 399 $ par an

Les mises à jour servent généralement à prendre en charge des sites web supplémentaires avec le même abonnement Elementor, et non à obtenir davantage de fonctionnalités.

Cependant, le passage d’Elementor à Elementor Pro offre de nouvelles fonctionnalités.

Elementor (gratuit) offre :

• Une personnalisation de base du constructeur de thèmes
• Des modèles et des blocs limités
• Une exportation et une importation de modèles
• L’édition mobile
• Plus de 40 éléments de conception tels que des témoignages, des boutons, des boîtes d’icônes, des éditeurs de texte, etc

Voici ce que vous obtenez avec Elementor Pro (qui n’est pas inclus dans Elementor Basic) :

• Personnalisation de chaque partie de votre thème
• Conception et intégration de formulaires
• Tous les blocs et modèles professionnels
• Tous les widgets professionnels
• Un constructeur de popups
• Un effets de défilement
• Un constructeur d’en-tête et de pied de page
• Plus de 30 widgets et éléments de conception supplémentaires tels que les blocs de citations, la pagination de blog, le compte à rebours et la disposition en maçonnerie
• Des éléments de design spécifiques à WooCommerce comme Catégories WC, Produits WC, et Ajouter au panier WC

Quand passer d’Elementor à Elementor Pro ?

La réponse à cette question est simple. Passez à Elementor Pro :

• Si vous souhaitez bénéficier de la plupart des fonctionnalités du constructeur WooCommerce, comme la modification et les modèles pour la section Ajouter au panier, les catégories et les produits
• Si vous voulez avoir un contrôle complet sur la personnalisation de votre boutique en ligne
• Si vous voulez commencer à utiliser des éléments supplémentaires comme un effet Ken Burns, un widget de connexion ou une boîte de retournement

Les utilisateurs de WooCommerce devraient vraiment passer à la version Pro d’Elementor pour une meilleure expérience.

Résumé

Dans cet article, nous avons mis en évidence les caractéristiques qui rendent WooCommerce et Elementor spéciaux et nous avons montré comment ils s’améliorent l’un l’autre lorsqu’ils sont combinés. Nous avons également présenté un tutoriel étape par étape sur la façon de construire une boutique de commerce électronique avec l’intégration de WooCommerce Elementor.

Au cours de ce processus, n’oubliez pas de consulter notre liste des meilleurs modules et thèmes Elementor. Vous aurez ainsi une longueur d’avance par rapport à ceux qui conçoivent leur boutique à partir de zéro.

Gardez à l’esprit qu’il est essentiel de choisir une solution d’hébergement rapide et sécurisée comme Kinsta pour toute opération de commerce électronique. Kinsta propose également l’hébergement Elementor, qui est alimenté par les machines C2 de Google Cloud afin d’offrir les meilleures performances possibles.

Qu’aimeriez-vous apprendre de plus sur WooCommerce et Elementor ? N’hésitez pas à nous en faire part dans la section des commentaires ci-dessous.