Apprenez à personnaliser visuellement vos modèles de pages de produits WooCommerce à l'aide d'Elementor.
Pour que votre boutique en ligne se démarque et crée vraiment une expérience unique pour vos clients, vous devez être en mesure de personnaliser votre page produit. En plus de cela, la possibilité de personnaliser visuellement votre page produit est essentielle pour maintenir un style unique dans votre boutique en ligne.
Vous souhaitez donc personnaliser vos pages produits WooCommerce? Eh bien, vous avez de la chance!
Elementor facilite considérablement le glisser-déposer visuellement de différents éléments à partir de pages de produit uniques, en personnalisant la mise en page comme vous le souhaitez.
Dans le passé, ces types de didacticiels de conception WooCommerce impliquaient des dizaines de lignes de code.
Heureusement, ces jours sont révolus, grâce à Elementor Constructeur WooCommerce.
Désormais, vous contrôlez totalement votre mise en page et la mise en page de vos produits grâce à la puissance d'Elementor Pro. Pas besoin d'incorporer des actions ou des crochets, ou de fouiller dans différents fichiers PHP. Chaque personnalisation du design se fait dans l'interface, directement depuis le constructeur Elementorpage.
Modèle de produit WooCommerce
La page produit de base de WooCommerce ressemble à ceci:
Avec Elementor, vous pouvez jouer avec la conception du modèle de page produit comme vous le souhaitez. Dans ce guide, vous apprendrez à créer cette mise en page de produit:
Étant donné que vous utiliserez le modèle de produit unique d'Elementor, une fois que vous aurez terminé de créer le modèle, vous pourrez l'appliquer à tous vos produits, ainsi qu'à des catégories spécifiques ou à d'autres conditions.
La configuration initiale
Dans ce didacticiel, l'accent est mis sur la personnalisation de la page du produit, nous allons donc ignorer la configuration de base de WooCommerce et comment ajouter de nouveaux produits. Kinsta a un excellent tutoriel sur la question si vous avez besoin d'aide pour cela.
Après la configuration, vous devez avoir WooCommerce installé et certains produits associés ajoutés à votre site.
Vous devez également avoir installé Elementor et Elementor Pro pour obtenir les capacités de conception visuelle.
Noter! Si WooCommerce n'est pas activé, vous ne pourrez pas accéder aux modèles de produits Elementor.
Étape 1: créer le modèle de produit unique
Pour commencer à concevoir le modèle de produit unique dans Elementor, nous suivrons une procédure similaire à la création du modèle unique normal.
Étape 2: choisissez un modèle de page de produit préconçu ou créez-en un à partir de zéro
Le moyen le plus simple de commencer est d'utiliser l'un des modèles de page de produit préconçus et de le personnaliser pour l'adapter à votre site. Vous avez le choix entre plusieurs styles de pages produits.
Avant de commencer à ajouter des widgets, vous pouvez vous assurer que vous travaillez sur une page de produit pleine largeur, en passant à un modèle pleine largeur (découvrez comment faire cela ici).
Avec Elementor, vous avez un contrôle total de la personnalisation sur la mise en page et le style de la page produit.
L'autre option est de le construire à partir de zéro. Dans le panneau d'édition, vous pouvez voir les widgets spéciaux pour le produit.
Étape 3: ajoutez les widgets produits qui composeront votre page
Il est maintenant temps de créer les éléments qui composeront votre page produit. Pour la liste complète des widgets produits, consultez notre documentation sur le sujet. Pour ce didacticiel, vous utiliserez les widgets Elementor suivants et aucun autre plug-in:
- Widget de titre de produit
- Widget Woo Breadcrumbs
- Widget d'image du produit
- Widget d'évaluation des produits
- Widget de brève description
- Widget de prix des produits
- Ajouter au panier widget
- Widget méta produit
- Onglets de données produit
- Produit connexe
- Widget de vente incitative
Comme vous pouvez le voir dans la vidéo, vous avez une liberté totale pour jouer avec la mise en page et déplacer les éléments.
Vous pouvez utiliser n'importe quel autre widget pour rendre votre page produit plus efficace et plus attrayante. Boutons de partage, widgets d'appel à l'action, image en vedette, menus déroulants… Vous pouvez même ajouter des champs personnalisés au modèle à l'aide de la fonction de contenu dynamique.
Étape 4: Prévisualisez la page du produit avec un autre produit
Pour vous assurer que votre modèle de produit a la bonne mise en page, il est recommandé de le prévisualiser avec plusieurs produits différents.
Cliquez sur l'icône en forme d'œil dans le panneau inférieur gauche, puis sur Paramètres. Sous Paramètres d'aperçu, choisissez le produit spécifique que vous souhaitez afficher. Maintenant, appliquez et vérifiez à quoi il ressemble.
Étape 5: définissez les conditions
C'est à ce stade que vous définissez les conditions qui déterminent l'emplacement de votre modèle de produit. Par défaut, le modèle affectera toutes les pages produits de votre site. Vous pouvez également sélectionner une catégorie spécifique de produits.
Cliquez sur Publier et votre seul produit sera actif!
Bonus: personnalisez votre page de magasin de produits
Pour terminer la tâche, concevez une page de catalogue de produits qui affectera tous les produits du site ou par catégorie. Alors tout d'abord, revenez à Elementor> Mes modèles et créez un modèle de fichier de produit.
Sélectionnez ensuite un modèle existant ou créez-en un.
Ajoutez le widget Stock Products et le titre du fichier, et personnalisez votre mise en page.
Pour l'adapter à la mise en page que vous avez déjà créée dans votre modèle de produit unique, utilisez la fonctionnalité de style de copie qui fonctionne entre les pages. Revenez à la page du produit et cliquez avec le bouton droit de la souris sur Copier. De retour dans le produit en stock, cliquez avec le bouton droit sur Coller le style.
Dans les paramètres des produits en stock, sous Requête> Sources, choisissez Derniers produits. Ensuite, sous Catégorie de produit, choisissez les anneaux. De cette façon, seule la catégorie de l'anneau apparaîtra.
Faites glisser votre doigt sur Pagination si vous avez une longue liste de produits pour la catégorie.
Dans l'onglet Style, vous pouvez définir la distance entre les colonnes et les lignes. Ajustez les couleurs, les polices et plus encore.
Avant de publier, choisissez les conditions pour déterminer où le fichier apparaîtra, comme vous l'avez fait pour le modèle de produit unique.
Appuyez sur Publier et votre page d'archive sera active.
Créez des pages de produits WordPress imaginatives en utilisant la puissance de #Elementor
conclusion
WooCommerce Builder d'Elementor vous offre la flexibilité de conception pour créer et ajuster visuellement vos pages de produits. Cela vous fait gagner du temps et réduit considérablement le temps nécessaire pour passer d'une idée que vous avez à une boutique en ligne WooCommerce entièrement fonctionnelle et en direct.
Vous découvrirez de nombreux autres modèles WooCommerce gratuits sur Éléments Envato, qui propose plus de 2000 modèles différents, dont beaucoup sont liés aux sites de commerce électronique. En outre, il existe de nombreux thèmes WooCommerce que vous pouvez consulter comme ceux que nous avons mentionnés dans notre article.
