07 Nov 2019

Personnaliser facilement Woocommerce avec n’importe quel thème

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 de cet article, vous pouvez aussi utiliser les shortcodes de Woocommerce, je vous invite à lire mon article sur le sujet.

Allez on commence !

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.

> Téléchargez le plugin <

Affichage en back-office de l’extension

Changez les couleurs par défaut de Woocommerce !

Voici un petit plugin avec juste quelques options mais il est très éfficace !
Nativement WC 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.

> Téléchargez le plugin <

Voici les options de couleurs du plugin

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.

> Téléchargez le plugin <

Affichage des éléments WC dans l’éditeur

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.

> Téléchargez le plugin <

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

> Téléchargez le plugin <

Bonus : 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

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.

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.

Abonnement WP Serveur

20 commentaires sur “Personnaliser facilement Woocommerce avec n’importe quel thème
      1. 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

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

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

  1. 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 🙂

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

    1. 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 !

  3. 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,

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

      1. 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,

  4. 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 !

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

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

      1. 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 😉

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *