Comment créer des pages de produits WooCommerce personnalisées à l'aide d'Elementor

De nos jours, Elementor est parmi les constructeurs de page les mieux classés. Il est très facile de créer un site Web en utilisant les fonctionnalités des constructeurs de pages.

Cependant, il fournit des conceptions préalables, mais si vous souhaitez créer par vous-même, le générateur de glisser-déposer d'Elementor facilite chaque opération. C'est donc une situation gagnant-gagnant.

Soit dit en passant, les pages de produits se trouvent dans presque tous les sites de commerce électronique, mais une page de produit WooCommerce personnalisée est construite lorsque le propriétaire du site doit afficher un produit différemment.

Lors de la conception du site, vous pouvez créer des pages WooCommerce personnalisées.

Et dans ce blog, nous allons voir comment créer des pages de produits WooCommerce personnalisées à l'aide du constructeur de page Elementor sur un site Web WordPress.

De quels outils nous avons besoin pour créer des pages de produits WooCommerce personnalisées

Dans ce blog, nous aurons besoin du plugin Elementor. En plus de cela, nous aurons également besoin d'addons Elemento.

Elementor facilite le processus de construction de pages et l' addon Elemento aide à étendre la puissance de Elementor en ajoutant des widgets et des fonctionnalités supplémentaires aux widgets.

Elemento Addons a des widgets qui semblent illégaux à utiliser en raison de leur fonctionnement et de leur douceur.

Alors commençons maintenant,

Comment créer des pages de produits WooCommerce personnalisées à l'aide d'Elementor

Tout d'abord, installons les deux plugins.

Installation du plugin Elementor

Étape 1) Ouvrez votre tableau de bord

Connectez-vous à votre tableau de bord WordPress.

Étape 2) Accédez aux plugins et cliquez sur Ajouter un nouveau plugin

Dans le tableau de bord, vous pouvez voir plusieurs menus sur le côté gauche. Accédez aux plugins et cliquez sur Ajouter un nouveau plugin.

Étape 3) Accédez à la barre de recherche et recherchez Elementor

Sur cette page, vous trouverez les plugins. Accédez à la barre de recherche et recherchez l'élémentor.

Étape 4) Installez et activez l'élémentor

Après avoir recherché l'élémentor, il apparaîtra dans la liste du plugin. Cliquez sur le bouton Installer, après l'installation, cliquez sur le bouton Activer pour activer le plugin Elementor.

Téléchargement du plugin Elemento Addons

Tout d'abord, téléchargez les addons Elemento depuis themehunk.

Accédez à la page Electo Addons et achetez le plugin. Vous pouvez regarder ce tutoriel si vous avez besoin d'un coup de main pour obtenir les addons Elemento.

Étape 1) Ouvrez votre tableau de bord et accédez à la page du plugin

Répétez les mêmes étapes et atteignez la page du plugin.

Étape 2) Cliquez sur Télécharger le plugin

Allez en haut à gauche et cliquez sur Télécharger le plugin.

Étape 3) Téléchargez les addons Elemento

Cliquez sur Installer maintenant puis activez le plugin.

Les deux plugins sont installés et maintenant nous pouvons continuer.

Création de la page de produit personnalisée WooCommerce

Étape 1) Créez une nouvelle page

Accédez au tableau de bord et cliquez sur les pages puis cliquez sur Ajouter une nouvelle page.

Étape 2) Cliquez sur «Modifier avec Elementor»

Dans la barre supérieure, vous trouverez le bouton Modifier avec Elementor. Cliquez dessus.

Après cela, la page s'ouvrira avec Elementor. Vous pouvez accéder et utiliser les widgets Elementor sur cette page.

Nous aurons besoin de deux compartiments, alors prenez d'abord un conteneur ayant deux côtés.

Sur une page de produit, la première et l'une des choses les plus importantes que nous allons mettre est l'image. Trouvez donc le widget d'image et placez-le dans le conteneur gauche.

Définissez maintenant l'image du produit.

Viens maintenant du côté droit. Pour entrer dans l'en-tête, recherchez-le et insérez-le dans le deuxième conteneur.

Entrez le nom du produit dans le titre.

De la même manière, nous écrire le prix du produit. Pour écrire le prix, insérez un widget d'éditeur de texte sous le titre et écrivez le prix du produit là-bas.

Sur les pages du produit, il y a une brève description du produit. Pour l'ajouter, insérez à nouveau l'éditeur de texte et écrivez une brève description du produit.

Il est maintenant temps d'ajouter le bouton de panier. Cette fois, nous utiliserons le widget CART des addons Elemento car il a plus de fonctionnalités et de fonctionnalités.

Recherchez l'ajout au panier et insérez-le dans le conteneur.

Dans les paramètres du bouton de panier, recherchez le nom du produit et sélectionnez le produit dans la section Produits. Après cela, lorsque l'utilisateur clique sur le bouton CART, il sera ajouté directement au panier.

Si vous souhaitez ajouter l'ID SKU, vous pouvez le faire de la même manière que nous avons ajouté un autre widget. Ici, insérez l'éditeur de texte et écrivez le SKU du produit.

L'une des parties importantes d'une page de produit est d'avoir des boutons de partage social. Vous pouvez également ajouter le bouton de partage social à cette page.

Recherchez les icônes sociales et mettez-les sur la page.

Si vous souhaitez ajouter plus de boutons de poignées sociales, cliquez sur Ajouter un nouveau et ajouter le nouveau bouton. Vous pouvez apporter plusieurs modifications comme la modification de l'icône et l'édition du lien et de la couleur.

De la même manière, vous pouvez ajouter l'autre chose ici.

Si vous souhaitez également donner une description principale, ajoutez l'éditeur de texte et écrivez la description.

J'ai ajouté la description principale à l'extérieur du conteneur qui semble organisé et systématique.

Lorsque les utilisateurs visitent une page de produit, vous pouvez afficher des produits connexes afin qu'ils puissent également les vérifier.

Ainsi, pour ajouter le produit associé, ajoutez d'abord un titre et recherchez le curseur de produit dans les addons Elemento.

C'est ainsi que vous pouvez ajouter la page de produit WooCommerce personnalisée. Il est maintenant temps de voir l'aperçu de la page.

Je dois vous dire qu'une page de produit peut également être réalisée dans quelques étapes simples. Pour cela, nous aurons besoin du widget des addons Elemento.

Voyons comment cela se fait.

Utiliser la page de produit connexe personnalisé

Après avoir cliqué sur Modifier avec Elementor , allez sur le côté gauche, où vous trouverez les widgets Elementor.

Faites défiler vers le bas et accédez aux addons Elemento .

Trouvez des produits à l'avance du thème, faites glisser le widget et déposez sur la page.

Lorsque vous déposez le widget, son paramètre de personnalisation apparaîtra sur la barre de gauche. Vous pouvez modifier les paramètres et l'apparence de l'addon.

Mais si vous souhaitez modifier l'apparence du site, cliquez sur Style en plus du contenu.

La section Style permet de modifier les couleurs, la typographie et d'autres paramètres du module complémentaire.

Après avoir apporté toutes les modifications et configuré la page, cliquez sur Publier.

Aperçu maintenant votre site.

Ici, vous pouvez voir, sur la page de produit WooCommerce personnalisée, nous avons ajouté les produits à l'aide du widget de produit des addons Elemento.

Les produits sont indiqués sur la page. Prévisualisons la page de produit unique.

C'est tout, la page de produit WooCommerce personnalisée est construite.

FAQ

Conclusion

Nous avons donc appris comment ajouter la page de produit WooCommerce personnalisée à l'aide d'Elementor. Comme nous avons également utilisé le plugin Electo Addons, il a facilité l'ajouter des produits et les afficher sur la page.

Les addons Elemento possèdent tellement d'addons pour la création de sites Web. Il est non seulement connu pour les widgets mais aussi pour les fonctionnalités des widgets.

Des pages de produits WooCommerce personnalisées peuvent être nécessaires pour promouvoir des fonctionnalités spécifiques. Habituellement, les modèles n'ont pas de telles pages, il devient donc nécessaire de créer la page par nous-mêmes.

J'espère que ce blog vous aidera. Pourtant, si vous avez des questions ou des suggestions, faites-le moi savoir dans la section des commentaires.
Vous pouvez vous abonner à notre chaîne YouTube , nous y téléchargeons également un excellent contenu, nous suivez également sur Facebook et Twitter .

Découvrez plus d'articles

• Comment modifier l'URL de connexion WordPress (URL personnalisée) en étapes faciles
• Comment créer une page d'erreur 404 personnalisée dans WordPress (Easy Guide)
• Comment ajouter une barre de recherche personnalisée à WooCommerce pour une découverte de produit plus facile