Comment créer un site WooCommerce alimenté par Elementor

Il ne suffit pas que la plate-forme WordPress elle-même soit le système de gestion de contenu (CMS) le plus populaire au monde. Nous avons également les plateformes de création de pages et de commerce électronique les plus populaires dans Elementor et WooCommerce. En tant que tel, il est logique d'utiliser les trois pour créer une boutique en ligne stellaire et performante.

Si nous le décomposons, WordPress est idéal pour organiser vos publications, pages et produits. WooCommerce offre une intégration étroite avec la plateforme grâce à ses développeurs (Automattic). De plus, Elementor apporte une création de page puissante et intuitive par glisser-déposer. C'est une solution complète sans code pour construire votre magasin.

Dans cet article, nous allons voir comment créer une boutique en utilisant Elementor et WooCommerce. Tout au long, nous verrons comment les deux s'harmonisent pour vous offrir la plus grande flexibilité pour votre site.

Pourquoi WordPress, Elementor et WooCommerce fonctionnent bien ensemble

Il vaut la peine d'examiner de plus près comment WordPress, Elementor et WooCommerce peuvent se combiner pour vous aider à créer des boutiques en ligne haut de gamme.

Pour commencer, WordPress est le CMS le plus utilisé sur le marché. Bien sûr, cela ne suffit pas à justifier une telle position dominante parmi les utilisateurs. En fait, nous avons examiné cela dans un article précédent, nous vous encourageons donc à lire cet article plus en détail. En bref, il s'agit d'une plate-forme sécurisée, stable et évolutive sur laquelle vous pouvez construire.

En parlant de cela, vous avez également WooCommerce. Parce qu'Automattic développe le plugin, il a une excellente intégration avec le noyau WordPress, mais ce n'est pas tout.

C'est aussi la plateforme de commerce électronique la plus populaire. Au sein de l'écosystème WordPress, il détient une part d'environ 20 %, ce qui se traduit par environ 8 % de tous les sites Web. En comparaison, Shopify détient environ 5 à 6 % de part de marché. Encore une fois, les chiffres d'utilisation ne sont pas tout.

WooCommerce prend le processus de création d'une boutique en ligne et rationalise le processus. Vous pouvez être opérationnel en quelques minutes et disposer d'une plate-forme de commerce électronique robuste, puissante et extensible prête à l'emploi.

Pour les tricoter ensemble, vous avez Elementor. Il a également une grande part de marché dans son domaine et une base d'utilisateurs massive.

Il s'agit d'un constructeur de pages par glisser-déposer avec une approche unique pour vous aider à créer l'intégralité de votre site Web à partir de zéro. C'est une solution tentante à utiliser, car il existe de nombreuses fonctionnalités puissantes et des fonctionnalités que d'autres outils n'ont pas. Le plus pertinent ici est le WooCommerce Builder dédié.

En bref, Elementor est un plugin avec beaucoup de colonnes sur le blog WPKube, et vous devriez parcourir nos archives pour voir exactement ce qu'il peut faire.

Ce dont un site WooCommerce a besoin d'un constructeur de pages

La conclusion implicite de la dernière section est qu'Elementor peut fournir le bon mélange de fonctionnalités et de fonctionnalités dont WooCommerce a besoin pour faire passer votre site au niveau supérieur. Cependant, il est important de préciser pourquoi il en est ainsi et ce qu'il offre.

De manière générale, un site WooCommerce a besoin des éléments suivants d'un constructeur de pages :

• Intégration étroite, de sorte qu'il n'y ait pas de conflits entre le constructeur de pages et WooCommerce.
• De nombreuses options de personnalisation pour vous aider à faire ressortir vos produits et vos pages de boutique.
• Un moyen de modifier les éléments individuels qui composent une page de produit typique.
• Fonctionnalité supplémentaire pour vous aider à "améliorer" votre magasin.

Vous devez (bien sûr) noter également vos besoins individuels. Par exemple, vous pouvez trouver que les formulaires et les fenêtres contextuelles sont importants pour votre magasin et votre stratégie de vente. La bonne nouvelle est qu'Elementor est plus que capable de répondre à vos besoins.

Par exemple, il a un excellent Popup Builder qui fonctionne très bien pour les ventes, les offres limitées dans le temps, les coupons et bien plus encore :

Vous pouvez les créer comme vous le feriez avec d'autres modèles de page et vous pouvez les appliquer en un clin d'œil. De plus, vous pouvez les personnaliser de presque toutes les manières que vous souhaitez. C'est parfait si vous avez une campagne spécifique à promouvoir sur votre site.

Comment choisir un thème WooCommerce approprié

Nous n'entrerons pas dans les détails ici, car nous le couvrons dans notre tutoriel, et arrondissons également quelques thèmes dans un article dédié.

La principale considération dont vous avez besoin dans ce cas est un thème compatible Elementor et WooCommerce. Même un rapide coup d'œil sur les sites de marché premium vous montrera que de nombreux thèmes en font la publicité, de sorte que vos choix sont très variés.

Malgré tout, il y a quelques thèmes remarquables que nous pouvons mentionner :

• Vitrine. Il aura probablement le moins de compatibilité avec Elementor à l'avenir, car l'éditeur de blocs est une technologie native. Toujours,
• Bonjour. Il s'agit du thème de démarrage vierge d'Elementor, idéal pour développer un site WooCommerce à partir de zéro. Bien sûr, si vous disposez de moins de temps, il peut être judicieux de choisir un autre thème plus complet.
• GénérerPress. C'est un thème de premier plan avec une infrastructure flexible. Cela signifie que, que vous utilisiez l'éditeur de blocs, Elementor ou autre chose, votre magasin aura fière allure.

Nous vous encourageons à trouver le bon thème avant de vous lancer dans la création de votre site. N'oubliez pas que les meilleurs résultats seront avec quelque chose de compatible avec Elementor et WooCommerce.

Comment créer un site WooCommerce alimenté par Elementor en 3 étapes

Dans la suite de cet article, nous allons vous montrer comment utiliser Elementor et WooCommerce ensemble pour créer un site e-commerce. Trois étapes sont à noter :

• Installez et configurez WooCommerce.
• Créez vos gammes de produits WooCommerce et utilisez Elementor pour créer les pages de produits.
• Concevez une page de boutique dédiée, toujours en utilisant Elementor.

Cependant, pour ce didacticiel, nous allons supposer que Elementor Pro est déjà installé et activé. C'est quelque chose que nous vous expliquons dans notre article sur la création d'un entonnoir WordPress. Ce message vous aidera lorsque vous rencontrez des problèmes.

1. Installez WooCommerce et configurez-le

Il y a deux aspects à prendre en compte lorsque vous configurez une installation WooCommerce : le plugin lui-même et les paramètres de votre boutique. En fait, l'installation du plugin prend le même processus que n'importe quel autre plugin WordPress.

En ce qui concerne la configuration de WooCommerce lui-même, bien que vous puissiez être prêt à partir en quelques minutes, il est avantageux de prendre un peu plus de temps pour parcourir l'assistant de configuration.

En ce qui concerne ce point de la configuration, nous avons ce qu'il vous faut. En fait, nous avons un tutoriel complet sur WooCommerce qui détaille étape par étape comment démarrer avec WooCommerce et créer votre premier produit. C'est un bon message à ouvrir dans un onglet de rechange pendant que vous parcourez celui-ci. Les informations qu'il contient seront précieuses pour la prochaine série d'étapes.

2. Créez vos produits WooCommerce

Une fois que vous avez une installation WooCommerce en place et en marche, vous devriez envisager de créer des produits en arrière-plan. Encore une fois, notre didacticiel WooCommerce explique comment procéder en détail, mais voici les notes de Cliff :

• Dirigez-vous vers l'onglet Produits> Ajouter un nouveau dans WordPress.
• Remplissez le nom de votre produit et une courte description.
• Utilisez les méta-boîtes WooCommerce pour remplir les données de votre produit, telles que le prix.
• Ajouter une image.
• Publiez votre produit.

Cependant, c'est ici qu'Elementor montre son premier mouvement puissant - le WooCommerce Builder. C'est une façon d'utiliser le constructeur de pages pour créer le design de vos pages de produits.

Pour commencer, cliquez sur Modèles > Ajouter nouveau dans WordPress :

À partir de là, sélectionnez Produit unique dans la liste déroulante Type de modèle et saisissez un nom facultatif :

Cela ouvrira la bibliothèque de modèles pour afficher chaque bloc prédéfini dans :

Une fois que vous voyez un design que vous aimez, cliquez sur le bouton Insérer et Elementor importera le bloc :

C'est un moyen rapide de créer une page de produit dédiée. Vous pouvez prendre ce bon départ et en ajouter d'autres. Elementor inclut un certain nombre de widgets dédiés pour vous aider à créer des pages spécifiques à WooCommerce :

Une fois que vous avez une mise en page qui vous plaît, cliquez sur le bouton vert Publier en bas de l'écran :

Cela fera apparaître une fenêtre contextuelle pour vous aider à configurer une condition spécifique pour afficher le modèle :

Lorsque vous êtes prêt, cliquez sur Enregistrer et fermer . À partir de là, vous pouvez ajouter plus de produits à votre boutique, travailler sur plus de modèles ou commencer à travailler sur une page de boutique dédiée.

3. Concevez votre page de boutique dédiée à l'aide d'Elementor et de WooCommerce

Une expérience utilisateur (UX) pratique de WooCommerce est la façon dont il génère la plupart des pages nécessaires dont vous avez besoin pour votre boutique. La page Shop de niveau supérieur est la plus importante, car il s'agit de l'auvent avant qui décore la porte.

Si vous utilisez WordPress et WooCommerce avec un thème spécifique à WooCommerce tel que Storefront, votre principal port d'escale pour personnaliser la page Boutique est via le Customizer. Cependant, nous nous concentrons sur Elementor. La façon de le faire avec le constructeur de page est d'utiliser une page d' archives de produits .

Cela vous permet de personnaliser l'affichage des produits sur votre site, mais ne gère pas le reste de votre page. Dans certains cas, il peut être difficile de gérer deux ensembles de personnalisations et de paramètres, mais d'après notre expérience, cela n'a pas posé de problème jusqu'à présent.

Comme pour les produits individuels, vous devrez vous diriger vers Templates > Add New dans WordPress, puis choisir Products Archive dans le menu déroulant :

Encore une fois, vous pouvez choisir un bloc, modifier une page à partir de rien ou combiner les deux pour créer quelque chose d'unique. Comme auparavant, vous pouvez utiliser n'importe lequel des widgets spécifiques à WooCommerce pour vous aider à concevoir une page à votre goût.

Une fois que vous cliquez à nouveau sur le bouton Publier et que vous accédez à la boîte de dialogue Paramètres de publication, vous pouvez invoquer la magie. Dans sa forme de base, vous pouvez inclure le nouveau template sur la Page Boutique :

Cependant, ce n'est pas tout. Vous pouvez ajouter d'autres conditions d'inclusion pour utiliser le modèle à plusieurs endroits sur votre site. C'est excellent pour la continuité et donner aux visiteurs une raison de visiter votre magasin.

Une note rapide sur les autres pages générées par WooCommerce

Avant de conclure, nous souhaitons mentionner les autres pages WooCommerce générées. La mauvaise nouvelle est qu'ils ne tombent pas sous le regard d'Elementor. En d'autres termes, vous ne pouvez pas modifier des pages telles que les pages de paiement ou de remerciement sans une extension WooCommerce supplémentaire.

C'est décevant, mais compréhensible. Même ainsi, vous pouvez toujours utiliser Elementor pour développer les éléments environnants, puis déposer la fonctionnalité de page spécifique avec des codes abrégés. Bien que ce ne soit pas idéal.

Si l'édition complète de ces pages est importante pour vous, vous voudrez consulter l'éditeur de champ de paiement (49 $ par an) et l'extension Pages de remerciement personnalisées (également 49 $ par an).

En conclusion

Qu'est-ce qui pourrait mal tourner lors de l'utilisation de trois des outils les plus populaires pour publier une boutique en ligne ? Dans ce cas, il n'y a pas grand chose. WordPress, Elementor et WooCommerce offrent tous une expérience exceptionnelle. Les combiner peut vous donner le nec plus ultra en matière de création et de gestion d'une boutique en ligne.

Tout au long de cet article, nous avons examiné comment utiliser Elementor et WooCommerce ensemble pour créer une boutique. Une fois que vous avez installé et activé les deux plugins, votre première tâche consiste à créer des produits avec leurs pages associées. À partir de là, vous avez besoin d'une page de boutique dédiée - quelque chose qu'Elementor est capable de gérer. De plus, les fonctionnalités supplémentaires du plug-in de création de pages (telles que le générateur de fenêtres contextuelles, etc.) peuvent vous aider à faire entrer votre boutique dans la stratosphère.

Vous souhaitez créer une combinaison Elementor et WooCommerce pour votre prochaine boutique, et si oui, cet article vous aidera-t-il ? Faites-nous savoir dans la section commentaires ci-dessous!