Les tendances en matière d'achat évoluent à un rythme rapide et les gens ont plus que jamais tendance à acheter en ligne.
C'est pourquoi ils ont de plus en plus besoin d'une boutique de commerce électronique pour satisfaire leurs habitudes d'achat en ligne, car les gens trouvent plus pratique d'acheter en ligne plutôt que de sortir faire du shopping.
Vous pouvez également démarrer votre boutique en ligne immédiatement, en utilisant les outils et la configuration appropriés. Et vous remarquerez une augmentation drastique de vos ventes en un temps record.
Si vous avez prévu de démarrer une boutique de commerce électronique et que vous recherchez un expert WordPress pour faire le travail à votre place, laissez-moi vous dire que vous n'en avez pas besoin.
Oui! Vous pouvez le faire vous-même car vous n'avez pas besoin d'être un développeur WordPress ou un expert en codage et vous pouvez le faire sans avoir aucune connaissance en codage avec les bons outils et la bonne configuration.
Suivez simplement le didacticiel étape par étape pour créer une page de boutique WooCommerce à l'aide du générateur de pages Elementor.
Allons plus loin pour en venir au fait !
- De quoi aurez-vous besoin pour créer une page produit à l’aide d’Elementor ?
- Comment installer le constructeur de pages Elementor ?
- Créez une page produit Elementor WooCommerce étape par étape
- Mobile optimisez votre page produit WooCommerce
- Tarifs Elementor Pro
- Emballer
De quoi aurez-vous besoin pour créer une page produit à l’aide d’Elementor ?
Installez le plugin sur votre site WordPress à partir du référentiel WordPress.org et en plus de cela, vous devrez installer le constructeur de pages Elementor . La version gratuite peut être téléchargée depuis WordPress.org, mais la version gratuite est livrée avec des options de personnalisation limitées. Par conséquent, si vous souhaitez bénéficier d’options de personnalisation illimitées, optez pour le pro Elementor et téléchargez-le depuis le site officiel Elementor.org.
Comment installer le constructeur de pages Elementor ?
- Pour la version gratuite d'Elementor :
Accédez à Plugin > Ajouter un nouveau > entrez dans le générateur de pages Elementor > cliquez sur Installer et activer.
- Pour Elementor Pro :
Achetez la version Pro sur Elementor.com, puis téléchargez le fichier zip, puis cliquez sur installer et activer.
Créez une page produit Elementor WooCommerce étape par étape
La page produit WooCommerce standard ressemble à n’importe quelle page produit WooCommerce de base, sans aucune netteté.
Cependant, si vous souhaitez ajouter la voix de votre marque, vous devez la personnaliser de manière unique.
Étape 1 : Accédez à la section Modèle de votre menu Tableau de bord et cliquez sur « Ajouter un nouveau ».
Maintenant, dans le menu déroulant, sélectionnez l'élément « Produit unique »
La meilleure partie est qu'Elementor est livré avec des modèles de pages de produits prédéfinis. Par conséquent, si vous souhaitez démarrer rapidement, sélectionnez la personne parmi les options qui se rapproche le plus de celle que vous souhaitez.
Il est beaucoup plus facile de créer une page produit à partir d'un modèle prédéfini plutôt que de la créer à partir de zéro. Par conséquent, modifiez n’importe quel modèle existant et économisez votre temps et vos efforts.
Nous avons sélectionné ce modèle pour notre page produit.
Une fois que vous avez sélectionné votre modèle préféré, il vous mènera à l'éditeur Elementor où vous pourrez personnaliser le modèle selon vos goûts.
Ici vous pouvez voir différents blocs dans le menu de gauche. Faites glisser et déposez le bloc avec lequel vous souhaitez travailler.
Cliquez sur le bouton « + » Ajouter et sélectionnez la taille de colonne que vous souhaitez ajouter.
Nous avons sélectionné deux tailles de colonnes pour notre modèle de produit.
Maintenant, ajoutez un widget de titre de produit dans la colonne de droite et ajoutez-y le titre de votre produit.
Une fois que vous avez ajouté le titre du produit, l'étape suivante consiste à ajouter le « fil d'Ariane Woo » au-dessus.
Maintenant, ajoutez l'image du produit dans la colonne de gauche et faites glisser et déposez le widget d'image du produit depuis la colonne de gauche.
Vous pouvez ajouter du remplissage aux deux colonnes pour les maintenir légèrement éloignées l'une de l'autre.
Après avoir ajouté l'image et ajusté le remplissage en fonction des dimensions requises, ajoutez le widget d'évaluation du produit sous le titre du produit.
Ajoutez une brève description du widget de produit sous le bloc d'évaluation du produit. vous pouvez également ajuster l'espace entre les deux blocs.
Une fois que vous avez terminé avec la description du produit et tous les détails, notre prochaine étape consiste à ajouter le prix du produit et pour cela, vous devrez glisser-déposer le widget de prix sous la description du produit.
Après avoir ajouté l'onglet Prix sous la description du produit, vous pouvez personnaliser le widget de prix en sélectionnant les options dans le menu de gauche. Vous pouvez agrandir l'icône, modifier le style de police ainsi que la couleur de la police du noir à toute autre couleur de votre choix.
Ajoutez maintenant le widget « ajouter au panier » et personnalisez sa couleur, sa police ou son style depuis le menu si vous le souhaitez.
Maintenant, ajoutez une méta produit sous le widget de prix qui affichera la catégorie de produit et le numéro de série du produit.
Étape 2 : ajoutez des informations supplémentaires sur le produit dans la section suivante.
Créez une nouvelle section à deux colonnes, puis ajoutez des onglets de données sur le produit comprenant la description, des informations supplémentaires et des avis. Et sur le côté droit de la colonne, ajoutez la section produit associée.
Pour conserver le même format de chaque colonne vous pouvez cliquer sur le coin gauche de chaque colonne et copier et coller le format de colonne pour chaque colonne.
Étape 3 : ajoutez une autre section ou ajoutez une « section de vente incitative ».
Voici à quoi ressemblera votre section de vente incitative après l'ajout. Ajoutez un peu de rembourrage pour aligner la section.
Et enfin, vous avez terminé la conception de votre page produit. Maintenant, la dernière étape est de savoir où vous souhaitez publier votre produit ? vous pouvez cliquer sur publier ou accéder à la section œil dans le coin le plus bas du menu de gauche et cliquer sur les paramètres pour sélectionner la catégorie du produit.
Cliquez sur le menu Ajouter une condition, puis sélectionnez la catégorie de votre produit et cliquez sur publier.
Mobile optimisez votre page produit WooCommerce
Étant donné qu'une grande partie du trafic passera par les smartphones, vous devrez optimiser votre boutique pour la visualisation sur smartphone, sinon vous risquez de perdre vos ventes.
Bien que WooCommerce soit déjà optimisé pour les mobiles, mais pour vous assurer que vos modèles de page produit s'affichent absolument bien sur l'écran mobile, suivez la procédure.
Vous trouverez une option Mode réactif dans le coin inférieur gauche de l'interface Elementor.
Lorsque vous cliquez sur l'option Mobile responsive, vous pouvez basculer entre les options d'affichage Mobile, Desktop et par onglets.
Cliquez sur l'une des options que vous souhaitez afficher et modifiez le design si vous rencontrez une complication.
Maintenant, enregistrez et continuez à publier votre page produit.
Tarifs Elementor Pro
La version de base d'Elementor est disponible gratuitement tandis que la version pro est livrée avec trois licences. Si vous recherchez votre blog personnel ou un site unique, la licence personnelle vous convient le mieux, car vous pouvez obtenir un générateur WooCommerce ainsi que plus de 90 widgets professionnels.
Tandis que les licences plus et expert conviennent aux entreprises ou agences adultes avec un support de 3 sites et 1000 sites respectivement.
Emballer
Le seul objectif du constructeur de pages Elementor est de permettre aux utilisateurs de libérer leur créativité sans compter sur le codage. Elementor est livré avec une variété de widgets qui vous permettent de créer tout type de pages de produits basées sur des mises en page attrayantes. Les éléments de base de WooCommerce sont plus de 10 qui permettent aux utilisateurs de personnaliser chaque coude et courbe de la page de la boutique. Et si vous ne trouvez pas l'élément souhaité dans le menu Elementor, ne vous inquiétez pas ! Il existe de nombreux autres paramètres avancés qui peuvent mettre à niveau votre arsenal et ajouter plusieurs éléments à votre bibliothèque. L’un d’eux est Essential Add-ons , fourni avec des éléments dédiés à WooCommerce uniquement.
