Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. WordPress et WooCommerce (2e édition)
  3. L’achat des produits
Extrait - WordPress et WooCommerce (2e édition) Créer votre boutique en ligne
Extraits du livre
WordPress et WooCommerce (2e édition) Créer votre boutique en ligne
2 avis
Revenir à la page d'achat du livre

L’achat des produits

Les objectifs

Dans ce chapitre, nous allons étudier comment se passe l’achat des produits par un client. Nous allons dans un premier temps créer un compte client. Ensuite, nous détaillerons comment s’achète chaque type de produit : les produits simples, les produits groupés et externes et les produits variables. Nous verrons aussi le cas de figure des produits téléchargeables et comment acheter des produits avec des codes promo. Enfin, nous étudierons la gestion des stocks en fonction des achats.

Le catalogue des produits

Lorsqu’un visiteur arrive sur la page d’accueil du site, il y affiche le catalogue de produits.

images/C08new-001.png

Ensuite, le visiteur peut cliquer sur un produit pour afficher tous les détails de celui-ci.

images/C08new-002.png

Gérer les données des clients et la confidentialité

1. Les données personnelles

Actuellement, la gestion des données personnelles et la politique de confidentialité, sont des éléments extrêmement important dans la gestion des sites web, et encore plus, dans la gestion des sites e-commerce. C’est un point sur lequel vous devez apporter toute votre attention. WooCommerce vous permet de gérer au mieux ces éléments.

 Dans le menu WooCommerce, choisissez Réglages.

 Cliquez sur l’onglet Comptes et confidentialité.

 Vos clients sont en droit de demander que toutes leurs données personnelles soient effacées de votre boutique. C’est avec les options Demandes d’effacement de données et Suppression de données personnelles que vous allez gérer ces demandes.

images/C08new-006.png

 Dans les options de la zone Conservation des données personnelles, vous devez déterminer combien de temps seront conservées les données personnelles qui ne sont plus nécessaires aux traitements des paiements et des comptes.

images/C08new-007.png

2. La politique de confidentialité

En ce qui concerne la politique de confidentialité, vous pouvez indiquer quelle est la page qui sera utilisée pour l’afficher. À l’installation de WordPress, une page nommée Politique de confidentialité est déjà...

Les comptes clients

Pour passer commande, les visiteurs peuvent avoir besoin de créer un compte ou peuvent acheter sans créer de compte. C’est vous qui le décidez par un réglage.

 Dans le menu WooCommerce, choisissez Réglages.

 Cliquez sur l’onglet Comptes et confidentialité.

 Dans les options Paiement invité, cochez ou non l’option Autoriser les clients à passer commande sans compte.

images/C08new-003.png

Si cette option est cochée, les visiteurs pourront acheter des produits sans créer de compte. Si elle est décochée, les visiteurs devront obligatoirement créer un compte avant d’acheter des produits. 

Gérer les comptes clients

1. L’utilité de créer un compte

Pour les clients réguliers de votre boutique, créer un compte n’a que des avantages, cela leur permettra de mémoriser tous les paramètres d’adresse de livraison et de facturation, d’avoir un historique des commandes...

2. Paramétrer la création du compte

Dans un premier temps, en tant qu’administrateur de la boutique, vous devez paramétrer la création des comptes clients.

 Dans le menu WooCommerce, choisissez Réglages.

 Cliquez sur l’onglet Avancé.

 Dans la liste déroulante Page Mon compte, sélectionnez la page de WooCommerce qui sera utilisée pour gérer les comptes de chaque client. Par défaut, c’est la page Mon compte.

images/C08new-004.png

Vous pouvez choisir une page que vous auriez créée vous-même ou laisser la page de WooCommerce pour plus de facilité.

 Si vous apportez des modifications, cliquez sur le bouton Enregistrer les modifications.

 Dans le menu WooCommerce, choisissez Réglages.

 Cliquez sur l’onglet Comptes et confidentialité.

Vous pouvez gérer la création des comptes des clients avec les options Création de compte.

images/C08new-005.png
  • L’option Autoriser les clients à créer un compte au cours de la validation de commande cochée, permet aux clients de créer leur compte au moment de la validation de leur commande.

  • L’option Autoriser les clients à créer un compte sur la page « Mon compte » cochée, permet aux clients de créer leur compte dans la page Mon compte.

  • L’option Lors de la création d’un compte, générer automatiquement un identifiant pour le client, à partir de leur nom ou leur adresse de messagerie cochée, permettra de générer automatiquement un identifiant pour leur compte à partir...

Acheter un produit simple

1. Acheter le produit

À nouveau, si besoin est, déconnectez-vous en tant qu’administateur de la boutique, pour ensuite vous connectez en tant que client. Vous pouvez aussi utiliser deux navigateurs différents. 

Premier type de produit que les clients peuvent acheter dans la boutique, ce sont les produits simples. Sur la page d’accueil, le client peut cliquer sur le produit qui l’intéresse.

Dans cet exemple, c’est la photo intitulée Saint-Malo.

images/C08new-033.png

 Le client peut cliquer sur le bouton Ajouter au panier ou bien cliquer sur son image pour afficher les détails, comme dans cet exemple.

images/C08new-034.png

Tous les détails apparaissent : le prix, les avis, le nombre en stock, le nombre d’exemplaires voulu (2 dans cet exemple)...

 Le client peut alors cliquer sur le bouton Ajouter au panier.

images/C08-028.png

WooCommerce prévient le client de son ajout :

images/C08-029.png

Nous retrouvons cette information du panier, à droite du menu principal :

images/C08new-035.png

Maintenant, le client peut poursuivre sa visite dans le site et acheter d’autres produits, comme dans l’exemple qui suit.

2. Afficher le panier

Quand le client a terminé ses achats, il peut afficher son panier.

 Au simple survol du bouton Panier à droite du menu principal, le contenu du panier s’affiche :

images/C08new-036.png

 Dans le menu principal, le client clique sur Panier.

images/C08new-037.png

3. Gérer les produits du panier

Pour le client, il n’est...

Acheter un seul exemplaire d’un produit

Avec l’exemple précédent, le client pouvait acheter plusieurs exemplaires du même produit. Mais si le gestionnaire de la boutique le décide, il peut imposer de ne pouvoir acheter qu’un seul exemplaire d’un produit.

Le paramétrage se fait dans la gestion de l’inventaire du produit.

 Dans le menu Produits, choisissez Tous les produits.

 Ouvrez un produit.

 Affichez l’onglet Inventaire.

 Cochez l’option Vendre individuellement.

images/C08new-045.png

 Dans le module Publier, cliquez sur le bouton Mettre à jour.

À l’affichage de la page de détails du produit, le champ qui permet d’acheter plusieurs exemplaires du produit n’est pas présent.

images/C08new-046.png

Le client ne peut effectivement acheter qu’un seul exemplaire du produit.

Dans le panier, le client ne peut pas changer le nombre d’exemplaires du produit :

images/C08new-047.png

Acheter un produit groupé

Les produits groupés permettent d’acheter plusieurs produits individuels appartenant à une même famille. Dans notre exemple, c’est une série de photos sur New York.

Pour rappel, voici le module Données produit, avec l’onglet Produits liés affiché :

images/C08new-048.png

À l’affichage de la page de détail du produit groupé, le client visualise chaque produit individuel.

images/C08new-049.png

Le client peut alors acheter un ou plusieurs exemplaires de chaque produit individuel. Mais si un des produits individuels ne peut être acheté qu’à un seul exemplaire, le fait d’être dans un produit groupé ne change rien. Dans cet exemple, c’est le cas pour le produit Le pont de Brooklyn.

Le client peut aussi cliquer sur chaque produit individuel pour afficher la page de détails de celui-ci.

Une fois que le client a fait son choix, il peut cliquer sur le bouton Ajouter au panier.

images/C08new-050.png

WooCommerce affiche les produits individuels dans le panier :

images/C08new-051.png

La gestion des produits et du panier est en tout point similaire à l’achat d’un produit simple.

Acheter un produit externe ou affilié

Les produits externes ou affiliés sont des produits que vous proposez à l’achat, mais dont l’achat se fait dans une autre boutique.

Dans la page de détails, le client ne peut acheter qu’un seul exemplaire du produit externe.

images/C08new-052.png

La mise en page du thème enfant Boutique pour les produits externes est un peu différente de celle des autres produits.

Enfin, le bouton d’ajout au panier à un libellé spécifique Achetez cette photo.

Ce libellé se gère dans le module Données du produit, dans l’onglet Général, dans le champ Libellé du bouton.

images/C08new-053.png

Quand le client clique sur ce bouton, il est redirigé vers la boutique où se fait l’achat. Cette URL est indiquée dans le champ URL du produit.

Il n’y a donc pas de gestion du panier dans votre boutique.

Acheter un produit variable

Les produits variables permettent de proposer des options sur le produit.

Dans la liste des produits, pour un produit variable, le bouton d’ajout au panier est libellé Choix des options.

images/C08new-054.png

Dans cet exemple, le choix des options porte sur les éléments Cadre et Verre.

images/C08new-055.png

Le client clique dans les listes déroulantes Cadre et Verre pour choisir une option. Et en fonction des attributs indiqués, il peut avoir plusieurs choix ou n’avoir qu’un seul choix.

Les choix pour l’option Cadre :

images/C08new-056.png

Plusieurs choix sont proposés pour l’option Verre :

images/C08new-057.png

Pour rappel, les options sont indiquées comme attribut dans le paramétrage du produit variable.

 Dans le module Données produit du produit variable, dans l’onglet Attributs, vous retrouvez la liste des attributs définis.

images/C08new-058.png

Le client peut faire des choix et les annuler pour en faire d’autres, en cliquant sur le bouton Effacer

Premier choix :

images/C08new-059.png

Deuxième choix :

images/C08new-060.png

À chaque fois, le prix est automatiquement actualisé.

Ensuite, le client peut acheter un seul exemplaire ou plusieurs selon le paramétrage et cliquer sur le bouton Ajouter au panier.

images/C08new-061.png

Le produit variable est ajouté au panier avec le détail des options.

images/C08new-062.png

La gestion des produits et du prix total du panier est en tout point similaire à ce que nous avons vu précédemment.

Acheter un produit virtuel et/ou téléchargeable

Les produits virtuels ne sont pas des produits physiques, mais des services, des formations... et les produits téléchargeables ne sont eux non plus pas expédiés.

Leur achat ne diffère pas des produits simples. Dans cet exemple, le produit virtuel est en promotion. De ce fait, dans la page des détails, un cartouche PROMO  ! est affiché par le thème enfant Boutique et les prix initiaux et en promotion sont affichés.

images/C08new-063.png

Pour rappel, la promotion sur le prix est définie dans le module Données produit, dans l’onglet Général, dans les champs Tarif promo (€) et Dates de promo.

images/C08new-064.png

Le client peut cliquer sur le bouton Ajouter au panier de manière classique.

Le produit est bien dans le panier :

images/C08new-065.png

La gestion du produit est similaire à ce que nous avons déjà vu.

En ce qui concerne les prix, il n’y a bien sûr pas de frais d’expédition, puisqu’il ne s’agit pas d’un produit physique.

Acheter avec un code promo

En tant que gestionnaire de la boutique, nous avons la possibilité de proposer des codes promo temporaires dans la boutique. Ces codes promo pourront faire partie d’une campagne marketing auprès des clients. Une fois en possession de ce code promo, le client pourra l’utiliser dans le calcul de son panier. Reportez-vous au chapitre Les produits de la boutique, au titre Les promotions.

Dans cet exemple, nous allons utiliser le code promo Salon du voyageur dont voici les paramètres :

 Dans le menu WooCommerce, choisissez Codes promo.

 Dans la liste des codes promo, ouvrez celui nommé Salon du voyageur.

Dans le module Données du code promo, dans les onglets vous accédez à tous les paramètres.

Onglet Général :

images/C08new-066.png

Dans cet exemple, nous avons une remise générale de 10 % et une livraison gratuite.

Onglet Restriction d’usage :

images/C08new-067.png

Notez qu’il faut que le client dépense au moins 50 euros pour bénéficier de la remise.

Onglet Limites d’utilisation :

images/C08new-068.png

Dans cet exemple de panier, le client a acheté pour 316 euros TTC de produits.

images/C08new-069.png

Le client a reçu le code promo et pour l’utiliser il faut le saisir dans le champ Code promo.

images/C08new-070.png

 Ensuite, il faut cliquer sur le bouton Appliquer le code promo.

images/C08new-071.png

WooCommerce prévient que le code promo a bien été appliqué :

images/C08new-072.png

WooCommerce a automatiquement...

Les achats et le stock

1. La gestion du stock

Lorsque vous ajoutez des produits à vendre dans votre boutique, vous pouvez gérer leur stock ou pas. C’est ce que nous avons étudié dans le chapitre La structure de la boutique.

Pour rappel, les seuils de quantité de produit en stock se gèrent dans les réglages de WooCommerce.

 Dans le menu WooCommerce, choisissez Réglages, puis cliquez sur l’onglet Produits et sur le lien de la page Inventaire.

Vous avez les champs Seuil de stock faible et Seuil de rupture de stock.

images/C08new-075.png

Vous avez aussi l’option Visibilité des ruptures de stock qui est importante.

images/C08new-076.png

En ce qui concerne la gestion des stocks des produits, vous devez le gérer dans chaque produit.

 Ouvrez un produit, dans le module Données produit, cliquez sur l’onglet Inventaire.

 Dans la liste déroulante État du stock, vous pouvez choisir manuellement l’état du stock de ce produit : En stock, Rupture de stock ou En réapprovisionnement.

images/C08new-077.png

Vous pouvez aussi laisser WooCommerce gérer le stock de ce produit, en fonction des quantités achetées par les clients.

 Cochez l’option Gérer le stock.

images/C08new-078.png

Dans ce cas, la liste déroulante État du stock n’est plus disponible et trois nouveaux paramètres apparaissent.

Nous allons maintenant voir comment l’état des stocks influence l’affichage des produits à...