1 Introduction
La page produit est l’étape finale du tunnel d’acquisition client. C’est à ce moment-là que le potentiel client va passer à l’achat. Or, WooCommerce est malheureusement assez austère niveau fonctionnalités. Il n’a par exemple aucun bouton d’achat direct ! Pour acheter, il faut passer par l’étape panier, rallongeant les étapes pour qu’un client puisse se procurer son produit.
C’est selon la configuration de votre page produit que vous pourrez faire la différence sur la décision finale ! Vous verrez donc dans ce tuto comment favoriser l’acte d’achat sur votre page produit.
2 Les limtes de woocommerce seul
Avant de partir sur la configuration des boutons et des attributs, il est important de connaître ce que propose WooCommerce et les limites de celui-ci.
Regardons de plus près les widgets natifs de WooCommerce. Nous allons nous concentrer sur deux éléments cruciaux : le Bouton d’ajout au panier et les Variations.
1. Le bouton d’achat :
Vous n’avez accès qu’au widget ‘Ajouter au panier’. C’est le standard, mais il a un gros défaut : il ne permet pas de proposer l’achat immédiat (Buy Now) pour accélérer la commande.
2. Les variations (Le vrai problème) :
C’est ici que les limites se font sentir. Prenons l’exemple de ma base de tête ‘SkullCat’. Pour ce produit, j’ai créé deux attributs :
La Couleur (Bleu, Rouge, etc.)
Les Options supplémentaires (Cornes, Yeux, Cils, Attaches).
Nativement, WooCommerce va vous demander de créer ces attributs et de générer les variations. Jusqu’ici, tout semble normal. Mais regardez le résultat dans la démonstration ci-dessous.
🔥 Le défi : Essayez de sélectionner une tête Bleue avec des Attaches ET des Cornes en même temps.
color: Aucune sélection
Options supplémentaires
Comme vous pouvez le constater, avec la configuration de base de WordPress, il est impossible de sélectionner plusieurs valeurs du même attribut. WooCommerce ne permet pas de le faire de façon native.
Il n’affiche pas non plus le détail du prix, ni les boutons d’achat direct et PayPal. C’est donc là tout l’intérêt de ce tuto. Je vais vous accompagner pour passer de ce résultat basique au résultat final de la page produit de ce site !
3 Les variables
3.1 L'extension
La première étape de ce tutoriel consiste à créer nos champs personnalisés (les options supplémentaires).
Pour commencer, nous allons devoir installer un plugin. Comme nous l’avons vu, WooCommerce ne permet pas nativement d’ajouter des options payantes ou complexes. Nous allons donc combler ce manque.
Rendez-vous dans l’onglet Extensions et téléchargez PPOM for WooCommerce (développé par Themeisle). C’est cet outil puissant qui va nous permettre de créer nos options (cornes, yeux, attaches, etc.).
Une fois l’extension installée et activée, cliquez dessus dans le menu. Vous devriez arriver sur cette interface :
3.2 Créer les champs
Voici le tableau de bord de PPOM. C’est ici que sont listés tous vos groupes d’options (vous pouvez voir en exemple ceux déjà créés pour le site The Lair).
1. Créer le groupe : Cliquez sur le bouton vert Add New Group. Dans le champ Meta Group Name, donnez un nom à votre groupe. Ce nom est purement administratif (invisible pour le client). Pour ce tuto, nommons-le : P | C | A | Y (un moyen mnémotechnique pour Paupière, Cils, Attaches, Yeux).
2. Ajouter les champs : Cliquez ensuite sur le bouton Add Field. Une liste de choix apparaît : sélectionnez Checkbox Input.
Pourquoi ce choix ? Contrairement aux boutons radio ou aux listes déroulantes, la Checkbox (case à cocher) est le seul format qui permet au client de sélectionner plusieurs options en même temps (ex: avoir des Cornes ET des Yeux).
Une fenêtre de configuration (popup) va alors s’ouvrir pour paramétrer ce champ. Voici les options principales que vous devez connaître.
Il sagit du titre qui s’affichera sur votre page produit
Les attributs qui seront cochés par défaut
Description qui s’affichera a coté du filtre
ID d’identification obligatoire (automatique)
Variante obligatoire
Ajoute les frais au paniers
Après avoir paramétré ces champs, vous allez pouvoir rajouter les attributs. Il vous suffira de cliquer sur Add Option puis sur le bouton vert (+). Cela vous ajoutera une ligne pour chaque attribut.
Détaillons maintenant les champs disponibles pour chaque option :
Option (Nom) : C’est le nom qui sera visible par le client (ex: ‘Cornes rouges’).
Prix (Price) : Indiquez ici le supplément à payer. Si vous souhaitez au contraire faire une réduction, utilisez le champ ‘Rabais’ ou mettez un signe moins devant le prix (ex: -5).
Poids (Weight) : Attention, ne confondez pas avec le prix ! Si votre option alourdit le colis (ex: une grosse pièce en métal), indiquez son poids ici pour que les frais de port soient recalculés correctement.
Infobulle (Tooltip) : C’est le petit texte d’aide qui s’affiche au survol de la souris (souvent symbolisé par un petit point d’interrogation). Idéal pour préciser un détail technique.
Pour ce tutoriel, restons simples : nous allons uniquement remplir le Nom et le Prix. Pour cet exercice, créez les options suivantes : Paupières, Attaches, Cornes et Yeux. Fixez le prix de chacune à 5€, puis enregistrez le champ.
⚠️ Important : La limite de l’extension Vous allez vite remarquer une contrainte : cette extension fonctionne sur le principe du ‘Tout ou Rien’. On ne peut pas reprendre un groupe existant et masquer juste une case pour un produit spécifique.
Exemple : Si demain vous vendez un produit qui ne possède que des Yeux et des Cils (sans cornes), vous ne pourrez pas réutiliser ce groupe en cachant les cornes. Vous serez obligé de créer un nouveau groupe contenant uniquement ces deux choix.
C’est pour cette raison que vous voyez autant de lignes différentes sur ma capture d’écran : j’ai dû créer un groupe spécifique pour chaque variation de produit.
3.3 Lier les produit
Nous arrivons à l’avant-dernière étape. Maintenant que vos options sont créées, il faut les assigner aux produits. Il existe deux méthodes pour le faire :
1. La méthode Dynamique (Par Catégorie) Elle permet d’appliquer le champ à une catégorie entière (ex: la catégorie ‘Thérian’).
Avantage : C’est automatique. L’option s’ajoutera à tous les produits existants et futurs de cette catégorie.
Risque : Attention à ne pas appliquer l’option à un produit de la catégorie qui n’en a pas besoin.
2. La méthode Manuelle (Produit par Produit) Ici, vous sélectionnez spécifiquement les produits un par un.
Avantage : C’est très précis (« chirurgical »).
Inconvénient : C’est plus long, et il ne faut pas oublier de le faire à chaque fois que vous créez un nouveau produit.
Choisissez la méthode la plus adaptée à votre catalogue !
Une astuce pour gagner du temps : Vous pouvez vérifier et ajouter vos options directement depuis la liste générale des produits.
Depuis l’installation de PPOM, une nouvelle colonne est apparue dans votre tableau de bord. Elle vous indique d’un coup d’œil l’état de chaque produit :
Si le produit est déjà configuré : Le nom du groupe (Meta Group Name) s’affiche. C’est là qu’on réalise l’importance d’avoir choisi un nom clair au début !
Si le produit n’a pas d’options : Un bouton Add fields apparaît. Il vous suffit de cliquer dessus pour lier un groupe d’options sans devoir ouvrir la fiche produit.
C’est la méthode idéale pour vérifier rapidement que vous n’avez oublié aucun article !
Méthode manuelle
Méthode Dynamique
3.4 Le CSS
Comme nous l’avons déjà vu dans le tutoriel sur la ‘Sidebar dynamique’, nous sommes souvent obligés d’ajouter du code CSS, car les réglages de base des extensions sont parfois trop restreints.
Malheureusement, PPOM n’échappe pas à la règle : ses options de style natives sont assez basiques. Pour obtenir un design soigné, nous allons donc devoir passer par l’outil ‘Personnaliser le thème’ et ajouter nos propres règles CSS.
Pas d’inquiétude ! Comme pour les précédents tutoriels, je vais vous fournir le code CSS complet pour notre exemple.
⚠️ Attention cependant : Il est possible que les identifiants (classes CSS) de votre site soient différents des miens. Si le code ne fonctionne pas immédiatement, retournez voir le Chapitre 6 du tutoriel ‘Comment créer une sidebar dynamique’. J’y explique la méthode pour inspecter votre site et demander à Gemini d’adapter le code spécialement pour vous.
CSS additionnel
/* 1. CACHER la case à cocher carrée d'origine */
/* On utilise la classe spécifique vue dans ta capture */
input.ppom-check-input {
display: none !important;
}
/* 2. STYLISER le texte pour qu'il ressemble à un bouton */
/* On cible le 'span' qui a la classe 'ppom-input-option-label' */
span.ppom-input-option-label {
display: inline-block;
background-color: #d80000; /* Rouge */
color: white;
padding: 8px 15px; /* Espace interne */
border-radius: 15px; /* Bords arrondis (Pilule) */
border: 1px solid #000;
font-weight: bold;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease; /* Animation fluide */
margin-right: 5px; /* Espace entre les boutons */
margin-bottom: 5px;
}
/* 3. L'ETAT ACTIVÉ (Quand c'est coché) */
/* La logique : Si l'input juste avant (+) est coché (:checked), alors le span devient noir */
input.ppom-check-input:checked + span.ppom-input-option-label {
background-color: #000000 !important; /* Noir */
border-color: #000000 !important;
}
/* 4. Petit effet de survol (Hover) */
span.ppom-input-option-label:hover {
opacity: 0.8;
}
/* 5. Ajustement du prix (le petit texte +5,00€) */
/* Pour qu'il soit bien intégré visuellement */
span.ppom-option-label-price {
font-size: 0.9em;
opacity: 0.9;
margin-left: 5px;
}
4 Le bouton d'achat
4.1 Télécherger et paramétrer l'extension
Bonne nouvelle : la partie la plus complexe est derrière nous ! Les étapes suivantes seront beaucoup plus rapides.
Nous allons maintenant ajouter un bouton ‘Achat Immédiat’. Pourquoi ? Pour faciliter la vente. En e-commerce, chaque clic supplémentaire est un risque de perdre le client. La version de base de WooCommerce propose uniquement ‘Ajouter au panier’, ce qui rallonge le processus de commande.
Pour corriger cela, nous allons installer l’extension WPC Buy Now Button for WooCommerce créée par le studio WPCleaver (une référence très fiable dans l’écosystème WooCommerce).
Comment ça marche ? L’extension va automatiquement ‘greffer’ ce nouveau bouton juste à côté du bouton ‘Ajouter au panier’. Vous n’avez donc aucun widget ou bloc à ajouter manuellement sur votre page produit.
Il vous faudra simplement parametrter en interne l’extension. Pour cela ouvrer ces parmatre sur votre espace de bureau. Vous devriez attérirt sur cette interface
Emplacement du bouton sur la page produit
Supprimer le bouton « ajouter au panier »
Titre visible du bouton
Emplacements du bouton sur la page archeve (page boutique)
Redirection du bouton
Catégorie sur lequel le bouton s’affiche
Suprime le contenue du panier avant de passer a l’achat
Analysons ensemble les réglages à effectuer, de haut en bas (voir l’image ci-dessus) :
Position sur l’archive : Choisissez Aucun (cacher). Afficher ce bouton sur les pages catalogues surchargerait visuellement vos grilles de produits.
Position sur un seul (Page Produit) : Ici, c’est selon vos préférences. Pour ce tutoriel, j’ai choisi ‘Avant le bouton Ajouter au panier’, ce qui le placera généralement à gauche.
Paramètre (Texte) : Remplacez le texte par défaut (‘buy-now’) par ‘Acheter maintenant’ pour que ce soit en français.
Catégories : Laissez sur Toutes les catégories pour que l’option s’applique à toute votre boutique.
Options de comportement (Masquer / Réinitialiser) : Laissez ces deux options sur Non (comme expliqué précédemment, c’est mieux pour l’expérience utilisateur).
Action : Vérifiez que c’est bien réglé sur ‘Rediriger vers la page de paiement’. C’est tout l’intérêt de ce bouton : sauter l’étape du panier !
Une fois configuré, n’oubliez pas de cliquer sur le bouton bleu Enregistrer les modifications en bas de page.
4.2 Styliser avec du CSS
Pour avoir un renduit parfaitement propre, il vous faudra générer un peu de code CSS afin de styliser le tout. Les deux boutons étant liés, le CSS s’appliquera souvent aux deux. En utilisant la même méthode que pour les champs PPOM, il vous faudra récupérer votre code et faire un prompt à Gemini sur le design des boutons que vous souhaiterez. Pour ce tuto, cette partie est assez court car cela demande tres peux de code a rajouter. Voici le bout de code a rajouter sur le widget ajjouter au parnier dans la partie avancée > CSS personnalisée
CSS personnalisée
/* ======================================================= */
/* HAUTEUR UNIFORME : BOUTONS PANIER & ACHAT */
/* ======================================================= */
/* On cible les deux boutons en même temps pour qu'ils soient jumeaux */
button.single_add_to_cart_button,
button.wpcbn-btn {
/* 1. Réglage de la hauteur (Change 50px par ce que tu veux) */
height: 52px !important;
min-height: 50px !important;
/* 2. On s'assure que le texte est bien centré verticalement */
line-height: 1 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
/* 3. Utilisation de Flexbox pour un centrage parfait du texte */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
/* 4. Petit ajustement de l'espacement si besoin */
margin-bottom: 10px !important;
vertical-align: middle !important;
}
/* Optionnel : Si tu veux les écarter un peu l'un de l'autre */
button.wpcbn-btn {
margin-left: px !important; /* Espace à gauche du bouton "Acheter" */
}
5 Option paypal
Intégrer PayPal est un atout majeur pour votre boutique. Au-delà de la sécurité, c’est un argument commercial puissant, notamment grâce à la facilité de paiement en 4 fois sans frais.
1. Installation Commencez par télécharger et activer l’extension officielle : WooCommerce PayPal Payments.
2. Connexion du compte Rendez-vous dans WooCommerce > Réglages > Paiements. Activez la ligne ‘PayPal’ et cliquez sur Gérer. Note importante : La connexion nécessite un compte PayPal Business. Si vous utilisez un compte personnel, l’assistant vous proposera de le convertir gratuitement en compte professionnel (Business) en quelques clics. Suivez simplement la procédure guidée.
3. Activation du 4X sans frais Une fois connecté, restez dans les réglages de l’extension. Cherchez la section ‘Vaulting & Pay Later’ (ou Méthodes de paiement) et assurez-vous d’activer l’option PayPal Pay Later. C’est ce qui affichera le bouton ‘Payer en 4X’.
4. Personnalisation du style Par défaut, les boutons PayPal ont une couleur imposée (Jaune/Or, Bleu ou Noir) pour rester reconnaissables. Vous pouvez modifier ces couleurs dans les réglages de l’extension. Toutefois, si vous trouvez que les boutons sont trop larges ou mal alignés avec votre bouton ‘Ajouter au panier’, nous utiliserons la même méthode que précédemment : un petit bout de code CSS pour ajuster les marges et la taille.
