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.
Sommaire
De quoi as-tu besoin pour créer de belles pages produit dans Woocommerce?
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, avec lesquelles vous pouvez construire un blog, un site de news ou encore un site de ecommerce.
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 qui vous coutera pour un site 59$.
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.
Il existe également des alternatives mais 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.
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.
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.
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.
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.
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.
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.
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é.
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.
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.
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.
LIRE AUSSI : Hello Theme est-il le meilleur thème pour Elementor ?
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:
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.
Personnaliser des pages produits sur Woocommerce avec Elementor
Voici comment créer de belles pages de produits WooCommerce avec Elementor :
- Installez et activez le plugin Elementor et le plugin WooCommerce sur votre site WordPress.
- Créez un nouveau modèle de page avec Elementor. Pour ce faire, suivez ces étapes :
- Connectez-vous à votre site WordPress.
- Cliquez sur “Modèles” dans le menu de navigation de gauche.
- Cliquez sur “Ajouter un nouveau modèle”.
- Sélectionnez “Page” dans le menu déroulant “Type de modèle”.
- Donnez un nom à votre modèle et cliquez sur “Créer un modèle”.
- Ajoutez un widget “Produits” à votre modèle. Pour ce faire, suivez ces étapes :
- Dans l’éditeur Elementor, cliquez sur “Ajouter un widget” dans le menu de navigation de gauche.
- Dans la liste des widgets disponibles, sélectionnez “Produits”.
- Configurez les options du widget selon vos préférences, en utilisant les options “Filtres” et “Mise en forme” pour afficher les produits de votre choix.
- Cliquez sur “Publier” pour enregistrer les changements.
- Personnalisez le design de votre page de produits en ajoutant des widgets supplémentaires et en modifiant les styles de votre modèle. Vous pouvez utiliser les différents widgets et options de mise en forme d’Elementor pour ajouter du contenu et personnaliser l’apparence de votre page de produits.
Il est important de noter que pour utiliser Elementor avec WooCommerce, vous devez avoir installé et activé les deux plugins sur votre site WordPress. Si vous rencontrez des problèmes pour afficher les produits de votre site dans Elementor, assurez-vous que WooCommerce est correctement configuré et que les produits ont été correctement ajoutés à votre site.
Cliquez ici pour obternir Elementor Pro, (et bénéficiez jusqu’à 20% de réduction)
Personnaliser des pages produits sur Woocommerce sans Elementor
Voici comment personnaliser les pages de produits sur WooCommerce :
- Accédez à la page d’édition du produit que vous souhaitez personnaliser. Pour ce faire, suivez ces étapes :
- Connectez-vous à votre site WordPress.
- Cliquez sur “Produits” dans le menu de navigation de gauche.
- Cliquez sur le nom du produit que vous souhaitez éditer.
- Modifiez les informations du produit. Vous pouvez utiliser les différents champs disponibles pour ajouter ou modifier les informations du produit, comme le titre, la description, les images, etc.
- Configurez les options de prix et de stock. Dans la section “Prix” et “Stock”, vous pouvez ajouter le prix de votre produit et configurer les options de stock.
- Ajoutez des images et des galeries d’images. Dans la section “Images”, vous pouvez ajouter des images et des galeries d’images pour illustrer votre produit.
- Configurez les options de livraison et de paiement. Dans la section “Expédition” et “Paiement”, vous pouvez configurer les options de livraison et de paiement de votre produit.
- Publiez ou mettez à jour votre produit. Une fois que vous avez terminé de personnaliser votre produit, cliquez sur “Publier” ou “Mettre à jour” pour enregistrer les changements.
Il est important de noter que les options disponibles pour la personnalisation de vos pages de produits dépendent du thème et des plugins que vous utilisez.
