Comment modifier les détails du panier sur la page de paiement WooCommerce

La plupart d'entre vous savent que WooCommerce n'autorise pas les clients à mettre à jour le panier à partir de la page de paiement. Cela signifie que vous ne pouvez pas modifier la quantité ou supprimer le produit de la page de paiement. Le client doit revenir à la page du panier, mettre à jour le panier, puis revenir à la page de paiement. Cela oblige les clients à remplir à nouveau toutes les informations requises. C'est un peu frustrant pour les clients , en particulier pour les utilisateurs invités (qui sont une grande majorité).

Dans cet article, nous expliquerons comment mettre à jour le panier sur la page de paiement de WooCommerce. J'ai développé cette fonctionnalité dans notre événement Fun Friday au bureau. Lors des Fun Fridays , nous essayons de passer une journée entière à faire des choses qui ne sont pas liées à l'activité principale de la personne.

Examinons d'abord le tableau des détails du panier sur la page de paiement WooCommerce :

Ici, le client ne peut pas modifier la quantité du produit ou la supprimer. Nous voulons donc fournir la fonctionnalité de modification de la quantité et de suppression du produit sans que votre client quitte la page de paiement.

Commençons

Si vous souhaitez ignorer cette explication et souhaitez plutôt implémenter la fonctionnalité sur votre boutique, vous pouvez télécharger le plugin que j'ai créé.

1. Modifications de l'interface utilisateur dans la section panier de la page de paiement

Nous devons modifier la colonne "Produit" dans le tableau "Votre commande". Nous devons ajouter l'icône "Supprimer" et le "Sélecteur de quantité" pour chaque article du panier.

Pour y parvenir, WooCommerce a fourni un filtre qui vous permet de modifier la ligne Product name de chaque article du panier : woocommerce_cart_item_name .

La quantité sélectionnée affichée sur le tableau Votre commande est également modifiable à l'aide d'un autre filtre WooCommerce : woocommerce_checkout_cart_item_quantity .

Nous utiliserons les deux filtres et permettrons aux clients de modifier les détails du panier sur la page de paiement. Vous pouvez implémenter les modifications ci-dessous en créant un nouveau plugin.

Tout d'abord, nous n'avons pas besoin de la quantité indiquée pour chaque article dans le tableau Votre commande. Nous allons donc utiliser le filtre et renvoyer une chaîne vide afin qu'elle écrase les données WooCommerce.

Après cela, nous modifierons la ligne Nom du produit à l'aide du filtre woocommerce_cart_item_name et ajouterons le champ Quantité et l'icône Supprimer.

Ici, nous utilisons la fonction is_checkout() pour nous assurer que nous appliquons les modifications uniquement sur la page de paiement. Je l'ai divisé en 3 étapes comme mentionné dans l'extrait de code ci-dessus.

Étape 1 : Ajouter une icône de suppression
Ici, dans cette étape, nous ajouterons l'icône Supprimer pour chaque article du panier. Il s'agit de la même icône utilisée dans le panier WooCommerce.

Ici, nous avons utilisé la fonction WooCommerce get_remove_url() . Nous devons transmettre le $cart_key pour chaque article du panier. Ainsi, la fonction get_remove_url() renverra une URL unique pour supprimer chaque élément du panier.

Étape 2 : Ajoutez le nom du produit
Comme nous modifions la ligne du nom du produit, nous devons également ajouter le nom du produit dans la ligne avec les nouveaux champs. Nous obtiendrons le nom du produit à partir du filtre lui-même, qui est passé en premier argument. Il s'agit de $product_title dans notre cas.

Augmenter les ventes de la boutique WooCommerce

"Il est intéressant de voir à quel point WooCommerce Abandoned Cart Pro a augmenté les ventes de produits de grande valeur. Je me serais attendu à ce que le plugin augmente les ventes de produits de faible valeur que les clients ne voient pas d'inconvénient à acheter ou non (par exemple, de la nourriture), mais je ont été plus surpris de voir la différence que cela peut faire pour des produits qui nécessitent une décision d'achat aussi importante." - Katie Keith, directrice des opérations chez Barn2 Media

Étape 3 : Ajouter un sélecteur de quantité
Enfin, nous ajouterons le sélecteur de quantité. Ici, nous allons utiliser la fonction WooCommerce woocommerce_quantity_input() .

Nous devons donner les quatre paramètres pour la fonction "input_name", "input_value", "max_value", "min_value".

• input_name: Il contiendra le tableau avec le nom 'cart', dans lequel vous devez passer la clé de l'article du panier et la quantité.
• input_value : Il contiendra la quantité sélectionnée du produit.
• max_value : Ce sera le numéro de stock maximum du produit.
• min_value : Ce sera la valeur minimale du sélecteur de quantité.

Une fois toutes les étapes ci-dessus terminées, il affichera maintenant le bouton de suppression et le sélecteur de quantité dans le tableau Votre commande de la page de paiement.

Ici, nous avons une condition if ( is_checkout() ) { condition. Il est nécessaire pour les raisons mentionnées ci-dessous.

Le filtre que nous avons utilisé pour modifier la valeur de la colonne du nom du produit (woocommerce_cart_item_name) est également appelé sur la page Panier de votre boutique. Donc, pour nous assurer que le code que nous écrivons ne brise pas la fonctionnalité de la page Panier, nous nous sommes assurés que les modifications ne sont appliquées que sur la page de paiement.

2. Mise à jour du panier via un appel Ajax

Ajouter autant ne fonctionnera pas, nous devons nous assurer que lorsqu'un client modifie la quantité, cela se répercutera sur le total du panier.

Modification de la quantité

Nous avons besoin de l'appel Ajax pour modifier le total du panier. Ainsi, lorsqu'un client modifie la quantité, nous devons prendre une mesure et modifier le total du panier.

Maintenant, nous mettrons en file d'attente le fichier "add_quantity.js" dans le pied de page du site Web et nous nous assurerons qu'il est inclus lorsque nous sommes sur la page de paiement.

Nous devons maintenant ajouter la fonction dans le fichier Javascript, qui appellera l'ajax pour modifier le total du panier.

Ci-dessus, javascript appellera l'ajax dans lequel nous passerons les données du formulaire de paiement modifié. Mais il appellera lorsque nous cliquons sur l'icône de quantité. Il contiendra donc la valeur modifiée de la quantité.

Maintenant, nous devons ajouter la fonction pour l'ajax, qui changera le total du panier en fonction de la quantité modifiée.

Lorsque nous modifions la quantité sur la page de paiement, la fonction ci-dessus sera appelée et modifiera le total du panier. Nous avons utilisé les fonctions WooCommerce dans nos fonctions.

Nous avons utilisé les fonctions "set_quantity()", "calculate_totals()", "woocommerce_cart_totals()" pour modifier le total du panier et l'afficher dans le tableau Votre commande de la page de paiement.

set_quantity() : Cette fonction définira la quantité modifiée au panier.

Nous avons envoyé les données de la fonction javascript qui auront la valeur de quantité modifiée, nous allons donc utiliser cette valeur modifiée et la définir sur le panier.

calculate_totals() : En utilisant cette fonction, nous demandons de calculer à nouveau le total du panier.

woocommerce_cart_totals() : Cette fonction permet d'afficher le panier modifié.

Une fois que tous les calculs ci-dessus sont effectués, il reviendra au javascript à partir duquel nous avions appelé la fonction ajax. Dans la réponse de cette fonction, nous "déclencherons" la fonction "update_checkout" qui, à son tour, modifiera le panier et l'affichera à l'utilisateur.

Nous avons besoin du CSS pour le bouton "Supprimer" du tableau Votre commande. Il devrait donc ressembler au bouton de suppression du panier WooCommerce. Nous devons donc ajouter le CSS pour cela. Vous pouvez ajouter le CSS dans le pied de page de votre site Web.

Une fois ajouté, nous devons donner le CSS au bouton de suppression dans le fichier CSS. Le CSS a été montré ci-dessous.

Nous sommes donc prêts avec la fonctionnalité où nous pouvons modifier la quantité sur la page de paiement de WooCommerce.

Après avoir implémenté ce qui précède, voici à quoi ressemblerait le tableau Votre commande sur la page de paiement :

Il ajoutera le sélecteur de quantité et l'icône de suppression pour chaque article du tableau Votre commande de la page de paiement.

Je l'ai construit en tant que plugin, nommé Change Quantity on Checkout pour WooCommerce qui a été publié en septembre 2016. Il est utilisé sur plus de 400 magasins WooCommerce. Si vous utilisez déjà ce plugin sur votre boutique WooCommerce, j'apprécierais si vous pouviez prendre le temps de revoir le plugin.

Si vous avez des commentaires, vous pouvez me le faire savoir dans les commentaires ci-dessous ou vous pouvez poster sur le forum de support du plugin.