Comment créer de belles pages de produits WooCommerce avec Elementor ?

Les pages produits standard de WooCommerce sont plutôt fonctionnelles et esthétiques! Mais on peut faire mieux, notamment en couplant WooCommerce et Elementor !

Dans ce guide, nous vous montrons comment créer des pages de produits WooCommerce personnalisées (et magnifiques) pour épater vos clients et générer plus de ventes.

De quoi as-tu besoin pour créer de belles pages produit ?

En plus de ce que vous avez déjà – une installation WordPress fonctionnelle et WooCommerce ajouté en plus – vous avez besoin du plugin de création de page Elementor. Elementor est disponible en deux versions, une gratuite et une payante.

Bien qu’il existe des personnalisations disponibles dans Elementor free qui peuvent être utilisées pour WooCommerce, pour accéder aux vraies bonnes choses, vous devez passer à la version pro. Cela va vous coûter 49 $ pour un site (cliquez ici pour obternir Elementor Pro).

LIRE AUSSI : Tuto d’installation de Elementor

Elementor n’est pas le seul constructeur de pages qui fonctionne avec WooCommerce et vous permet de créer des pages de produits WooCommerce personnalisées.

Voici quelques alternatives si vous souhaitez explorer ce qu’il y a d’autre. Cela dit, Elementor est notre solution préférée pour les personnalisations WooCommerce. Avant de pouvoir vous mettre au travail, vous devez installer les plugins Elementor free et Elementor pro sur votre site:

  • L’installation gratuite d’Elementor est simple. Allez simplement à Plugins → Ajouter un nouveau et entrez Elementor dans la zone de recherche. Installez et activez.
  • Pour installer Elementor pro, vous devez d’abord finaliser votre achat sur Elementor.com. Vous pourrez télécharger le package Elementor pro à partir de votre profil utilisateur – c’est un fichier ZIP. Aller à Plugins → Ajouter un nouveau et cliquez sur le Télécharger le plug-in bouton. Sélectionnez le ZIP Elementor sur votre bureau et téléchargez-le sur votre site. Activez le plugin.

Elementor vous demandera de valider votre licence avant que tout ne devienne opérationnel.

Créer une nouvelle page produit WooCommerce avec Elementor

Pour commencer, allez à Modèles et cliquez sur Ajouter nouveau.

Modèles Elementor pour les pages de produits WooCommerce

Dans la liste, sélectionnez Produit unique.

Elementor affichera des modèles de pages de produits WooCommerce prêts à l’emploi avec lesquels vous pouvez commencer. Choisir celui qui ressemble le plus à ce que vous voulez est le meilleur chemin à emprunter pour la plupart des utilisateurs.

Créer un modèle de produit à partir de zéro prendra généralement beaucoup plus de temps. Il est simplement plus facile de modifier un modèle existant. Cliquer sur Insérer pour récupérer le modèle.

Modèles de produits Elementor

Vous verrez votre modèle ajouté sur le canevas Elementor. Vous pouvez désormais personnaliser le modèle comme bon vous semble – ajouter de nouveaux éléments à la page, personnaliser les éléments actuels, supprimer les éléments dont vous n’avez pas besoin, etc.

Dans la barre latérale gauche, vous remarquerez une gamme d’éléments WooCommerce, tels que Titre du produit, Images du produit, Prix ​​du produit, et toutes les autres données que WooCommerce affiche sur vos produits. Vous pouvez prendre chacun de ces éléments et les faire glisser sur la toile à l’endroit exact où vous en avez besoin. Voici quelques personnalisations que vous pouvez effectuer en premier:

Ajoutez votre image de marque et vos couleurs

Les modèles de produits Elementor sont beaux, mais ils ne correspondent probablement pas parfaitement à votre marque. Un changement rapide que nous pouvons faire pour résoudre ce problème consiste à ajuster les couleurs d’arrière-plan, les couleurs de police et divers paramètres de typographie en général.

Pour ajuster un bloc qui se trouve sur la page, cliquez sur l’icône bleu en forme de crayon dans le coin supérieur droit du bloc.

Les modèles de produits Elementor sont beaux, mais ils ne correspondent probablement pas parfaitement à votre marque

Ensuite, dans la barre latérale gauche, passez à la Style languette. C’est ici que vous pouvez effectuer toutes les personnalisations liées au style et à l’apparence.

Par exemple, pour le Titre du produit, vous pouvez changer la couleur du texte, la typographie et les ombres.

Onglet Style pour vos pages produits WooCommerce

Cliquons sur Typographie. Cela affichera une autre boîte où vous pouvez changer la police et tous les paramètres de celle-ci.

Parcourez tous les textes un par un et modifiez-les jusqu’à ce qu’ils vous ressemblent. Portez une attention particulière à ce à quoi ressemble le bloc de prix – il doit être clairement visible pour ne pas confondre le client.

changer la typographie sur vos pages produits WooCommerce avec elementor

Réaligner / déplacer la description du produit

WooCommerce affiche vos descriptions de produits dans une poignée d’endroits. Nous n’avons pas besoin d’entrer dans tous les détails pour le moment, mais concentrons-nous simplement sur deux choses:

  • la brève description
  • vos onglets de données produit

La brève description est exactement ce que cela sonne. WooCommerce prend ce texte du brève description (l’un des champs que vous remplissez lors de la création d’un nouveau produit). C’est une bonne idée d’afficher la brève description quelque part en haut de la page du produit.

Vous pouvez prendre Elementor brève description bloquez-le et faites-le glisser et déposez-le là où vous en avez besoin.

Les onglets de données produit sont en fait le bloc qui contient les principales informations sur le produit. Assurez-vous qu’il est dans un endroit visible dans votre nouveau modèle de page de produit WooCommerce.

Réaligner / déplacer la description du produit dans woocommerce

N’oubliez pas de styliser les couleurs et la typographie de ces blocs également.

Ajustez votre bouton « Ajouter au panier »

Le bouton «Ajouter au panier» est le bouton le plus important de tout site de commerce électronique. Vous voulez vraiment qu’il se démarque et attire l’attention de votre client. Vous pouvez utiliser deux types de blocs différents pour le bouton «Ajouter au panier» dans Elementor. Il y a le Ajouter au chariot block, et le Ajouter au panier personnalisé bloquer.

Ajouter au panier personnalisé

Expérimentez avec les deux pour voir ce qui est le mieux dans votre cas. Cliquez sur l’icône en forme de crayon et voyez ce qui est disponible dans la barre latérale en ce qui concerne les paramètres du bloc donné.

ajouter au panier options dans woocommerce avce elementor

En quelques clics, vous pouvez améliorer l’apparence de votre bouton.

Ajouter / supprimer des avis sur les produits

L’affichage des avis sur les produits peut être un excellent moyen de donner à vos clients le coup de pouce final pour acheter vos produits. Le seul problème est que vous devez d’abord avoir des notes. 🤷‍♂️ Lorsque votre boutique est toute neuve et que vous n’avez pas encore de notes, il vaut mieux ne pas avoir le bloc de notes sur la page. Faites un clic droit sur le Évaluation du produit élément et supprimez-le.

Plus tard, vous pouvez ajouter ce bloc et même personnaliser son apparence. Certaines des choses que vous pouvez changer sont les couleurs des étoiles et l’espacement des choses.

style de notation

Ajustez les vues mobile et tablette

De nos jours, plus de personnes accèdent au Web à partir de leur smartphone qu’à partir d’ordinateurs de bureau et d’ordinateurs portables. Pour cette raison, votre boutique doit être optimisée pour la visualisation mobile, sinon vous perdrez des ventes!

WooCommerce est déjà optimisé pour les mobiles, mais puisque nous créons une page de produit personnalisée, nous devons nous assurer que votre nouveau modèle de produit a également une belle apparence.

Dans le coin inférieur gauche de l’interface Elementor, il y a un bouton intitulé Mode réactif.

mode réactif pour les pages produits WooCommerce

Lorsque vous cliquez dessus, vous pourrez basculer entre les Bureau, Tablette, et Mobile vues. Choisissez-en un et modifiez le design si nécessaire. Ce qui est cool ici, c’est que vous pouvez modifier les paramètres d’affichage de vos blocs de manière à ce qu’ils ne prennent effet que sur mobile ou tablette.

Par exemple, si vous pensez que le prix devrait être plus élevé sur mobile, cliquez sur l’icône en forme de crayon dans le bloc de prix, puis cliquez pour modifier la typographie, et enfin passez à Mobile à côté de la taille de la police.

Si vous modifiez la taille de la police maintenant, seule la vue mobile sera affectée. Parcourez votre modèle élément par élément jusqu’à ce que tout soit configuré pour les utilisateurs mobiles et tablettes.

Publier des pages de produits WooCommerce personnalisées

Lorsque votre nouveau modèle de produit est prêt, cliquez sur le bouton Publier bouton dans le coin inférieur gauche de l’interface Elementor.

Elementor vous demandera d’ajouter une condition pour le moment où le modèle doit être utilisé.

Pour que le modèle soit utilisé pour tous les produits, sélectionnez simplement « Produits » dans la liste, comme ceci:

activer pour les produits

Cliquer sur SAUVEGARDER ET FERMER pour tout finaliser. C’est ça! Une fois cela fait, votre page de produit WooCommerce personnalisée a été enregistrée et a remplacé la page de produit par défaut.

Vous pouvez voir votre page produit en action lorsque vous visitez l’un des produits de votre magasin.

pages de produits WooCommerce personnalisées finales avec Elementor

Laisser un commentaire