Vous souhaitez créer une boutique e-commerce avec votre site WordPress et les extensions Elementor et Woocommerce ?
Woocommerce est le plugin le plus connu et et complet pour construire un site e-commerce avec WordPress.
Mais si vous souhaitez personnaliser votre boutique en ligne avec votre propre design et vos propres fonctionnalités, Woocommerce n’est pas suffisamment souple (à moins de modifier le code php…).
Le builder de page Elementor est un constructeur de pages WordPress visuel par glisser-déposer qui vous donne une multitude de possibilités pour concevoir vos pages, votre boutique et vos pages produits.
En utilisant Elementor et Woocommerce vous pouvez donc créer des sites e-commerce uniques, puissants et rapides.
Mais que proposent vraiment ces deux extensions ? Et comment les utiliser pour construire et personnaliser votre boutique en ligne ?
Que sont ces 2 extensions Elementor et Woocommerce ?
Connaitre le rôle et les fonctionnalités ainsi que leurs limites est essentiel pour comprendre comment les associer et les utiliser pour la création de votre site web.
1- L'extension Woocommerce
Woocommerce est un plugin gratuit qui s’intègre parfaitement dans la plupart des thèmes WordPress.
Il propose nativement toutes les fonctionnalités e-commerce de la présentation de vos produits en mode boutique jusqu’au paiement sécurisé, en passant par de nombreux paramétrages possibles (frais de livraison, zones d’expédition…)
Avec Woocommerce, vous n’avez qu’à renseigner vos fiches produits et paramétrer vos solutions de paiement, tout le reste est déjà installé par cette solution e-commerce.
Vous pouvez modifier les couleurs et la police des boutons, des prix, et des diverses informations. Mais c’est pratiquement tout…
Les limites du plugin Woocommerce
Tout est pris en charge par l’extension. Mais si vous souhaitez personnaliser votre boutique pour qu’elle ne ressemble pas à toutes les autres créées via Woocommerce, il va falloir toucher au code du plugin.
Pas facile ! et surtout cela peut s’avérer risqué !
Ce qui n’est pas possible sans modification du coeur de Woocommerce :
1- Personnaliser les fiches produits, le design, les informations, la position des boutons, des images
2- Intégrer du texte et autres contenus dans vos catégories de produits et respecter le design de votre site web
3- Modifier les pages panier, commande, paiement et le compte client
Thème WP pour Woocommerce
Selon le thème WordPress que vous utilisez, vous aurez plus au moins le même design pour toutes les pages de votre boutique Woocommerce. Ceratins thèmes proposent un peu plus de fonctionnalités comme la mise en page de votre boutique et des archives produits
Si vous ne savez pas encore quel thème WordPress choisir ? Je vous conseille le thème OceanWP, qui est un thème gratuit mais qui a de nombreuses options quand on lui intègre Woocommerce et l’extension supplémentaire Ocean Extra
Télécharger gratuitement le guide
"Associer Woocommerce et Elementor Pro"
Toutes les astuces pour créer une boutique e-commerce unique personnalisée et performante
Maintenant, explorons le builder Elementor pour voir ce qu’il peut faire pour votre boutique en ligne.
Elementor, un builder de page puissant
Elementor est une extension permettant de construire des pages web sur WordPress sans code.
C’est un builder moderne et puissant aux multiples fonctionnalités, compatible avec la plupart des thèmes WordPress (Ocean WP, Astra etc…)
Est proposé deux versions : la version FREE et la version PREMIUM, Elementor PRO…
Elementor VS Elementor Pro
Dans les deux versions, il est possible de construire des pages et des articles de blog avec le builder Elementor.
Seulement, beaucoup de fonctionnalités Woocommerce, voir toutes, ne sont présentes que dans la version Pro.
Si vous souhaitez tirer le meilleur de l’association d’Elementor et Woocommerce, il faudra alors télécharger la version Premium (licence à 49$ par an). Sans la version payante, vous n’aurez pas accès au Woocommerce page builder.
Pour résumer, on pourrait dire que la version gratuite d’Elementor sera parfaite est suffisante pour un site non-marchand, mais pour une boutique ecommerce construite avec Woocommerce, la version Pro est incontournable.
Les widgets proposés dans la version FREE :
Les widgets supplémentaires proposés dans la version PRO :
Les réglages et fonctionnalités d'Elementor
Pour commencer, il faut autoriser Elementor à modifier les contenus que vous souhaitez :
1- Articles
2- Pages
3- Produits
4- Bibliothèque
Pour gagner du temps et ne pas à avoir à modifier les polices et les couleurs à chaque nouvelle création de pages, il faut désactiver les couleurs et polices par défaut d’Elementor. Cela permet de prendre en considération tous les réglages que vous aurez au préalable installés dans l’outil de personnalisation de WordPress
1- Dans les options de l’extension, vous pouvez également ajouter des polices et des icones personnalisés.
2- Gestion de ce que vos utilisateurs/utilisatrices peuvent modifier dans Elementor
3- Gestion de votre licence Pro
4- Des outils, comme la page de maintenance, le remplacement d’URL (très utile lors de la migration d’un site d’un domaine à un autre), le contrôle de version
5- L’option “premiers pas” qui vous offre un guide complet pour bien débuter avec Elementor
Créer des modèles uniques avec Elementor pro
Le builder de pages Elementor vous donne la possibilité de créer des modèles qui seront applicables ou vous le souhaitez au sein de votre site web.
Vous pouvez créer plusieurs types de modèles :
1- modèle de page
2- modèle de catégorie de blog et de catégorie de produit
3- modèle de fiche produit, d’article
4- modèle pour une section seule
5- un header, un footer
6- fenêtre modales (pop-up)
Une fois que vous avez choisi le type de modèle que vous voulez créer parmi les options présentées dans la liste déroulante, Elementor ouvre la bibliothèque pour vous proposez des templates déjà existants dans l’onglet “blocs” et vous donne accès à vos modèles que vous avez déjà créés.
Par exemple, si vous voulez créer un modèle personnalisé pour vos fiches produits, Elementor vous présente quelques idées que vous pouvez très bien utiliser tel quel ou modifier.
Si aucun modèle ne vous convient alors partez d’une page blanche et Elementor adaptera les propositions de widget selon le type de modèle que vous êtes en train de fabriquer.
Comment appliquer un modèle à une page spécifique
Une fois que votre modèle est prêt, vous pouvez choisir de l’appliquer à un contenu unique ou à un ensemble de pages.
Avant de publier votre modèle, allez sur les conditions d’affichage :
Vous pourrez alors décider où ce modèle s’affichera exactement. est ce qu’il doit s’appliquer à une page unique ? A l’ensemble des archives ? etc…
Selon le type de modèle que vous aurait choisi au départ (archives produits, archives posts, single posts, produit unique …), vous n’aurez pas les mêmes options d’affichage dans le menu déroulant.
A noter que vous pouvez donner des conditions pour inclure un modèle, mais que vous pouvez aussi exclure des contenus.
Grâce à ces conditions vous pourrez personnaliser totalement l’ensemble de pages web en ayant un total contrôle sur le design de chacune d’elle.
Personnaliser les catégories de produits
L’un des avantages à associer Elementor et Woocommerce est d’avoir un total contrôle sur ce que vous allez afficher dans vos pages de votre boutique e-commerce.
Très avantageux pour le référencement, vos catégories de produits ne présenteront pas seulement les vignettes des produits. Vous pourrez rajouter des éléments de texte, des images, des call-to-action…autant de choses qu’Elementor propose dans la liste de ses widgets.
Ce qu'on peut modifier avec Elementor et Woocommerce
Nous l’avons vu plus haut, vous pouvez créer autant de modèles que vous le désirez. Mais qu’en est-il vraiment de toutes les pages e-commerce (de la page boutique à la page de commande) ?
Les pages modifiables sans aucune limite :
1- La page de votre boutique qui répertorie tous vos produits
2- Les catégories de produits qui présentent vos offres par thématique
3- Les fiches produits, avec possibilité d’avoir des modèles différents selon les produits
4- les étiquettes ou tags de produits
Les pages non modifiables avec Elementor :
1- La page Panier
2- La page Mon compte
3- La page paiement et validation de commande
C’est en effet un défaut notable pour le moment, mais on peut toutefois modifier certaines choses avec Elementor.
Si on prend par exemple la page “mon compte”, nous pouvons créé une page vierge avec Elementor et insérer le short code suivant pour que les élèments Woocommerce soit repris automatiquement : “woocommerce_my_account”
On peut alors y insérer autant de choses que l’on souhaite avant ou après ce short code, et avec un peu de connaissances en css, l’élément de Woocommerce peut-être modifié en utilisant l’éditeur de css personnalisé d’Elementor (disponible juste en version pro). Vous pouvez appliquer cette méthode sur toutes les pages dites “non modifiables” avec la liste des short codes woocommerce (voir la liste)
Autres fonctionnalités et extensions avec Elementor
Beaucoup d’extensions se sont aujourd’hui adaptées au builder elementor. Il existe de nombreux addons qui vous permettront d’obtenir des fonctionnalités supplémentaires.
Point de vue marketing, le builder offre aussi des fonctions intéressantes
Piloter le SEO de votre boutique directement dans Elementor
L’extension Rank Math SEO est un plugin gratuit qui permet le pilotage de votre référencement e-commerce :
Balises SEO, schéma de données structurées, compteurs de liens et analyse de la page et des mots clés.
Il s’insère parfaitement dans Elementor et Woocommerce et vous pouvez donc gérer à la fois votre design, votre structure et aussi votre référencement au même endroit !
Si vous souhaitez en savoir plus sur le SEO, vous pouvez consulter notre article sur le référencement WordPress
Créer des pop-up marketing pour votre boutique Woocommerce
Comme pour les modèles, vous avez la possibilité de créer une fenêtre modale (un pop-up) qui est un élément marketing utile en e-commerce : promouvoir des nouveaux produits, sa newsletter, annoncer un événement etc…
Quand vous cliquez sur ajouter, Elementor ouvre la bibliothèque pour vous proposer des modèles de pop-up. Vous pouvez encore une fois partir d’une page blanche comme pour tous les autres créations de templates.
Un fois votre pop-up créé, il faudra définir les conditions d’affichage sur votre site web, sur quelles pages, sous quels conditions etc…
Quelques extensions supplémentaires pour Elementor et Woocommerce
Trois extensions sont à citer si vous souhaitez avoir plus de fonctionnalités avec Elementor et Woocommerce :
- Livemesh Addons for Elementor
- WooLentor – WooCommerce Elementor
- Essential Addons for Elementor
Exemples de site réalisés avec Elementor et Woocommerce
Télécharger gratuitement le guide
"Associer Woocommerce et Elementor Pro"
