Offrir des coupons à vos clients est un excellent moyen d'inciter aux ventes et de stimuler l'engagement avec votre boutique WooCommerce. Qu'il s'agisse d'une réduction, de la livraison gratuite ou d'un cadeau, les coupons sont un excellent moyen d'encourager les clients à effectuer un achat. Cependant, la zone de saisie des coupons sur la page du panier WooCommerce peut être assez petite et exigüe, ce qui entraîne une expérience client moins qu'idéale.
Heureusement, il existe un moyen simple d'agrandir la zone de saisie des coupons et d'améliorer l'expérience globale de vos clients. En quelques étapes simples, vous pouvez rapidement et facilement agrandir la zone de saisie des coupons sur votre page de panier WooCommerce, offrant ainsi une expérience plus conviviale à vos clients.
Introduction
Lorsque vous installez de nombreux thèmes WordPress qui prétendent prendre en charge WooCommerce, l'un des gros problèmes (et l'une de mes plus grandes frustrations) est que personne ne semble prêter attention à la taille de la zone de coupon sur la page du panier.
Si vous souffrez de la « court-non-lisible-zone-de-coupon-ite » sur votre page de panier et que vous voulez y remédier pour que les gens puissent, vous savez, l'utiliser, alors vous êtes au bon article !
La solution est relativement simple, il s'agit juste de CSS et je vais vous montrer comment implémenter la solution de quelques manières différentes.
Comment corriger la zone de saisie de coupon courte sur votre page de panier
La première étape consiste à ouvrir Google Chrome, Safari ou Firefox, n'importe quel navigateur moderne en fait.
Vous voulez faire un clic droit sur cette zone de coupon et cliquer sur Inspecter.
Lorsque vous cliquez sur Inspecter, cela ouvrira les outils de développement qui vous permettront d'inspecter les éléments de la page.
Si c'est la première fois que vous faites cela, ne vous inquiétez pas, je vais vous montrer exactement quoi faire ensuite.
Cela ouvrira une zone de saisie de coupon comme celle-ci :
Les styles sont ce que nous voulons changer.
Expérimentons un peu pour nous assurer de créer une nouvelle règle CSS avec la bonne largeur dès le premier essai. La bonne chose est que si vous apportez des modifications dans cette boîte d'outils de développement, cela s'affichera sur le site (temporairement jusqu'à ce que vous rechargiez) afin que vous puissiez tester ce qui fonctionnera le mieux en termes de largeur.
Cliquez sur le bouton Nouvelle règle de style :
Renommez ensuite le texte mis en surbrillance comme suit :
.woocommerce-cart table.cart td.actions input#coupon_code
Après avoir saisi ce texte, appuyez sur la touche TAB de votre clavier, pas sur Entrée. Si vous appuyez accidentellement sur Entrée, ce n'est pas grave, cliquez simplement entre les accolades { } et cela ajoutera une nouvelle ligne entre les accolades.
Ajoutez la règle comme ceci :
Jouez avec la valeur de la largeur (les 200px sur la capture d'écran) jusqu'à ce que vous soyez satisfait de l'apparence de la zone de coupon à l'écran. Vous la verrez mettre à jour la page Web lorsque vous modifiez la valeur.
Une fois que vous êtes satisfait, copiez le texte et déposez-le dans un Bloc-notes (Windows) ou TextEdit (Mac) pour le conserver en lieu sûr.
.woocommerce-cart table.cart td.actions input#coupon_code {
width: 200px;
}
C'est le code CSS que nous avons généré et maintenant nous devons juste l'installer de façon permanente sur le site.
Installation permanente de la correction de la zone de saisie de coupon
Si vous avez de l'expérience dans la modification de fichiers CSS, vous savez probablement qu'il existe un fichier style.css dans le répertoire de tout thème que vous installez.
Idéalement, vous devriez remplacer cela par un thème enfant et y installer vos modifications.
Mais si vous n'en avez pas, il existe un autre moyen de le faire sans modifier de fichiers CSS qui pourraient potentiellement être remplacés lors de la mise à jour du thème.
Il existe un plugin appelé Simple Custom CSS and JS. Ce plugin vous permet de suivre toutes les petites modifications CSS et javascript que vous devez apporter à votre thème, sans avoir à modifier le thème lui-même. C'est très pratique.
Installez-le en allant dans Plugins->Ajouter un nouveau et en le recherchant. Installez & activez.
Vous obtiendrez alors un nouveau menu dans le backend :
Cliquez sur Ajouter un CSS personnalisé. Cela ouvrira une nouvelle fenêtre où vous pourrez entrer le code que vous avez généré précédemment.
Donnez-lui un nom comme « Correction largeur boîte coupon panier » afin de pouvoir identifier rapidement de quoi il s'agit plus tard et ajoutez votre code dans la boîte prévue à cet effet.
Cela devrait ressembler à ceci :
Et c'est tout !
Alors, pourquoi était-ce si important ?
Eh bien, les coupons sont l'une de vos meilleures armes marketing et sans les indices visuels pour savoir comment utiliser ces coupons, vos clients seront obligés de chercher où entrer le code.
J'ai observé au fil des ans que les clients peuvent être assez paresseux en ce qui concerne ce genre de choses et qu'ils abandonnent facilement. Plus vous rendez quelque chose évident, meilleurs seront vos résultats pour cette action.
Ainsi, dans cet article, nous avons abordé les concepts clés pour aider à corriger votre boîte de saisie de coupon :
- Comment corriger la zone de saisie de coupon courte sur votre page de panier
- Installation permanente de la correction de la zone de saisie de coupon
Alors, allez-y et essayez cette correction, vous pouvez le faire !
