Utiliser Elementor et WooCommerce pour une boutique eCommerce performante
Vous souhaitez ouvrir votre premier magasin WooCommerce ? Ou peut-être avez-vous déjà créé des boutiques WooCommerce pour un ami ou client, mais souhaitez-vous créer de meilleures boutiques de commerce électronique personnalisées et rapides ?
Dans cet article, je vais vous expliquer comment construire une boutique WooCommerce en utilisant Elementor WooCommerce Builder. C'est un générateur de pages WordPress visuel, par glisser-déposer, qui vous donne un contrôle total sur la conception de votre boutique et de vos pages de produits.
Les sujets abordés sont les suivants :
- Que sont Elementor et WooCommerce ?
- Avantages de l'utilisation de Elementor WooCommerce Builder
- Mettre en place et configurer WooCommerce
- Concevez la ou les pages d'archives de votre magasin
- Concevoir une page de produit unique
- Inclure les produits de WooCommerce dans d'autres dessins ou modèles selon les besoins
Qu'il s'agisse de votre premier magasin ou de votre cinquantième, vous découvrirez un flux de travail plus simple qui vous évitera de devoir modifier directement les fichiers de modèles WooCommerce ou de vous salir les mains avec de l'édition de code.
Que sont Elementor et WooCommerce ?
Pour commencer, au cas où vous ne le sauriez pas, voici un rapide aperçu de ce que sont Elementor et WooCommerce.
Elementor est le constructeur de pages WordPress le plus léger et gratuit. Il vous permet de créer un site web d'une beauté incroyable de la manière la plus rapide possible. Vous pouvez atteindre un niveau de personnalisation élevé, en concevant en direct et en frontal de votre site WordPress.
WooCommerce est un plugin WordPress gratuit qui intègre des fonctionnalités de commerce électronique pour votre site afin que vous puissiez avoir une boutique en ligne.
Il s'intègre facilement à votre site WordPress existant, vous permettant de créer des boutiques personnalisables en quelques minutes, d'obtenir des paiements sécurisés, des options d'expédition configurables, et bien plus encore.
"Elementor WooCommerce Builder" vous aide à créer une boutique en ligne
Le plugin gratuit Elementor vous aide à concevoir votre contenu WordPress à l'aide d'une interface visuelle, par glisser-déposer. Vous pouvez utiliser des widgets pour ajouter du contenu à votre site et contrôler presque tous les aspects de la mise en page et des styles de vos créations.
Avec Elementor Pro, vous avez ensuite accès à Elementor WooCommerce Builder, qui vous permet de concevoir des modèles dynamiques pour vos archives de produits (catégories) et vos pages de produits uniques en utilisant le même éditeur visuel.
Avec WooCommerce Builder, vous pouvez aisément créer une boutique WooCommerce entièrement personnalisée sans jamais avoir besoin de travailler directement avec des fichiers de modèles PHP ou des crochets WooCommerce.
Avantages de l'utilisation d'Elementor WooCommerce Builder :
- Conception visuelle, par glisser-déposer : Vous pouvez concevoir votre boutique WooCommerce exactement comme vos visiteurs le verront. Vous pouvez même prévisualiser différents produits pour voir à quoi ils ressemblent avec vos designs
- Pas de code PHP : Plutôt que de travailler directement avec des fichiers PHP et/ou des modèles, vous pouvez tout concevoir à partir de l'interface Elementor
- WooCommerce et widgets dédiés : Vous obtiendrez des widgets dédiés pour inclure toutes les informations importantes du WooCommerce, jusqu'aux ventes incitatives et aux produits connexes
- Affichage conditionnel des modèles : Vous pouvez créer autant d'archives de produits et de modèles uniques que nécessaire et utiliser des règles conditionnelles pour contrôler où utiliser chaque modèle. Par exemple, vous pouvez créer un modèle unique pour les produits de la "Catégorie A" et un autre pour les produits de la "Catégorie B"
- Modèles pré-construits : Vous avez accès à des archives de produits pré-construits et à des modèles uniques que vous pouvez personnaliser pour répondre à vos besoins. Vous pouvez également créer vos propres modèles à partir de zéro
Y a-t-il quelque chose que vous ne pouvez pas construire avec Elementor WooCommerce Builder ?
Vous pouvez utiliser Elementor WooCommerce Builder pour concevoir vos archives de produits et vos modèles uniques, qui constituent la majeure partie du contenu de votre magasin. Vous pouvez également concevoir le reste de votre contenu WordPress, y compris les modèles d'en-tête et de pied de page.
Cependant, il y a deux pages WooCommerce pour lesquelles il ne vous aide pas pour le moment :
- Panier d'achat
- Processus d'achat
Vous pouvez utiliser Elementor pour ajouter du contenu autour du panier WooCommerce et du contenu de la caisse, mais vous ne pouvez pas personnaliser le contenu lui-même. Cependant, pour contrôler la conception du panier et du contenu de la caisse, il existe quelques options.
Tout d'abord, vous pouvez utiliser un thème WordPress qui se combine bien avec Elementor, tout en vous donnant des paramètres pour contrôler votre panier et vos pages de paiement. Voici quelques bonnes options :
- Astra
- OceanWP
- GeneratePress
- Neve
Ensuite, si vous connaissez le CSS, vous pouvez ajouter vos propres styles pour contrôler le panier et les pages de paiement. Enfin, vous pouvez utiliser un plugin qui modifie le processus de paiement.
Par exemple, le plugin CartFlows vous permet de créer un processus de paiement personnalisé à l'aide d'Elementor. Cependant, CartFlows est plus adapté aux entonnoirs de vente que les magasins de commerce électronique "traditionnels", il ne fonctionnera donc pas dans toutes les situations. Vous pouvez également utiliser un plugin tel que notre propre Forminator pour créer un processus de paiement personnalisé.
Comment concevoir votre boutique WooCommerce avec Elementor
Maintenant, retroussez vos manches pour mettre la main à la pâte et concevez votre magasin en utilisant Elementor Pro et WooCommerce Builder. Allons-y étape par étape et créons un magasin.
Configurer et paramétrer WooCommerce
Si ce n'est pas déjà fait, vous voudrez commencer par mettre en place et configurer les bases de votre boutique WooCommerce. Ces étapes de configuration de base ne sont pas l'objet principal de ce tutoriel, nous n'allons donc pas aller trop loin.
En général, vous voudrez le faire :
1. Installer et activer le plugin WooCommerce gratuit de WordPress.org
2. Exécuter l'assistant d'installation de WooCommerce pour configurer les bases importantes
3. Ajouter vos produits
4. Configurer tout autre paramètre pertinent dans la zone de configuration de WooCommerce.
Tutoriel vidéo complet sur la page boutique et catégories produits WooCommerce avec Elementor
Concevoir la page catégorie de produits de votre boutique
Maintenant, vous êtes prêt à commencer à construire votre magasin, en commençant par le modèle des catégories produit. La page categorie produits est la page qui répertorie tous vos produits WooCommerce (ou les produits avec une catégorie, une étiquette, etc.).
Pour commencer, allez dans Templates > Theme Builder > Product Archive. Ensuite, cliquez sur le bouton Ajouter une nouvelle archive de produits.
Donnez-lui un nom fantaisiste et cliquez sur Créer un modèle pour continuer.
Cela vous lancera dans l'interface de conception. Vous pouvez importer l'un des modèles d'archives de produits préfabriqués ou fermer la bibliothèque de modèles pour construire votre design à partir de zéro.
À partir de là, vous pourrez concevoir votre modèle d'archive en utilisant l'interface visuelle, par glisser-déposer.
Vous pouvez utiliser les widgets dédiés aux archives de produits pour ajouter du contenu de base comme une liste de tous vos produits ou le titre de la page d'archives (par exemple, le nom de la catégorie).
L'édition d'un des widgets vous permet de contrôler son apparence et sa fonctionnalité. Vous pouvez tout personnaliser, du classement par étoiles aux badges de vente.
Lorsque vous avez terminé votre conception, cliquez sur le bouton Publier pour choisir où vous voulez utiliser votre modèle.
Vous obtenez cinq conditions d'affichage que vous pouvez mélanger selon vos besoins soit sur :
- Toutes les catégories (liste) de produits
- Page du magasin
- Résultats de la recherche
- Catégories de produits
- Tags produits
Par exemple, pour afficher le modèle sur la page principale de votre boutique uniquement, choisissez Page de la boutique.
Pour certaines conditions, vous obtiendrez des options supplémentaires. Par exemple, si vous sélectionnez Catégories de produits, vous pouvez cibler votre modèle sur toutes les pages d'archives des catégories de produits ou seulement sur une catégorie (ou un ensemble de catégories) spécifique.
Ces conditions d'affichage sont utiles car elles vous permettent de créer autant de modèles uniques que nécessaire pour mettre en valeur au mieux les différents produits que vous vendez.
Parfois, une approche unique n'est pas la meilleure solution. WooCommerce Builder permet de créer facilement de nouveaux modèles sans avoir besoin de travailler directement avec des fichiers de template PHP.
Concevez des pages de produits personnalisées avec Elementor
Une fois que vous avez créé vos pages d'archives de produits, vous pouvez utiliser la même approche de base pour personnaliser un modèle de page de produit WooCommerce pour les fiches produit.
Pour commencer, allez dans Modèles > Créateur de thèmes > Produit unique. Ensuite, cliquez sur le bouton Ajouter un nouveau produit unique et donnez-lui un nom.
Tout comme pour la conception de votre archive de produits, vous aurez la possibilité d'importer un des modèles prédéfinis ou de créer votre propre modèle de page de produit à partir de zéro.
Vous disposez maintenant d'un autre ensemble de widgets dédiés pour toutes les informations de la page unique des produits, y compris le titre du produit, les produits connexes et les produits recommandées.
Par défaut, Elementor affichera l'un de vos produits réels pour un aperçu en direct de votre design. Si vous préférez voir à quoi ressemblerait vôtre design avec un produit différent, cliquez sur l'icône de l'engrenage dans le coin inférieur gauche et modifiez les paramètres d'aperçu pour utiliser n'importe quel produit de votre magasin.
Prévisualisez votre design avant de le mettre en ligne. Une fois que vous avez terminé, cliquez sur le bouton Publier pour choisir où appliquer ce modèle unique de produit.
Vous aurez alors cinq autres options d'affichage du gabarit que vous venez de créer, sur :
- Tous les produits
- Dans une catégorie
- Dans une catégorie et ses sous-catégories
- Selon des tags
- Les produits d'un auteur
Pour ces dernières options, vous pourrez choisir des éléments spécifiques qui s'appliquent à cette condition (par exemple, une catégorie spécifique).
Comme pour vos modèles d'archives de produits, vous pouvez répéter le processus autant de fois que nécessaire pour vous assurer que chaque type de produit a un design optimisé.
Inclure les produits WooCommerce dans d'autres pages
En plus de vous permettre de concevoir vos archives de produits et des modèles uniques, Elementor Pro vous offre des widgets WooCommerce dédiés que vous pouvez utiliser dans d'autres conceptions.
Par exemple, vous pouvez les utiliser pour présenter des produits dans un article de blog que vous écrivez. Vous pouvez accéder à ces widgets à tout moment à partir de la section WooCommerce de l'interface d'Elementor.
Si vous souhaitez afficher des produits, vous pouvez créer vos propres requêtes personnalisées pour contrôler les produits à afficher.
Vous pouvez même utiliser la fonction Elementor Popup Builder incluse pour inclure ou promouvoir des produits dans une popup. Par exemple, vous pouvez annoncer une offre spéciale et inclure un bouton "Ajouter au panier" directement dans la fenêtre contextuelle, type offre spéciale ou coupon.
Il est temps d'ouvrir votre boutique WooCommerce - Elementor Pro !
Avec Elementor Pro, vous pouvez créer une boutique WooCommerce personnalisée plus rapidement et avec plus de flexibilité qu'avec n'importe lequel des constructeurs de pages
Comme vous pouvez le voir, c'est un processus simple. Plutôt que de travailler avec des hooks ou des fichiers modèles, vous pouvez utiliser une interface visuelle, par glisser-déposer.
Vous obtenez des widgets dédiés pour afficher les informations importantes sur les produits WooCommerce, et vous pouvez également utiliser des règles d'affichage conditionnel pour créer autant de modèles de produits uniques et d'archives de produits que votre boutique en a besoin.
