Si vous cherchez à ouvrir une nouvelle boutique e-commerce avec des outils faciles d’utilisation comme WordPress, WooCommerce et Elementor, alors vous êtes au bon endroit. Dans ce tutoriel, nous allons apprendre à combiner tous ces éléments pour que vous puissiez avoir une boutique à votre image, que vous aurez construite vous-même et sur laquelle vous aurez la main sur toutes les modifications.
Dans ce tutoriel, nous allons donc voir ensemble les différentes pages que l’on peut modifier sur WooCommerce avec Elementor, les options d’Elementor qui sont nécessaires, ainsi qu’une sélection de thèmes qui faciliteront leur utilisation.
Prérequis : Ce tutoriel considère que vous avez déjà installé WooCommerce et Elementor sur votre WordPress. Si ce n’est pas encore fait, vous pouvez consulter nos articles pour apprendre à créer un site WooCommerce et installer Elementor.
En cas de difficulté, vous pouvez également à tout moment faire appel à un développeur freelance WooCommerce pour vous aider à installer et utiliser Elementor avec votre boutique en ligne.
Sommaire :
La réponse est simple : tout dépend le niveau de personnalisation que vous souhaitez.
En effet, Elementor propose de personnaliser, et gratuitement, les pages de contenu et les articles individuellement. Le nombre de composants proposés est limité dans la version gratuite, et est deux à trois fois plus important si vous possédez une licence Pro. Cependant, tout comme certains composants sont accessibles grâce à un abonnement Elementor Pro, certaines fonctionnalités de personnalisation ne seront ouvertes qu’une fois que vous y aurez souscrit. Il s’agit de tout ce qui concerne les généralités de votre thème, ainsi que la gestion des modèles. Autrement dit, la version Pro vous permet de modifier l’en-tête et le pied de page de votre par site par exemple ; mais également les pages produits et listing de produits (catégories, mots clés, recherche) si vous utilisez WooCommerce.
Donc, en résumé, si vous souhaitez avoir une boutique vraiment personnalisée du début jusqu’à la fin, alors oui, Elementor Pro sera nécessaire. Si votre objectif n’est que de personnaliser quelques éléments superflus, la version gratuite sera suffisante.
Elementor permet de modifier le visuel de toutes les pages dites « de contenu » ; c’est-à-dire les pages qui ne sont pas essentielles au bon fonctionnement d’un plugin : ses pages spécifiques, dites également « fonctionnelles ». Il existe deux pages fonctionnelles spécifiques à WooCommerce qui ne sont pas modifiables avec Elementor. Il s’agit des pages :
Pour le reste, tout dépend des éléments que vous souhaitez pouvoir modifier et si vous possédez ou non une licence Elementor Pro. Entrons un peu plus dans les détails.
Avant tout, il faut connaître la notion de « modèles » (ou « templates »). Tout comme avec un traitement de texte, un modèle est une mise en page par défaut qui vient s’appliquer tous nos documents, articles et produits qui l’utilisent. Pour une fiche produit, on va indiquer où et comment placer les images, les prix, la description, le bouton d’ajout au panier, etc. Pour chacun de ces éléments, on va pouvoir, non seulement renseigner sa position, mais également sa forme et sa couleur.
Grâce à Elementor Pro (avec la version pro uniquement), vous pourrez personnaliser le modèle de la fiche produit.
Avant tout, nous aurons besoin d’activer Elementor sur les fiches produits de WooCommerce !
Pour activer Elementor sur les pages produits WooCommerce, rendez-vous dans le menu Elementor > Réglages de votre espace administration de WordPress. Dans la section « Type de contenu », assurez-vous que « Produits » soit bien coché, et sauvegardez bien si vous effectuez des modifications.
Modifier un modèle de fiche produit nécessite la version Elementor Pro.
Rendez-vous dans le menu Modèles > Constructeur de thèmes et sélectionnez l’option « Produit ».
Vous aurez la possibilité de choisir des modèles préconçus à personnaliser, ou de créer votre propre modèle à partir de rien.
Dans tous les cas, vous allez arriver sur l’éditeur Elementor classique.
Constatez cependant qu’en plus d’avoir les composants visuels Elementor habituels, vous avez (en premier dans la liste), des composants spécifiques à WooCommerce, comme par exemple : le fil d’Ariane, le nom du produit, la galerie d’images du produit, le prix, le bouton d’ajout au panier, les moyennes d’avis, le stock disponible, etc.
Il est possible que vous ayez besoin de mettre plus en avant un produit qu’un autre, ou que chaque fiche produit a besoin d’être unique. Il est possible, gratuitement cette fois, de rajouter du contenu avec Elementor sur chaque fiche produit. Rendez-vous sur l’édition de ce dernier, et constatez, entre le nom du produit et sa description, le bouton « Modifier avec Elementor ».
En cliquant dessus, vous allez atterrir sur un éditeur Elementor classique, avec l’accès aux composants communs. Libre à vous de faire ce que vous voulez avec le contenu de présentation de votre fiche produit WooCommerce.
La page boutique de WooCommerce est, elle aussi, personnalisable avec Elementor. Pour cela, on va utiliser la même méthode que pour les fiches produits, en se rendant dans le menu Modèles > Constructeur de thèmes ; sauf que cette fois, on va choisir l’option « Archives de produits ». Ce type de modèle va servir pour tout ce qui concerne les listes de produits.
Quand vous allez publier le modèle, vous aurez la possibilité de choisir sur quelles pages inclure ou exclure ce modèle. Choisissez bien l’option « Page boutique ».
Le fonctionnement est exactement le même que pour la page boutique : il vous faudra créer un modèle (utiliser le même modèle que la page boutique n’est pas forcément une méthode recommandée pour le référencement).
Créez un modèle de type « Archives de produits » depuis le menu Modèles > Constructeur de thèmes. Placez-y les informations que vous souhaitez faire apparaître. Au moment de la validation, sélectionnez l’option « Inclure » puis « Catégories de produits ».
Vous pouvez faire la même chose (ou utiliser le même modèle) pour la page de recherche ou de mots clés (« tags »).
Il n’y a pas de thème miracle qui permet de tout designer en claquant des doigts. Cependant, il existe de très nombreux thèmes aux allures différents les uns des autres, qui sont très bien reconnus pour se marier efficacement avec Elementor. Certains d’entre eux tolèrent même très bien WooCommerce.
Voici une liste des quatre thèmes les plus connus et certifiés par la communauté, qui permettent de coupler WooCommerce et Elementor, tout en fonctionnant à merveille.
Après tout ce que nous avons vu dans ce tutoriel, vous avez probablement quelques questions. Nous allons essayer de répondre à plusieurs d’entre elles. Si une ou plusieurs de vos interrogations ne trouvent pas réponse ici, vous pouvez vous tourner vers un développeur WooCommerce freelance qui vous aidera à avancer votre projet en déposant gratuitement une annonce sur Codeur.com.
WooCommerce est un plugin WordPress qui permet d’ajouter de créer une boutique en ligne ou d’ajouter une option e-commerce sur votre site internet. Pouvoir en savoir plus, consultez notre article dédié à l’installation et la configuration de WooCommerce.
Elementor est un autre plugin qui intègre à WordPress un constructeur de page (ou « page builder ») pour créer une mise en page personnalisée pour chaque page et article (et produits si WooCommerce est installé et activé). Avec sa version Pro (abonnement annuel), vous pourrez également personnaliser des zones du site qui se répète sur toutes les pages, comme l’en-tête et le pied de page.
La réponse est à prendre avec des pincettes : oui, on peut personnaliser la page panier ; mais non, on ne peut pas modifier l’encart du panier. Ce fameux « encart panier » est la zone qui récapitule les produits qu’a mi l’utilisateur dans son panier ainsi que le total. Cependant, grâce à la gestion de modèles de Elementor lié à WooCommerce, vous aurez la possibilité d’ajouter des informations de contenu avant et après l’encart panier.
Il existe une solution pour personnaliser l’encart panier : modifier le CSS du thème directement.
La réponse est simple : non, Elementor ne permet pas de personnaliser la page « mon compte ». Il s’agit d’une zone critique, essentielle au bon fonctionnement de WordPress et de WooCommerce. Apporter des personnalisations via un plugin pourrait entrainer des modifications compromettantes sur l’utilisation de votre site internet ou de votre boutique en ligne. Cependant, il est possible de modifier le visuel de façon technique avec du CSS.
Il n’est malheureusement pas possible de modifier la page de paiement ni la page de remerciement avec Elementor. Il y a beaucoup de trop d’éléments à prendre en compte pour que le plugin puisse faire son travail correctement : panier, zones géographiques, cadeaux, informations spécifiques à votre boutique, etc. D’autant plus que chaque moyen de paiement fonctionne de façon différente et a besoin d’un affichage spécifique.
Pour personnaliser le visuel du paiement, il faut passer directement pas la modification du CSS du thème.
Nous avons vu tout au long de ce tutoriel qu’il est possible de lier ces deux plugins très puissants de WordPress : WooCommerce pour créer une boutique en ligne et Elementor pour gérer la mise en page. Même s’il n’est pas possible d’absolument tout personnaliser avec Elementor, les fonctionnalités restent tout de même assez importantes et permettent de faire beaucoup de choses.
Pour le reste, il s’agit de situations au cas par cas en fonction de la boutique et des plugins utilisés. Si vous souhaitez aller plus loin pour les personnalisations ou que vous rencontrez des problèmes avec l’utilisation de WooCommerce et/ou de Elementor, n’hésitez pas à demander à un développeur freelance spécialisé dans WooCommerce de vous accompagner pour vous aider dans la configuration de WooCommerce et d’Elementor en déposant un projet gratuitement sur Codeur.com.