Pages WooCommerce avec Elementor
Publié: 2021-11-23WordPress nous facilite la vie grâce à ses fonctionnalités étonnantes pour la création de votre site Web, en particulier les boutiques en ligne WooCommerce. Il n'y a rien de plus simple que de concevoir vos pages WooCommerce avec Elementor car vous n'aurez pas du tout à gérer les codes.
Mais vous vous demandez peut-être encore pourquoi Elementor ? Eh bien, c'est parce que c'est l'outil parfait pour concevoir des sites Web d'achat en ligne dans WooCommerce que même une personne non technique pourrait faire. Elementor rend cela possible en vous faisant vivre une expérience de création de site écrasante.
Alors, êtes-vous prêt à concevoir des pages WooCommerce avec Elementor ? Laissez-nous vous guider avec des étapes précises sur la facilité avec laquelle vous pouvez obtenir des pages WooCommerce dynamiques à l'aide du constructeur de pages Elementor.
Commençons!
Elementor est-il compatible avec WooCommerce ? Pourquoi aller avec ?
Pour un site Web WooCommerce réussi, la conception Web est très importante. Cela nécessite une interface de site assez attrayante et des fonctionnalités soigneusement emballées pour attirer l'attention de vos clients sur votre entreprise.
WordPress est déjà une plate-forme géniale où vous pouvez facilement concevoir des sites Web. Mais Elementor facilite encore plus la création de magnifiques sites Web en quelques minutes. Le plugin est très puissant et est équipé de widgets qui permettent d'ajouter des fonctionnalités et des fonctionnalités à votre site Web.
Mais, Elementor est-il compatible avec WordPress ? Oui c'est le cas. En fait, Elementor est hautement compatible avec WordPress et tout ce qu'il contient. Concevoir des pages WooCommerce avec Elementor est simple, flexible et un jeu d'enfant même pour un débutant.
Tout simplement parce que n'importe qui, quelles que soient ses connaissances en codage, peut concevoir des sites Web avec Elementor, il s'agit du meilleur outil du hangar à utiliser. Il n'est pas surprenant que plus de 5 millions de personnes utilisent Elementor pour créer leurs propres sites Web aujourd'hui.
Alors, prêt pour le show principal ? Laissez-moi vous guider sur la bonne manière de créer et de personnaliser vos pages WooCommerce avec Elementor ci-dessous.
Créer des pages WooCommerce avec Elementor
Comme nous le disions, créer vos pages WooCommerce avec Elementor n'est pas une tâche difficile. Tout est simplifié avec WordPress, tout comme l'ensemble de la procédure de cette tâche. Alors, voici comment nous l'avons fait-
Tout d'abord, vous devez faire des préparatifs tels que l'installation des plugins requis pour WordPress-
- Votre site WordPress
- Elementor Page Builder (gratuit et Pro)
- WooCommerce (gratuit)
- Element Pack Lite (gratuit)
Une fois que vous avez terminé la configuration initiale comme l'achat de domaine et d'hébergement, la configuration de WordPress sur votre site Web, l'installation des plugins Elementor, WooCommerce, Element Pack Lite, etc. Cela peut prendre un certain temps pour configurer tout ce qui est nécessaire pour faire fonctionner votre site Web.
En particulier, la configuration de WooCommerce nécessite quelques minutes et vous devez remplir toutes sortes d'informations, y compris les informations de paiement, l'expédition, les contacts personnels, etc.
Une fois que vous êtes revenu au tableau de bord, la configuration est terminée et vous êtes prêt à créer des pages WooCommerce avec Elementor.
Notez qu'Elementor et WooCommerce ont tous deux un bon nombre de widgets pour ajouter les fonctionnalités WooCommerce à votre site Web. Mais encore, cela ne suffit pas pour s'immerger complètement dans les fonctions appropriées de WooCommerce ou de la conception Web.
C'est pourquoi nous avons besoin d'un plugin d'aide comme Element Pack Lite pour enrichir le site Web à la fois par la conception et les fonctionnalités. Passons maintenant à la phase de conception.
Personnalisez facilement les pages WooCommerce avec Elementor
Comme le constructeur de pages Elementor vous permet d'importer des modèles prêts à l'emploi, il est très facile de travailler avec des modèles, puis de l'appeler simplement dans les pages et de commencer à les personnaliser. De plus, Elementor dispose déjà de plus de 10 widgets simples pour WooCommerce pour créer une base de votre page de boutique.
Mais une fois que vous aurez récupéré tous les plugins nécessaires, y compris Element Pack Pro, vous obtiendrez plus qu'assez de widgets pour couvrir tout le terrain de votre site Web WooCommerce. Ainsi, il n'y a pas de place pour se sentir supprimé lors de la conception de vos pages Web.
Mais avant cela, assurez-vous que les plugins sont à jour à moins qu'ils ne fonctionnent pas comme ils le devraient.
Étape 1 : Créons un modèle de page WooCommerce
Pour commencer, accédez à la section de création de modèles de votre site Web WordPress. Allez simplement dans Tableau de bord> Modèles> Ajouter un nouveau
En appuyant sur le bouton "Ajouter un nouveau", une fenêtre contextuelle s'affichera dans laquelle vous devrez créer le modèle. Plusieurs options sont disponibles ici et vous devez choisir celle qui se lit comme "Produit unique". Comme nous allons créer une page WooCommerce pour les produits, c'est le paramètre que nous recherchons.
De plus, assurez-vous que Elementor Pro est installé. Sinon, ces options ne seront pas visibles.
Ajoutez simplement un nom de modèle à côté pour identifier facilement le modèle pour une utilisation future.
Cliquez ensuite sur le bouton "Créer un modèle" et commencez à mettre des éléments dans la page pour créer vos prochaines pages WooCommerce avec Elementor.
Étape 2 : Insertion de modèles de page
Maintenant que vous êtes prêt à créer votre modèle de page WooCommerce, vous pouvez le faire de deux manières, soit en partant de zéro, soit en prenant un modèle prêt et en le personnalisant.
Il n'y a pas beaucoup de différence entre les deux options, juste le temps nécessaire pour compléter le modèle. Pour faciliter l'utilisation, ajoutons d'abord un modèle prêt.
Cliquez simplement sur l'icône Element Pack Template Library pour ouvrir la bibliothèque dans l'éditeur de page.
Tout ce que vous avez à faire est de naviguer dans la bibliothèque de modèles et de choisir la conception de page appropriée qui correspond au thème de votre boutique. Une fois que vous en avez trouvé un, survolez simplement le modèle et cliquez sur le bouton "Insérer".
Notez que vous pouvez également utiliser les modèles de page WooCommerce d'Elementor Pro. Une fois que vous avez personnalisé un modèle, il s'agira d'un design unique qui ne sera pas similaire au modèle lui-même.
Étape 3 : Ajouter et personnaliser des fonctionnalités
Il est très important de connaître les fonctionnalités dont vos clients profiteraient avant de commencer à verser des widgets dans la page de modèle. Vous pouvez toujours opter pour un nouveau contenu ou personnaliser la mise en page actuelle pour d'autres améliorations.
Il existe un tas de widgets fournis par Elementor qui ajouteront plus de piquant à votre site Web WooCommerce. Avec ces widgets, vous pouvez facilement concevoir votre page WooCommerce partie par partie et créer un site Web complet.
Voyons d'abord les widgets disponibles-
- Titre du produit
- La description
- Ajouter au panier
- Prix du produit
- Image
- Notation
- La quantité de produit
- Méta
- Chapelure
- Produits connexes
- Produits en stock et en rupture de stock
Voici une page de produit WooCommerce personnalisée utilisant les éléments de la liste ci-dessus.
C'est une bonne tactique de garder la conception de la page produit au minimum afin d'amener vos visiteurs à se concentrer davantage sur les produits. Quoi qu'il en soit, vous pouvez maintenant distinguer les fonctionnalités et savoir comment concevoir votre page.
Étape 4 : bouton de panier pour les pages WooCommerce
Avoir suffisamment de boutons CTA actifs sur votre site Web WooCommerce est un bon moyen d'engager vos visiteurs et d'honorer les clients potentiels. Le CTA attire non seulement les clients, mais rend également votre site attrayant pour les visiteurs.
Il est très facile d'ajouter des boutons CTA ou "Ajouter au panier" sur vos pages WooCommerce avec Elementor. Cependant, il existe deux types de boutons "Ajouter au panier" disponibles dans Elementor, un statique et un dynamique.
L'utilisation du statique est le moyen le plus rapide d'ajouter un CTA à vos pages, mais il manque les contrôles pour les styles. Nous vous recommandons d'utiliser un bouton CTA dynamique à l'aide du widget d'Element Pack pour WooCommerce, le "WC- Ajouter au panier".
Ici, vous pouvez personnaliser le bouton du panier pour qu'il apparaisse bien en contraste avec vos produits. Vous pouvez toujours personnaliser la couleur, l'arrière-plan, la bordure, le rembourrage, l'alignement, l'étiquette, l'icône, la taille, etc. du bouton.
Tout ce que vous avez à faire est de faire correspondre la hauteur des boutons en fonction du niveau des yeux des utilisateurs. Gardez à l'esprit que la position du bouton est très importante car elle a un impact sur la décision des utilisateurs d'acheter le produit.
Étape 5 : Configurer les pages d'archives de produits WooCommerce avec Elementor
Jusqu'à présent, vous avez terminé des pages de produits uniques sur WooCommerce. Maintenant, vous devez créer une page d'archives de produits pour présenter vos produits en masse et aider vos visiteurs à naviguer facilement.
Faisons-en un pour nous tout de suite. Comme avant, accédez à votre tableau de bord WordPress, accédez au menu Modèles et cliquez sur "AJOUTER UN NOUVEAU".
Cette fois, faites défiler vers le bas et sélectionnez l'option Archive des produits pour le modèle avec un nom pour l'identifier plus tard.
Maintenant, terminez en cliquant sur le bouton Créer un modèle . Attendez que la page de l'éditeur Elementor s'affiche.
Lorsque vous voyez la page vierge, vous pouvez commencer à travailler avec un autre modèle prêt pour la page d'archive ou créer le vôtre à partir de zéro. Elementor a un assez grand nombre de widgets pour former les morceaux de la page d'archive.
Mais, vous pouvez ignorer le processus de remue-méninges et utiliser les widgets du plugin Element Pack Pro. Il possède certaines fonctionnalités WooCommerce qui combinent plusieurs parties de l'interface pour former une image complète.
Jetez un oeil à la liste ci-dessous-
- Carrousel de portefeuille
- Curseur de l'appareil
- Carrousel personnalisé
- Curseur WooCommerce
- Produits WooCommerce
- Carrousel WooCommerce
- Catégories WooCommerce
En utilisant ces widgets, vous pouvez développer de superbes pages WooCommerce avec Elementor pour les archives de produits.
Ceci n'est qu'un petit exemple. Il y a plus de choses que vous pouvez faire et seul le ciel est la limite.
Étape 6 : Personnalisez la conception de la page avec Element Pack Pro
Jusqu'à présent, vous avez créé des pages WooCommerce avec Elementor, sauf que vous n'avez apporté aucune modification significative à la conception. Elementor est un excellent outil lui-même pour personnaliser l'interface, il manque toujours des contrôles de conception sophistiqués.
Mais ne vous inquiétez pas, vous avez Element Pack Pro pour terminer le travail inachevé pour vous. Cet outil est très célèbre pour les contrôles de personnalisation de chacune de ses fonctionnalités (plus de 200 fonctionnalités). Ainsi, vous pouvez avoir un en-tête animé, une galerie animée, un carrousel de produits, une grille, un curseur, un flou de section, un lien d'emballage et d'autres fonctionnalités étonnantes au même endroit.
Par exemple, montrons comment notre carrousel WooCommerce peut être personnalisé selon vos goûts.
Étape 7 : Publication de pages WooCommerce avec Elementor
Maintenant que tout est prêt, nous avons créé la page de produit unique, la page d'archives et fini de préparer les conceptions de page, il est temps de mettre les pages dans le site Web en direct.
Après avoir enregistré les modèles, vous pouvez simplement accéder au tableau de bord, dans la page où vous souhaitez placer les produits ou les archives, et y appeler les modèles. Simple et facile. Vous n'avez même pas besoin de dupliquer la page car vous pouvez utiliser les modèles enregistrés à tout moment.
C'est ainsi que vous travaillez avec des modèles pour créer de superbes pages WooCommerce avec Elementor.
Détendez-vous tout en concevant des pages WooCommerce complexes en quelques minutes
Concevoir des pages WooCommerce avec Elementor est moins compliqué et plus amusant lorsque vous savez exactement ce que vous faites. En tant que logiciel convivial pour les débutants, Elementor vous permet de maîtriser rapidement les bases sans avoir besoin d'une troisième main.
C'est tout!
Utilisez la section des commentaires pour toute question liée à cet article ou vous pouvez utiliser l'option LiveChat pour nous parler directement. Merci d'être resté debout.
Être prudent.