Créez et concevez une incroyable page produit WooCommerce 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 créateurs de sites Web WordPress sur le marché, mais saviez-vous également que vous pouviez créer des boutiques WooCommerce en l'utilisant ?

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

Le style et la personnalisation de WooCommerce nécessitaient autrefois 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 boutique.

Commençons.

• Création d'un modèle Elementor
• Création d'une image ou d'une galerie du produit Elementor
• Titre du produit WooCommerce, prix et ajout 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 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 de blocs ; quittez la case suivante jusqu'à ce que vous atteigniez l'écran habituel du générateur Elementor pour une nouvelle page.

Création d'une image ou d'une galerie du produit Elementor

Chaque produit WooCommerce possède 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 semble 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 en collant le code ci-dessous.

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

WooCommerce , prix et ajout 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 ; ceci est entièrement fonctionnel, mais nous souhaitons le personnaliser pour qu'il corresponde au style comme le thème Hello Elementor de la section ci-dessus. Styliser les modules avec Elementor est simple, tout ce que vous avez à faire est de cliquer sur le module et l'éditeur doit ouvrir les options de style sur la gauche.

Le contenu de ces modules est excellent. Nous allons donc 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.

Il faut 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 bordure du bouton en utilisant les 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 modifié le rayon de bordure du sélecteur de montant sur 0, ce que vous pouvez faire dans l'onglet Style pour Quantité.

Configuration des onglets de produits Elementor

Chaque produit doit afficher des informations de base telles qu'une description du produit et des avis si disponibles ; ceci est généralement géré via les onglets de produits.

Veuillez créer une nouvelle ligne sous la section supérieure et faites glisser le module Onglets de données produit du générateur Elementor vers 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 à modifier les onglets de données du produit, puis cliquez sur l'onglet Avancé et faites défiler jusqu'à CSS personnalisé. Saisissez le CSS ci-dessous et vous pourrez 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

Ok, nous avons donc jusqu’à présent un design décent et simple, mais il semble un peu clairsemé. L'ajout d'un module Description courte du produit à la partie supérieure peut aider à compléter cela et à ajouter plus de contexte.

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

Aucun style n’est encore requis ici car il hérite des styles de Hello Elementor.

Ventes incitatives de produits Elementor et WooCommerce

Augmenter la valeur moyenne de votre panier est crucial pour chaque site WooCommerce, c'est pourquoi il est agréable qu'Elementor inclue un module de ventes incitatives de produits pour vous permettre d'intégrer facilement la personnalisation sur votre boutique.

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

Comme vous pouvez le constater, cela nécessite un petit ajustement pour compléter le reste de notre style. Commencez à modifier le module et apportez 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éfinissez le rayon de la bordure du bouton t0 – 0

Le produit fini ressemblera à celui ci-dessus. 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ù souhaitez-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 appartenant à une catégorie spécifique ou auxquels une balise particulière leur est associée.

Conclusion – Générateur de pages produits

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 capable de contrôler l'apparence de votre boutique. Si vous rencontrez ce problème, gardez à l'esprit que votre article peut remplacer les paramètres de votre page personnalisée 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 produit. Vous pouvez consulter tous les différents widgets actuellement disponibles en visitant cette page. Si vous préférez, vous pouvez disposer 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 avez fourni les informations dont vous aviez besoin pour personnaliser votre produit WooCommerce et vos 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 réflexions dans la section commentaires. Nous serions ravis d'y jeter un œil.