Créez et concevez une page produit WooCommerce incroyable avec Elementor

Vous devez modifier votre page produit pour distinguer votre boutique e-commerce de la concurrence et offrir à vos clients une expérience unique. De plus, la possibilité de personnaliser esthétiquement votre page produit est essentielle pour maintenir une conception visuelle cohérente dans l'ensemble de votre boutique en ligne.

Elementor est l'un des principaux constructeurs de sites Web WordPress sur le marché, mais saviez-vous aussi que vous pouviez créer des magasins WooCommerce en l'utilisant ?

De nombreux modules Elementor WooCommerce intégrés vous permettent d'insérer du contenu WooCommerce ou des blocs de fonctionnalités ou de les styliser à l'aide du générateur Elementor. Plutôt génial, non ?

Auparavant, le style et la personnalisation de WooCommerce nécessitaient PHP et CSS pour chaque petit changement, mais à mesure que des outils comme Elementor s'améliorent et deviennent plus complexes, de plus en plus d'options deviennent disponibles pour prendre le contrôle de l'apparence et du fonctionnement de votre magasin.

Commençons.

• Création d'un modèle Elementor
• Image ou galerie du produit Building Elementor
• Titre du produit WooCommerce, prix et ajouter au panier
• Configuration des onglets de produits Elementor
• Brève description du produit Elementor
• Ventes incitatives de produits Elementor et WooCommerce
• Conclusion - Générateur de pages de produits Elementor

Création d'un modèle Elementor

La première étape de la procédure consiste à créer un nouveau modèle Elementor en accédant à Modèles dans le tableau de bord WordPress. Cliquez sur « Créer nouveau », puis choisissez Produit unique comme modèle que vous souhaitez créer.

Comme nous développons ce modèle à partir de zéro, il n'est pas nécessaire de mettre des blocs ; quittez la case suivante jusqu'à ce que vous atteigniez l'écran habituel du constructeur Elementor pour une nouvelle page.

Image ou galerie du produit Building Elementor

Chaque produit WooCommerce a une image de produit ou une galerie d'images présentant les photographies du produit aux clients. Elementor fournit un module d'images de produits intégré qui nous permet de l'insérer dans notre modèle.

Créez une simple ligne de 2 colonnes et entrez dans le module Images de produits dans la colonne de gauche ; cela a l'air pratique et fait le travail, mais personnalisons le badge de vente pour qu'il corresponde au thème Elementor Hello utilisé pour cet article. Pour ce faire, nous devons appliquer une petite ligne de CSS personnalisé, qui peut être introduite en allant dans Avancé > CSS personnalisé et coller le code ci-dessous.

selector .onsale { \sbackground-color: #cc3366 ; \s}

Titre du produit WooCommerce , prix et ajouter au panier

Nous ajouterons les modules Elementor pour le titre du produit, le prix du produit et l'ajout au panier dans la colonne de droite.

Recherchez ces trois modules dans le constructeur Elementor, puis faites-les glisser et déposez-les pour les organiser dans l'ordre indiqué ci-dessus ; c'est entièrement fonctionnel, mais nous voulons le personnaliser pour qu'il corresponde au style comme le thème Hello Elementor de la section ci-dessus. Le style des modules avec Elementor est simple, il vous suffit de cliquer sur le module et l'éditeur devrait ouvrir les options de style à gauche.

Le contenu de ces modules est excellent. Ainsi, nous allons travailler sous l'onglet Style. Tout d'abord, mettons à jour la police et la couleur du titre du produit pour qu'elles correspondent à celles utilisées dans le thème Hello Elementor.

Nous devons ensuite faire de même pour les modules Prix du produit et Ajouter au panier en cliquant sur chaque module et en modifiant la couleur du texte. Pour le prix du produit, je vais utiliser un gris foncé pour contraster avec le titre, alors tapez ce code hexadécimal si vous suivez - #54595f

Ensuite, dans le module Ajouter au panier, nous mettrons à jour quelques éléments. La couleur d'arrière-plan du bouton et le rayon de la bordure du bouton à l'aide des paramètres ci-dessous :

• Définissez le contenu sur « Ajouter au panier ».
• Définissez la couleur d'arrière-plan sur '#cc3366'
• Définissez le rayon de la bordure sur 0

J'ai changé le rayon de la bordure du sélecteur de quantité sur 0, ce que vous pouvez faire dans l'onglet Style pour la quantité.

Configuration des onglets de produits Elementor

Chaque produit doit afficher des informations de base telles qu'une description du produit et des avis, le cas échéant ; cela est généralement géré via les onglets de produit.

Veuillez créer une nouvelle ligne sous la section supérieure et faites glisser le module Onglets de données de produit du générateur Elementor dans la ligne pour l'insérer. Il n'y a pas beaucoup de style requis ici car il hérite de certains styles du thème Hello Elementor. Cependant, modifions le style du bouton de soumission d'avis.

Pour ce faire, nous aurons à nouveau besoin d'un peu de CSS personnalisé. Commencez à éditer les onglets de données produit, puis cliquez sur l'onglet Avancé et faites défiler jusqu'à CSS personnalisé. Saisissez le CSS ci-dessous et vous pouvez ajuster les couleurs en fonction de votre conception.

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; couleur : #fff ; rayon de bordure : 0px ; }

Brève description du produit Elementor

D'accord, nous avons jusqu'à présent un design décent et simple, mais il a l'air un peu clairsemé. L'ajout d'un module Product Short Description dans la partie supérieure peut aider à compléter et à ajouter plus de contexte.

Veuillez rechercher le module WooCommerce Short Description, puis faites-le glisser sous le prix du produit et au-dessus du module Ajouter au panier.

Il n'y a pas encore de style requis ici car il a hérité des styles de Hello Elementor.

Ventes incitatives de produits Elementor et WooCommerce

L'augmentation de la valeur moyenne de votre panier est cruciale pour chaque site WooCommerce, c'est pourquoi il est agréable qu'Elementor inclue un module Product Upsells pour que vous puissiez intégrer facilement la personnalisation sur votre boutique.

Veuillez rechercher le module Upsells de produit dans le générateur Elementor et l'insérer dans une nouvelle ligne derrière les onglets de données de produit.

Comme vous pouvez le voir, cela nécessite un peu d'ajustement pour compléter le reste de notre style. Commencez à modifier le module et effectuez les modifications suivantes :

• Définissez la couleur du titre sur – #cc3366
• Définissez la couleur du titre sur – #cc3366
• Définissez la couleur du prix sur – #54595f
• Définissez la couleur d'arrière-plan du bouton sur - #cc3366
• Définissez la couleur du bouton sur – #fff
• Définir le rayon de bordure du bouton t0 – 0

Le produit fini ressemblera à ce qui précède. Vous pouvez ajuster le code hexadécimal de couleur comme bon vous semble si vous utilisez ce guide comme point de départ pour votre modèle.

Une fois que vous avez terminé, vous publiez votre modèle. Dans la fenêtre suivante, vous verrez la question « Où voulez-vous afficher votre modèle ? » Cliquez sur « Ajouter une condition » pour déterminer quand ce modèle doit être utilisé. Vous pouvez sélectionner « Tous les produits » pour utiliser le modèle sur toutes vos pages de produits. Vous pouvez également choisir d'utiliser ce modèle uniquement pour les produits qui appartiennent à une catégorie spécifique ou qui ont une balise particulière qui leur est associée.

Conclusion - de pages de produits Elementor

Certains utilisateurs peuvent avoir des difficultés à afficher leurs paramètres de conception personnalisés, tels que la couleur de la police et la typographie, lors de l'utilisation d'Elementor. L'apparence de votre boutique WooCommerce peut être affectée si vous utilisez un thème WordPress qui peut contrôler l'apparence de votre boutique. Si vous rencontrez ce problème, gardez à l'esprit que votre article peut remplacer vos paramètres de page personnalisés dans certains cas.

Vous pouvez également choisir une page vierge et en créer une à partir de zéro à l'aide des widgets du produit pour une apparence entièrement personnalisée. Utilisez une page vide, fermez la fenêtre contextuelle de la bibliothèque de modèles lorsqu'elle apparaît et commencez à créer sur la page nouvellement créée. Le bouton personnalisé « Ajouter au panier », « Prix du produit », « Image du produit » et « Titre et description du produit » ne sont que quelques-uns des widgets WooCommerce que vous pouvez utiliser pour personnaliser votre page de produit. Vous pouvez consulter tous les différents widgets actuellement disponibles en visitant cette page. Si vous préférez, vous pouvez organiser les widgets où vous le souhaitez sur la mise en page et personnaliser leurs styles pour qu'ils correspondent à l'apparence souhaitée.

Vous devez modifier votre page produit pour distinguer votre boutique e-commerce de la concurrence et offrir à vos clients une expérience unique. De plus, la possibilité de personnaliser esthétiquement votre page produit est essentielle pour maintenir une conception visuelle cohérente dans l'ensemble de votre boutique en ligne. Elementor est un outil fantastique pour personnaliser les pages de votre boutique WooCommerce, et il est fortement recommandé. En plus d'être simple à utiliser, le générateur de pages comprend tous les widgets et options de style nécessaires pour vous aider à créer des pages de produits personnalisées. Nous espérons que vous avez trouvé ce didacticiel informatif et vous a fourni les informations dont vous aviez besoin pour personnaliser votre produit WooCommerce et les pages d'archives de produits à l'aide d'Elementor. Avez-vous déjà utilisé Elementor pour créer des pages WooCommerce ? Vous êtes invités à partager vos pensées dans la section des commentaires. Nous serions ravis d'y jeter un œil.