Les tendances d'achat évoluent rapidement et les gens ont tendance à acheter en ligne plus que jamais.
C’est pourquoi le besoin en boutiques de commerce électronique augmente afin de satisfaire les habitudes d’achat en ligne, car les gens trouvent plus pratique d’acheter en ligne que de sortir faire les magasins.
Vous pouvez également lancer votre boutique en ligne immédiatement, avec les outils et la configuration adéquats. Vous constaterez alors une augmentation spectaculaire de vos ventes en un temps record.
Si vous avez prévu de lancer une boutique en ligne et que vous recherchez un expert WordPress pour s'en charger, laissez-moi vous dire que vous n'en avez besoin d'aucun.
Oui ! Vous pouvez le faire vous-même car vous n'avez pas besoin d'être développeur WordPress ou expert en programmation ; avec les bons outils et la bonne configuration, vous pouvez y arriver sans aucune connaissance en codage.
Il vous suffit de suivre le tutoriel étape par étape pour créer une page de boutique WooCommerce à l'aide du constructeur de pages Elementor.
Creusons un peu plus pour aller droit au but !
- De quoi avez-vous besoin pour créer une page produit avec Elementor ?
- Comment installer le constructeur de pages Elementor ?
- Créer une page produit Elementor WooCommerce étape par étape
- Optimisez votre page produit WooCommerce pour mobile
- Tarification d'Elementor Pro
- Conclusion
De quoi avez-vous besoin pour créer une page produit avec Elementor ?
Installez l' plugin sur votre site WordPress depuis le répertoire WordPress.org. Vous devrez également installer le constructeur de pages Elementor . La version gratuite est disponible sur WordPress.org, mais ses options de personnalisation sont limitées. Pour bénéficier d'options de personnalisation illimitées, optez pour la version Pro d'Elementor et téléchargez-la sur le site officiel Elementor.org.
Comment installer le constructeur de pages Elementor ?
- Pour la version gratuite d'Elementor :
Allez dans Plugin> Ajouter > saisissez Elementor page builder > cliquez sur Installer et activer.
- Pour Elementor Pro :
Achetez la version Pro sur Elementor.com, puis téléchargez le fichier zip et cliquez sur installer et activer.
Créer une page produit Elementor WooCommerce étape par étape
La page produit standard de WooCommerce ressemble à n'importe quelle page produit WooCommerce basique, sans fioritures.
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 depuis le menu de votre tableau de bord et cliquez sur « Ajouter un nouveau ».
Sélectionnez maintenant l'élément « Produit unique » dans le menu déroulant
L'avantage principal est qu'Elementor propose des modèles de pages produits prédéfinis. Ainsi, si vous souhaitez démarrer rapidement, sélectionnez parmi les options celle qui correspond le mieux à vos attentes.
Il est beaucoup plus facile de créer une page produit à partir d'un modèle prédéfini plutôt que de partir de zéro. Par conséquent, modifiez un modèle existant et gagnez du temps et de l'énergie.
Nous avons sélectionné ce modèle pour notre page produit.
Une fois votre modèle préféré sélectionné, vous serez redirigé vers l'éditeur Elementor où vous pourrez le personnaliser selon vos goûts.
Vous trouverez différents blocs dans le menu de gauche. Glissez-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é une taille de colonne à deux pour notre modèle de produit.
Ajoutez maintenant un widget de titre de produit dans la colonne de droite et saisissez-y le titre de votre produit.
Une fois le titre du produit ajouté, l'étape suivante consiste à ajouter le fil d'Ariane « Woo » au-dessus.
Ajoutez maintenant l'image du produit dans la colonne de gauche, puis faites glisser et déposez le widget d'image du produit depuis cette colonne.
Vous pouvez ajouter un espacement aux deux colonnes pour les maintenir légèrement écarté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 produit sous le bloc d'avis produit. Vous pouvez également ajuster l'espace entre les deux blocs.
Une fois que vous avez terminé la description du produit et tous les détails, l'étape suivante consiste à ajouter le prix du produit. 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 et la couleur de la police (par exemple, du noir à une 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.
Ajoutez maintenant les métadonnées du produit sous le widget de prix ; elles afficheront la catégorie du produit et son numéro de série.
É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 « Données produit » comprenant la description, les informations complémentaires et les avis. À droite de chaque colonne, ajoutez une section « Produits associés ».
Pour conserver le même format pour chaque colonne, vous pouvez cliquer dans le coin gauche de chaque colonne, puis copier et coller le format de colonne pour chaque colonne.
Étape 3 : ajouter une autre section intitulée « section de vente incitative »
Voici à quoi ressemblera votre section de vente additionnelle après l'ajout. Ajoutez un peu de marge pour aligner la section.
Voilà, la conception de votre page produit est terminée. Il ne vous reste plus qu'à choisir où la publier. Cliquez sur « Publier » ou accédez à l'icône en forme d'œil située en bas à gauche du menu, puis cliquez sur « 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 ».
Optimisez votre page produit WooCommerce pour mobile
Étant donné qu'une grande partie du trafic proviendra des smartphones, vous devrez optimiser votre boutique pour la consultation sur smartphone, sinon vous risquez de perdre des ventes.
Bien que WooCommerce soit déjà optimisé pour les mobiles, pour vous assurer que vos modèles de pages produits s'affichent parfaitement sur les écrans mobiles, suivez la procédure.
Vous trouverez l'option Mode réactif dans le coin inférieur gauche de l'interface Elementor.
En cliquant sur l'option « Adaptatif mobile », vous pouvez basculer entre les modes d'affichage mobile, ordinateur et onglets.
Cliquez sur l'une des options que vous souhaitez visualiser et modifier le design si vous rencontrez une complication.
Maintenant, enregistrez et poursuivez la publication de votre page produit.
Tarification d'Elementor Pro
La version de base d'Elementor est gratuite, tandis que la version Pro inclut trois licences. Si vous souhaitez créer un blog personnel ou un site web unique, la licence personnelle est la plus adaptée : elle vous donne accès à un constructeur WooCommerce ainsi qu'à plus de 90 widgets professionnels.
Les licences Plus et Expert conviennent respectivement aux entreprises ou agences établies, avec un support de 3 et 1000 sites.
Conclusion
L'objectif principal du constructeur de pages Elementor est de permettre aux utilisateurs de laisser libre cours à leur créativité sans avoir à coder. Elementor propose une variété de widgets permettant de créer des pages produits aux mises en page attrayantes. Les plus de 10 éléments WooCommerce de base permettent de personnaliser chaque détail de la page boutique. Et si vous ne trouvez pas l'élément souhaité dans le menu Elementor, pas d'inquiétude ! De nombreux paramètres avancés permettent d'enrichir votre palette d'éléments. Parmi eux, Essential Add-ons propose des éléments dédiés exclusivement à WooCommerce.
