Mise à jour de l’article le 19/04/2020 : L’article est en vidéo maintenant ! > Voir la vidéo <
Mise à jour de l’article le 07/04/2020 : J’ai rajouté un plugin pour permettre la modification de la page commande et une astuce bonus en bas de l’article !
Woocommerce est vraiment une solution e-commerce facile à mettre en place et très complète avec pas mal d’options. Cependant selon votre thème WordPress certaines modifications sont assez compliqués à réaliser, changer des textes, des couleurs de boutons etc. Voici comment personnaliser votre site e-commerce sans toucher une ligne de code !
Pourquoi personnaliser Woocommerce ?
Les fonctionnalités de base présente dans l’extension de WordPress sont tout à fait adapté à une utilisation e-commerce. Toute personne utilisant ce plugin aura les mêmes options que vous sur leur site. Le but est de vous démarquer mais pas que !
Selon les produits que vous vendez vous allez avoir besoin d’un affichage particulier sur votre site internet. Un exemple très simple, vous proposez de la personnalisation de produit, le texte du call to action d’ajout panier pourrait être modifié par : Je commande ma personnalisation.
Cet article a pour but d’être plus libre face à la personnalisation de son site e-commerce.
En parallèle, vous pouvez lire deux articles : les shortcodes de Woocommerce et Créer des filtres produit sur Woocommerce pour améliorer votre boutique en ligne. Besoin d’inspiration pour votre site ? Lisez mon article, disponible en vidéo aussi : 5 sites e-commerce qui utilisent Woocommerce
Allez on commence avec le premier module !
WooCommerce Customizer, plugin gratuit !
Ce plugin permet de personnaliser vos textes. Vous pouvez traduire le bouton ajouter au panier que ça soit un produit simple ou variable, traduire le bandeau “promo”, le bloc de code de réduction dans le panier etc
Il est très simple et pas du tout compliqué à utilisé. Il s’affiche dans les réglages de Woocommerce dans un nouvel onglet après installation.
Changez les couleurs par défaut de Woocommerce !
Voici un petit plugin avec juste quelques options mais il est très efficace !
Nativement le cms embarque un code couleur (violet, vert…) et le but est de pouvoir adapter la partie e-commerce de votre WordPress à la charte graphique de votre site. En plus de cela, le plugin est gratuit et pas très lourd à installer 🙂
Petite info pour l’avoir testé, une fois installé, vous devez aller dans apparence -> personnaliser pour voir les options du plugin WooCommerce Colors.
Affichez des éléments Woocommerce n’importe où sur votre site !
Vous avez besoin d’afficher sur la page d’accueil les derniers avis de vos clients ? Aucun problème !
Maintenant, vous pouvez ajouter depuis votre éditeur de page n’importe quel élément appartenant à WC. Cette option (capture ci-dessous) est intégrée directement sur les dernières versions de Woocommerce.
Vous pouvez désormais afficher des produits dans vos articles blog par exemple, idéal sur vous écrivez quelque chose qui concerne un produit en particulier.
Il existe un plugin si vous n’avez pas cette option, il nécessite d’avoir au moins WordPress 5.0, il fonctionne avec le nouvel éditeur Gutenberg.
Personnaliser la page mon compte de Woocommerce
Les pages de compte client ne sont pas du tout modifiables depuis le back-office.
Avec ce plugin gratuit vous allez pouvoir gérer les différents éléments que vous voulez mettre à disposition dans le compte de vos clients. Vous pouvez aussi choisir l’ordre d’affichage des éléments dans le menu.
Pour aller plus loin sur la modification de la page mon compte, vous avez un plugin payant de Yith qui permet de faire énormément de chose : Voir le plugin YITH WOOCOMMERCE CUSTOMIZE MY ACCOUNT PAGE
Modifier la page commande de Woocommerce
L’optimisation des ventes peut se faire aussi sur le tunnel de vente et plus particulièrement sur les champs demandés à l’inscription. Plus vous allez demander d’informations (et de champs obligatoires), plus le client va prendre du temps à finir sa commande et il risque d’abandonner.
Avec WooCommerce Checkout Manager vous allez pouvoir personnaliser les champs du tunnel de commande de Woocommerce. Vous allez définir ceux obligatoires, ceux à ne pas afficher, ajouter des nouveaux champs etc… C’est vraiment idéal de pouvoir personnaliser les champs à saisir selon son activité.
Ajouter un panier fixe sur votre boutique Woocommerce
Petite astuce avec un plugin abordable en prix, vous pouvez ajouter un bouton fixe panier sur votre site internet qui va afficher le détail panier. Cela évite au client d’avoir plusieurs pages à visiter. On passe de l’ajout panier à la page commande sans visiter la page cart (panier) de Woocommerce.
Voici le plugin : WooCommerce Floating Cart
Importez vos produits en masse dans Woocommerce
Avec un fichier CSV, vous pouvez importer sans limite des produits dans votre Woocommerce. Plus besoin de créer un par un chaque élément depuis le back-office, vous allez gagner beaucoup de temps !
Je vous invite à lire l’article de Lisa Lelimouzin sur ce sujet : Import de produits par CSV sur WooCommerce
J’ai réalisé une vidéo Youtube tutoriel, je vous invite à la regarder et à vous abonner à ma chaîne 🙂
Votre site Woocommerce est prêt ? Il vous faut du trafic maintenant !
Une fois que notre site e-commerce est fonctionnel, on a besoin d’acquérir du trafic pour le développer.
Vous allez créer du contenu pour votre site et l’optimiser pour Google. On veut tous avoir un site avec du trafic “gratuit” grâce à notre positionnement sur des mots-clefs Google.
C’est un domaine pas si simple que cela, vous devez faire pas mal de chose pour vraiment optimiser le référencement naturel de votre site.
Je vous préconise de télécharger (gratuitement) le livre blanc d’Olivier Clémence sur le sujet : https://www.reussir-mon-ecommerce.fr/livre-blanc-seo/
Il a écrit un très bon article blog sur le référencement naturel en e-commerce. J’insiste un peu sur la partie e-commerce parce que vous trouverez souvent des ressources qui sont adaptées à un simple site vitrine.
Voici son article : https://www.reussir-mon-ecommerce.fr/referencement-ecommerce/
Un dernier mot sur cet article.
Vous pouvez rajouter une fonctionnalité appréciable : Des bons cadeaux ! J’ai écrit un article qui vous explique comment créer des bons cadeaux sur Woocommerce, je vous laisse lire l’article sur ce sujet.
Vous avez aussi d’autres plugins premium sur Code Canyon qui méritent d’être testés.
Voilà ! J’espère que ces plugins vont vous aider à personnaliser votre site e-commerce WordPress 🙂
Si vous utilisez d’autres plugins de ce genre, laissez-moi un commentaire pour aider la communauté !
PS : Vous pouvez aller voir mon article blog pour ajouter un système de relancer de panier abandonnée sur votre boutique et si vous souhaitez créer un Woocommerce pour les pros, je vous invite à consulter ce lien : Comment créer un site B2B professionnel sur Woocommerce.
Merci pour ses astuces !
David.
Au plaisir !
bonjour je suis entrain de créer ma boutique enligne, cependant le fait de voir lorsque j’arrive au niveau du panier certains mots ecrit en anglais ( product , quantity , price etc ) comment faire pour changer et mettre en Français svp
Bonjour,
Utilisez le plugin Loco Translate, c’est gratuit.
Si vous voulez quelque chose de premium, il y a WPML
Ok merci pour votre réponse
Désolé de vous déranger de nouveau
Comment faire pour exemple
Un produit coûte 4 € de base
Et lorsque la personne ajoute un supplément de 0,50€ par exemple cela ce calcule pour donner 4,50€ au paiement final
Je sais que il faut faire variable et tout mais bon je suis perdu
Vous avez déjà posé cette question sur Youtube, voici ma réponse :
Vous devriez regarder du côté de ce plugin : Extra Fees Plugin for WooCommerce
Bonjour,
Mon site vend des produits personnalisables mais je n’arrive pas à ajouter un module sur la page produit pour que le client puisse écrire les détails avant de l’ajouter au panier. Il faudrait que je puisse avoir un petit commentaire de sa part dans sa commande avec ce qu’il a choisi, avez-vous une solution pour m’aider ?
Merci 🙂
La solution la plus simple est d’utiliser le champ infos complémentaires dans le panier.
Cependant si on veut ajouter un champ sur le produit (donc avant l’ajout au panier) il faut utiliser un plugin ou faire un développement.
Testez ce plugin gratuit : https://wordpress.org/plugins/product-input-fields-for-woocommerce/
Sinon 2 plugins complets permettent de faire pas mal de chose : 1.envato.market/Kbg2N / 1.envato.market/zMRXr
Bonjour tout le monde, je travail actuellement sur un site sous WordPress fait uniquement avec elementor, et j’aimerai faire en sorte que les avis woocommerces soient dans une div que je puisse modifier, cependant je n’y arrive pas étant donné que les avis sont directement gérés via WooCommerce…une idée de comment je pourrais procéder ? Merci de vos conseils Matthieu
Nativement les avis Woocommerce sont uniquement liés à un produit en particulier.
Il est donc difficile d’extraire des avis de produits pour les afficher ailleurs (sauf si vous avez un plugin particulier)
Il faudrait voir pour utiliser un module permettant d’afficher les avis sous forme de shortcode à placer n’importe où comme celui-ci.
Vous devriez trouver des infos chez wpmarmite.com, ils sont expert sur Elementor !
Salut et merci beaucoup pour tes conseils dans cet article, cela va m’aider à personnaliser la boutique WooCommerce que je suis entrain de créer.
Bonjour,
Je n’arrive pas à modifier les produits avec woo commerce AVADA “Bakery theme”
Dans l’ensemble du site avec FUSION BUILDER, je peux modifier sans problème
Mais quand je suis dans les produits pour modifier j’ai un pavé de code codage absolument incompréhensible.
Comment cela se fait-il ?
Merci pour votre retour,
Bonjour,
Je ne suis pas expert sur Avada, il faudrait regarder plus en détail votre problème.
Si Avada ne s’affiche plus sur les produits, testez de regarder dans le fusion builder > réglage si le constructeur de page de Avada est bien sélectionne pour les produits.
S’il n’est pas coché, alors Worpdress affiche l’éditeur classique et donc les anciens shortcodes du constructeur de page
Matthieu,
Merci pour votre réactivité !
En plus c’était exactement ce qu’il fallait faire, plusieurs étaient décochées.
Du coup, c’est rentré dans l’ordre !
merci beaucoup,
Hello,
J’ai un souci avec WOOCOMMERCE CUSTOMIZER, le problème c’est que ça ne fonctionne pas avec les produits réservables, créés avec les pluggins de booking…
Si jamais tu as une astuce pour ça !
Merci a toi !
Bonjour,
C’est un problème de compatibilité entre les modules.
Il faudrait voir avec un des développeurs des 2 plugins, s’ils ont la possibilité d’intervenir sur votre site pour corriger les problèmes.
Les plugins de booking ou thèmes vont utiliser des styles propres à eux (ou des fonctions) et donc Customizer ne peut pas faire de “surcouche” par dessus ce genre de plugin.
Bonjour,
J’ai une boutique woocommerce avec le thème Astra et Elementor et dans la partie notification de la boutique woocommerce, si je l’active, je n’arrive pas a changer ni la couleur ni la taille de la bande?
Auriez-vous une solution?
Merci d’avance.
Si vous activez quoi ?
Dans la partie personnaliser du thème astra a une partie WooCommerce et après une partie notification de la boutique et dans cette partie je n’arrive pas à changer ni la taille ni la couleur. Cette partie de la notification de la boutique c’est pour avoir un texte(promotion ou livraison offerte ou black friday) sur tout le site, haut de chaque page… je ne sais pas le nom exact…🤷♂️
Je ne sais pas si je me suis fait comprendre!?!?
Désolé mais je ne suis pas un expert de l’informatique…
Merci d’avance 😉
Du coup ce n’est pas avec un plugin de cet article ?
Vous devez avoir une erreur Javascript sur votre thème, je vous conseille de contacter les développeurs du thème astra (avec l’achat de ce template vous avez toujours une partie support).
Sinon faire appel à un professionnel pour essayer de débloquer votre thème
Bonjour,
Savez-vous comment on peut enlever “sous-total” dans les pages panier et checkout (woocommerce avec astra et elementor) ?
Vous ne pouvez pas le gérer.
le mieux est de le masquer en CSS :
.cart-subtotal {
display: none
}
Ok. Merci beaucoup pour votre réponse (rapide en plus 👍🏻)
Bonjour, pour ma part c’est le terme “Étiquette” que j’aimerais remplacer par “Région”
Utilisez un plugin de traduction sinon il faudrait créer une taxonomy région.
Les étiquettes ce sont des éléments natif dans WordPress.
Vous pouvez sinon voir pour gérer avec des catégories
Merci mais je ne trouve pas la traduction quand je modifie le .po ou mo rien ne change
sinon comment faire pour créer une taxinomy ?
cordialement
P. vermander
Il faut toucher au code et ensuite faire l’intégration dans votre thème, c’est un peu de boulot.
Recherchez un plugin qui peut faire cela je pense
Merci Matthieu, mais je ne connais pas de plugin de ce gernre
Cordialment Philippe
Bonjour Matthieu !
Merci pour cet article très intéressant. Sauriez vous comment réduire les bandeaux “Code promo” ou “Mettre à jour mon panier” lorsque nous arrivons sur le panier ?
Quand je dis “réduire”, je parle de la taille de la police : )
D’avance, merci pour la réponse !
Cordialement
Gauthier
Vous devez forcément le faire en CSS, ça ne sera pas administrable .
Pour la police il faut utiliser font-size.
Votre thème a peut-être un éditeur pour personnaliser CSS sans devoir se connecter à votre serveur et éditer les fichiers