FAQ et dépannage de la fonctionnalité Checkout pour WooCommerce

Objectif : Voir les questions fréquemment posées sur la fonctionnalité Checkout de WooCommerce.

Informations générales de dépannage

Si vous ne parvenez pas à faire apparaître correctement le Checkout Dynamique, voici quelques étapes à suivre pour tenter de résoudre le problème :

1. Vérifiez que vous avez bien la dernière version du Checkout Dynamique installé ici. 
2. Désactiver tout plugin externe

Veuillez noter que le plugin WooCommerce Role-Based Shipping/Payment Methods n'est pas compatible avec le Checkout Dynamique et doit être désactivé pour que les méthodes d'expédition de notre Checkout Dynamique apparaissent. 

Q : J'ai publié ma configuration, mais les méthodes n'apparaissent pas au checkout. Qu'est-ce qui ne va pas ?

Il y a plusieurs raisons pour lesquelles cela peut se produire :

1. Si vous recevez un message d'erreur lorsque vous essayez de publier la fonction checkout, il se peut que votre configuration n'ait pas été publiée correctement.
   
   Allez dans l'onglet Checkout de votre panneau Sendcloud et assurez-vous que la configuration du checkout que vous venez de publier n'a pas un statut d'erreur. 
   
   1. Essayez de republier votre configuration
   2. Essayez de rafraîchir vos clés API
   3. Reconnectez votre boutique à Sendcloud. Veuillez noter que votre configuration de caisse sera supprimée et que vous devrez en créer une nouvelle.
   4. Veuillez whitelister les adresses IP de cette liste (dans le cas où vous limitez l'accès par un pare-feu ou Cloudflare, etc...
      
2. Votre plugin ou WooCommerce/Wordpress peut avoir besoin d'être mis à jour.
   Veuillez vous assurer que vous avez la dernière version du plugin Sendcloud installée, et que vous avez votre WooCommerce et Wordpress à jour (version 4.0 et plus). 
   
   
3. Vous avez essayé de créer une méthode de jour désigné dans les paramètres de WooCommerce au lieu du panneau Sendcloud.
   En raison de la façon dont WooCommerce fonctionne, la méthode "Nominated Day Delivery" est une option disponible dans les paramètres de la zone d'expédition de WooCommerce.  Essayer de créer une méthode de cette façon n'affichera pas la méthode correcte dans la fonction checkout, car il n'y a rien de configuré dans votre compte Sendcloud. La méthode doit d'abord être configurée dans le panneau Sendcloud, puis publiée dans le plugin. Veuillez supprimer la méthode manuelle et configurer une méthode d'expédition dans le panneau Checkout Sendcloud.
   
   
4. Cela pourrait être dû à des zones d'expédition en double dans WooCommerce.
   Voir ci-dessous.
   
   
5. La tarification est manquante pour la méthode d'expédition sélectionnée. 
   

   Vous devez ajouter un prix à une méthode d'expédition dans WooCommerce avant qu'elle ne soit visible dans la fonction checkout pour votre client. Voici comment ajouter un prix.

Zones de livraison en double

Si vous avez créé une zone de livraison dans votre configuration Checkout pour une zone qui était déjà présente dans WooCommerce, vous pouvez voir des zones en double apparaître dans votre tableau de bord WooCommerce. L'ancienne zone d'expédition peut annuler la zone de livraison nouvellement créée.

Pour résoudre ce problème, vous devez donner la priorité à la zone que vous venez de créer dans Sendcloud. 

• Allez dans votre tableau de bord WooCommerce > Règlages > Expédition
  
• Assurez-vous que la nouvelle zone que vous avez créée dans Sendcloud apparaît au-dessus de la liste dans WooCommerce en faisant glisser et en déposant la nouvelle zone au-dessus de la zone préexistante.
  
  
• Recréez toutes les méthodes créées par WooCommerce à partir de l'ancienne zone que vous souhaitez continuer à utiliser (par exemple, l'enlèvement local, le point de service, etc.).
• Vous n'aurez à effectuer cette étape que la toute première fois que vous publierez votre configuration de Checkout. Les méthodes supplémentaires apparaîtront désormais dans cette zone nouvellement créée. 

Tip: Vous pouvez facilement voir quelle zone d'expédition est celle créée via le panel Checkout sur Sendcloud car, sous la colonne Méthode(s) d'expédition, le nom affiché sera celui que vous avez entré lors de la configuration du Checkout.

Dans l'exemple ci-dessus, vous pouvez voir que le nom saisi sous Détails de la méthode ("PostNL - Signature requise") apparaît dans les zones de livraison de WooCommerce. Il s'agit de la méthode d'expédition à laquelle il faut donner la priorité. 

Q: Je vois un message d'erreur lorsque j'essaie de publier la configuration de mon Checkout Dynamique. Que faire?

Si, pour une raison quelconque, votre configuration du Checkout Dynamique ne peut pas être publiée, l'un des messages d'erreur suivants s'affiche et indique également comment résoudre le problème:

1. Currency mismatch
   Solution - changer la devise choisie pour correspondre à la devise proposée dans votre boutique WooCommerce, depuis le menu déroulant, à côté de Nouvelle zone d'expédition
   
   
   
   
2. Invalid signature
   Solution - Relancer vos clés API
   
   
   
   
3. Missing fields
   Solution - vérifiez que vous avez bien renseigné une méthode d'expédition dans la page de configuration de votre Checkout. 
   

Q : J'ai ajouté le prix, mais la méthode d'expédition est toujours manquante. Qu'est-ce qui peut encore se passer ? 

R : Le client doit sélectionner un pays avant de voir une méthode d'expédition au moment du Checkout.

Comme les méthodes d'expédition sont configurées pour un pays spécifique, le client doit d'abord sélectionner son pays d'expédition lors du Checkout avant que la méthode ne lui soit visible. 

Certains thèmes affichent un message tel que "Entrez votre adresse pour afficher les options d'expédition" au client.  Vérifiez si ce message d'erreur s'affiche dans la configuration de votre thème ou de votre configuration et veillez à ce que vos clients soient clairement invités, lors du checkout, à saisir leur adresse pour voir les méthodes d'expédition disponibles.

Q : J'ai ajouté des prix pour une classe d'expédition WooCommerce personnalisée et la méthode Sendcloud n'est pas visible dans le Checkout. Qu'est-ce qui ne va pas ? 

R : Cela pourrait être dû à la façon dont vous avez configuré la tarification pour la méthode de livraison dans WooCommerce. Les méthodes de livraison Sendcloud peuvent être configurées de la même manière que les méthodes d'expédition à tarif fixe de WooCommerce. 

Par exemple, si vous :

Définissez le coût à 0, ajoutez uniquement la tarification de la classe personnalisée : 

• La méthode de livraison est visible dans le checkout puisque le coût principal a une valeur. 
• Si les articles dans le panier n'ont pas de prix de classe d'expédition personnalisée défini, le prix de la méthode est 0€.
• Si les articles ont une classe d'expédition personnalisée, le prix de cette classe personnalisée est utilisé.

Ne définissez pas le coût (laissez le champ vide), ajoutez uniquement le prix de la classe personnalisée :

• Si aucun article du panier ne possède cette classe d'expédition personnalisée, la méthode de livraison est masquée.
• Si un article du panier appartient à cette classe d'expédition personnalisée, le mode de livraison est disponible.

Veuillez noter qu'à l'avenir, nous ajouterons la possibilité de désactiver les méthodes de livraison en fonction des classes de poids. 

Q : Pourquoi le widget ne s'affiche-t-il pas correctement ?

Le thème de la boutique peut interférer avec le style du widget, ce qui fait que les sélecteurs de date apparaissent plus petits, comme dans l'exemple ci-dessous :

Pour vous assurer que les sélecteurs de date apparaissent comme prévu, suivez ces étapes :

1. Naviguez vers Apparence dans le tableau de bord de Wordpress/WooCommerce.
2. Cliquez sur Customize/Personnaliser
3. Cliquez sur Additional CSS dans le menu de personnalisation du thème
4. Collez la ligne suivante dans le champ de texte : 

 .sc-delivery-date-wrapper { display: block !important; }

Le widget devrait maintenant s'afficher correctement :

N'oubliez pas de cliquer sur Publish pour enregistrer vos modifications. 

Q: Pourquoi le widget de sélection de point relais ne s'affiche pas correctement sur téléphone ou petit écran?

Pour les tailles de téléphone standard, le widget de sélection de points relais devrait apparaître correctement en prenant l'espace d'écran disponible. Cependant, dans certains thèmes WooCommerce, ce widget de sélection peut apparaître déformé comme dans l'exemple ci-dessous :

C'est la conséquence de l'utilisation d'un thème et n'est pas dû au design de Sendcloud. Une alternative possible est d'inclure le CSS personnalisé suivant, pour faire en sorte que ce widget apparaisse correctement. 

.woocommerce-shipping-totals {
display: flex;
flex-direction: column;
}

.woocommerce-shipping-methods li {
flex-direction: column;
}

Le widget devrait désormais apparaître normalement comme ceci:

Remarque: Cela peut fonctionner pour certains thèmes WooCommerce personnalisés, mais pas tous. Si un thème utilise une mise en page basée sur des lignes pour fournir un aperçu des méthodes d'expédition sur le checkout, ce type de problème de mise en page peut apparaître. 

Q : Comment puis-je modifier le style du widget Checkout pour qu'il reflète ma marque ?

Le widget Checkout a été conçu pour répondre aux normes d'accessibilité, mais nous comprenons que vous souhaitiez le modifier pour qu'il reflète votre marque. Suivez ces étapes pour remplacer le style standard :

1. Naviguez vers Apparence dans le tableau de bord de Wordpress/WooCommerce.
   
2. Cliquez sur Customize/Personnaliser
   
3. Cliquez sur Additional CSS dans le menu de personnalisation du thème
   
4. Collez ce bloc de code dans le champ de texte :

.sc-shipping-option.sc-shipping-option {
/* typography */
--sc-font-size: 15px;
--sc-font-weight: inherit;
--sc-font-family: Georgia, serif;
​
/* colors */
--sc-accent-color: #d71c00;
--sc-accent-color-dark: #a30916;
--sc-focus-color: #e58722;
--sc-text-color: #fff;
--sc-dimmed-text-color: #d4d4d4;
--sc-background-color: #fff;
--sc-delivery-date-background-color: #323232;
--sc-border-color: #e7e7e7;
--sc-box-shadow-color: #1128570d;
--sc-sendcloud-logo-color: #c4c4c4;
​
/* miscellaneous */
--sc-spacing: 4px;
--sc-border-width: 2px;
--sc-selected-border-width: 2px;
--sc-border-radius: 12px;
​
/* private */
--sc-item-width: 120px;
--sc-item-gap-width: 8px;
}

Vous remarquerez que le style du widget a changé :

Vous pouvez maintenant adapter les couleurs, le style de police et la taille pour qu'ils correspondent au style de votre marque.

Lorsque vous êtes satisfait de l'apparence de votre widget, cliquez sur Publier/Publish.

Q: Comment puis-je masquer le logo ou la mention "livré par [...]" dans le widget du jour désigné?

Pour masquer le logo du transporteur (.sc-carrier_logo) ou la mention "livré par" (.sc-carrier_by-line), vous devez ajouter les éléments suivants :

}

/* hide carrier logo */
.sc-carrier .sc-carrier__logo {
	display: none;
}

/* hide delivered by carrier line */
.sc-carrier .sc-carrier__by-line {
	display: none;
}

Une fois que vous avez défini l'affichage sur "none", il ne s'affichera plus au moment du passage en caisse.

Q: Puis-je modifier l'apparence du titre et de la description publics de mes méthodes d'expédition?

Vous pouvez maintenant modifier l'apparence du titre et de la description publics de vos méthodes d'expédition avec un CSS personnalisé.

1. Allez dans Appearance dans votre Wordpress/WooCommerce
2. Cliquez sur  Customize
3. Cliquez sur Additional CSS dans le menu de personnalisation du thème
4. Renseignez les propriétés personnalisée CSS

Propriétés personnalisées

sc-delivery-method-title

sc-delivery-method-description

Q: Puis-je changer l'apparence de la page de sélection du point relais?

Si vous avez créé une méthode de livraison en point relais dans votre Checkout Dynamique, vous pouvez customiser l'apparence de la page de sélection du point relais en utilisant du CSS.

1. Naviguez dans Appearance dans votre tableau de bord Wordpress/WooCommerce
2. Cliquez surCustomize
3. Cliquez surAdditional CSS dans le menu de personnalisation du thème
4. Fournissez les CSS des données personnalisés dans l'élément .sc-shipping-option

.sc-shipping-option {
--sc-font-size: 1em;
--sc-font-family: Georgia, Times, serif;
--sc-border-radius: 0;

--sc-accent-color: #e24c00;
--sc-text-color: #ffffff;
--sc-dimmed-text-color: #afa6a6;
--sc-background-color: #111111;
--sc-panel-background-color: #232323;
--sc-border-color: #8a2b03;
}

Vous pouvez également modifier l'apparence de la page de sélection du point relais en remplaçant le thème par défaut de votre boutique, à l'aide de CSS. 

Remarque: Veillez à ajouter ces personnalisations après l'élément link qui fait référence au fichier principal checkout-plugin-ui.css ; sinon, la feuille de style remplacera vos personnalisations.