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.

Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le prestataire WordPress idéal.

Trouver un expert WordPress

Faut-il prendre Elementor Pro pour personnaliser WooCommerce ?

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.

 

Quelles pages peut-on modifier sur WooCommerce avec Elementor ?

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 :

  1. Panier. En effet, ce n’est pas un affichage de contenu que l’on peut gérer depuis l’administration, mais bien un affichage dynamique en fonction des choix faits pas l’utilisateur vis-à-vis de son panier et de son compte. Cependant, vous pouvez ajouter du contenu autour du panier, mais pas l’information principale en elle-même.
  2. Paiement. Là encore, la page de paiement ne peut pas être gérée depuis l’administration. Il y a de trop de choses critiques à prendre en compte : les données géographiques de l’utilisateur, le panier, le mode de paiement et le moyen de livraison, etc.

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.

Personnaliser la page boutique de WooCommerce avec Elementor

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 le modèle d’une fiche produit WooCommerce avec Elementor

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.

Rajouter un contenu personnalisé sur une fiche produit WooCommerce avec Elementor

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.

Personnaliser la page boutique de WooCommerce avec Elementor

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 ».

Modifier une page catégorie WooCommerce avec Elementor

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 »).

 

Quels sont les meilleurs thèmes pour utiliser Elementor avec WooCommerce ?

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.

  1. Astra,
  2. OceanWP,
  3. GeneratePress,
  4. Neve.

 

FAQ

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.

À quoi sert le plugin WooCommerce ?

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.

À quoi sert le plugin Elementor ?

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.

Peut-on modifier la page panier de WooCommerce avec Elementor ?

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.

Peut-on modifier la page mon compte de WooCommerce avec Elementor ?

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.

Peut-on modifier la page de paiement de WooCommerce avec Elementor ?

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.

 

Notre astuce pour utiliser Elementor avec WooCommerce

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.