À quoi ça sert
L'extension affiche le panier de votre boutique WooCommerce dans l'en-tête.
- Un bouton montre l'icône du panier, le nombre d'articles et le montant.
- Un clic ouvre le mini-panier : la liste des produits, les quantités, le sous-total et les boutons Voir le panier et Commander.
- Le client change une quantité ou retire un produit sans quitter la page.
- Une barre indique combien il reste à ajouter pour obtenir la livraison offerte.
- Le mini-panier s'ouvre tout seul quand le client ajoute un produit.
Installation
- Vérifiez que WooCommerce est installé et activé.
- Dans l'administration WordPress, ouvrez Extensions > Ajouter une extension.
- Cliquez sur Téléverser une extension et choisissez le fichier
websource-cartblock.zip. - Cliquez sur Installer maintenant, puis sur Activer l'extension.
- Ouvrez WooCommerce > Websource Panier.
Avec un thème à blocs, le panier remplace tout de suite le mini-panier de WooCommerce dans l'en-tête.
Prise en main en 5 minutes
- Ouvrez WooCommerce > Websource Panier.
- Dans 1. Emplacement, laissez « À la place du mini-panier du thème (recommandé) ».
- Dans 2. Affichage du mini-panier, laissez « Tiroir (recouvre la page) » pour Sur ordinateur et Sur téléphone.
- Laissez cochées les trois cases : montant du panier, ouverture automatique, barre « livraison offerte ».
- Cliquez sur Enregistrer.
- Ouvrez votre boutique dans un autre onglet et ajoutez un produit au panier. Le tiroir s'ouvre.
Les réglages proposés conviennent à la plupart des boutiques : vous pouvez enregistrer tel quel.
Réglages
WooCommerce > Websource Panier
Carte « 1. Emplacement »
| Réglage | Rôle |
|---|---|
| À la place du mini-panier du thème (recommandé) | Remplace le bloc « Mini-panier » de WooCommerce. Vous n'avez jamais deux paniers. Si le thème n'en a pas, le panier se place après la navigation de l'en-tête. |
| Dans l'en-tête, à côté de la navigation (thèmes à blocs) | Ajoute le panier après le menu de navigation de l'en-tête. |
| À la fin d'un menu (thèmes classiques) | Ajoute le panier comme dernier élément de l'emplacement de menu choisi. |
| Je le place moi-même (bloc ou code court) | Aucun placement automatique. |
| Emplacement de menu | Emplacement du thème utilisé pour le placement dans un menu. |
Carte « 2. Affichage du mini-panier »
| Réglage | Rôle |
|---|---|
| Sur ordinateur | Tiroir (recouvre la page), push menu (pousse la page) ou menu déroulant (petite fenêtre sous l'icône). |
| Sur téléphone | Tiroir ou push menu. Le menu déroulant n'est pas proposé : l'écran est trop petit. |
| Un écran est « téléphone » en dessous de | Largeur en pixels. 768 convient à la plupart des boutiques. |
| Push menu : côté d'arrivée | À droite ou à gauche. Visible si le push menu est choisi. |
| Partie de la page à pousser (réglage avancé) | Sélecteur CSS de la zone décalée par le push menu. Laissez vide si tout fonctionne. |
| Afficher le montant du panier à côté de l'icône | Affiche le sous-total sur le bouton. Il est masqué sur les très petits écrans. |
| Ouvrir le panier automatiquement quand un client ajoute un produit | Ouvre le mini-panier après chaque ajout. |
| Afficher la barre « livraison offerte » | Affiche la barre de progression en haut du mini-panier. |
Sous les cases, un encadré indique le montant de livraison offerte trouvé dans votre boutique, zone par zone. S'il n'y en a pas, la barre reste masquée.
Carte « 3. Textes »
| Réglage | Rôle |
|---|---|
| Titre du panier | Titre affiché en haut du mini-panier. |
| Panier vide | Phrase affichée quand le panier ne contient rien. |
| Bouton « voir le panier » | Texte du bouton qui mène à la page Panier. |
| Bouton « commander » | Texte du bouton qui mène à la page de commande. |
| Livraison offerte : il reste un montant | Phrase de la barre. %amount% est remplacé par le montant restant. |
| Livraison offerte : seuil atteint | Phrase affichée quand le seuil est atteint. |
Laissez un champ vide pour garder le texte proposé, indiqué en gris. 120 caractères au plus.
Bloc « Websource Panier » dans l'éditeur
| Réglage | Rôle |
|---|---|
| Alignement | Aligne le bouton à gauche, au centre ou à droite. Les autres réglages se font dans WooCommerce > Websource Panier. |
Cas d'usage
Mettre en avant la livraison offerte. Dans WooCommerce > Réglages > Expédition, ajoutez à votre zone le mode « Livraison gratuite » et choisissez « Un montant minimum de commande ». La barre apparaît dans le mini-panier dès le premier produit ajouté.
Un panier discret sur ordinateur. Choisissez « Menu déroulant » pour Sur ordinateur. Le mini-panier s'ouvre sous le bouton, sans voile sur la page.
Un panier plein écran sur téléphone. Laissez « Tiroir » pour Sur téléphone. Le tiroir prend toute la largeur de l'écran.
Laisser le client poursuivre ses achats. Décochez « Ouvrir le panier automatiquement ». Le compteur et le montant se mettent quand même à jour après chaque ajout.
Placer le panier dans un pied de page ou une page. Choisissez « Je le place moi-même », puis ajoutez le bloc Websource Panier, ou collez le code court [websource_cart].
Questions fréquentes
Pourquoi la barre « livraison offerte » ne s'affiche-t-elle pas ? Elle s'affiche si la zone d'expédition du client contient le mode « Livraison gratuite » avec un montant minimum, et si le panier contient au moins un produit à expédier. L'encadré de la carte 2 vous dit si un montant est trouvé.
Le montant restant tient-il compte des codes promo ? Oui, comme WooCommerce : la remise est déduite, sauf si vous avez coché l'option d'application du montant minimum avant remise dans le mode « Livraison gratuite ».
Le mini-panier s'ouvre-t-il aussi depuis la page d'un produit ? Oui. Après le clic sur « Ajouter au panier », la page se recharge et le mini-panier s'ouvre.
Puis-je garder le mini-panier de WooCommerce ? Oui. Choisissez un autre emplacement que « À la place du mini-panier du thème ».
Comment traduire mes textes ? Avec Polylang, ouvrez Langues > Traductions et cherchez le groupe « Websource Cart Block ». Avec WPML, utilisez la traduction de chaînes. Les textes proposés existent en français, anglais, espagnol, allemand, italien, néerlandais et portugais.
Mon site utilise un cache de pages. Le compteur sera-t-il juste ? Oui. Si la page vient d'un cache, l'extension compare le panier affiché avec celui du visiteur et le corrige dès le chargement.
Dépannage
Je vois deux paniers dans l'en-tête. Choisissez « À la place du mini-panier du thème (recommandé) », ou retirez le bloc « Mini-panier » de l'en-tête dans Apparence > Éditeur.
Je ne vois aucun panier. 1. Vérifiez que WooCommerce est activé. Sans WooCommerce, l'extension affiche un avis dans l'administration et rien sur le site. 2. Avec un thème classique, choisissez « À la fin d'un menu » et un Emplacement de menu. 3. Sinon, placez le bloc ou le code court à la main.
Le push menu décale mal la page ou mon en-tête fixe se comporte mal.
Choisissez « Tiroir ». Sinon, ouvrez Réglage avancé et indiquez la zone à pousser, par exemple .wp-site-blocks.
Le compteur ne change pas après un ajout au panier.
Videz le cache de votre extension de cache et vérifiez que les adresses contenant wc-ajax ne sont pas mises en cache.
Un message « Il n'y a pas assez de stock » apparaît. Le client a demandé plus d'exemplaires que le stock du produit. Le bouton + se désactive quand le maximum est atteint.
Désinstallation
- Ouvrez Extensions > Extensions installées.
- Cliquez sur Désactiver sous « Websource Panier ».
- Cliquez sur Supprimer.
La suppression efface les réglages de l'extension. Le mini-panier de WooCommerce reprend sa place dans l'en-tête. Le contenu des paniers de vos clients n'est pas touché.