Offrire coupon ai tuoi clienti è un ottimo modo per incentivare le vendite e aumentare l'interazione con il tuo negozio WooCommerce. Che si tratti di uno sconto, spedizione gratuita o un omaggio, i coupon sono un ottimo modo per incoraggiare i clienti a effettuare un acquisto. Tuttavia, la casella di inserimento del coupon nella pagina del carrello WooCommerce può essere piuttosto piccola e angusta, portando a un'esperienza cliente non ideale.
Fortunatamente, esiste un modo semplice per espandere la casella di inserimento del coupon e migliorare l'esperienza complessiva dei tuoi clienti. Con pochi semplici passaggi, puoi espandere rapidamente e facilmente la casella di inserimento del coupon nella tua pagina del carrello WooCommerce, consentendo un'esperienza più user-friendly per i tuoi clienti.
Introduzione
Quando installi molti temi WordPress che affermano di supportare WooCommerce, uno dei grandi problemi (e una delle mie più grandi lamentele) è che nessuno sembra prestare attenzione alle dimensioni della casella dei coupon nella pagina del carrello.
Se stai riscontrando la "sindrome della casella coupon corta e illeggibile" nella tua pagina del carrello e vuoi fare qualcosa al riguardo in modo che le persone possano, sai, usarla, allora sei arrivato all'articolo giusto!
La soluzione è relativamente semplice, è solo un po' di CSS e ti mostrerò come implementare la soluzione in un paio di modi diversi.
Come correggere la casella di inserimento coupon corta nella tua pagina del carrello
Il primo passo è aprire Google Chrome o Safari o Firefox, in realtà qualsiasi browser moderno.
Fai clic destro su quella casella del coupon e fai clic su Ispeziona.
Quando fai clic su Ispeziona, si apriranno gli Strumenti per sviluppatori che ti permetteranno di ispezionare gli elementi della pagina.
Se è la prima volta che lo fai, non preoccuparti, ti mostrerò esattamente cosa fare dopo.
Si aprirà una casella di inserimento coupon come questa:
Gli stili sono ciò che vogliamo cambiare.
Sperimentiamo un po' per assicurarci di creare una nuova regola CSS con la larghezza corretta al primo tentativo. La cosa buona è che se apporti modifiche in questa casella degli Strumenti per sviluppatori, si rifletterà sul sito (temporaneamente finché non ricarichi) in modo da poter testare cosa funzionerà meglio in termini di larghezza.
Fai clic sul pulsante Nuova regola stile:
Quindi rinomina il testo evidenziato nel seguente modo:
.woocommerce-cart table.cart td.actions input#coupon_code
Dopo aver inserito questo testo, premi il tasto TAB sulla tastiera, non Invio. Se premi accidentalmente Invio, va bene, fai semplicemente clic tra le parentesi graffe { } e verrà aggiunta una nuova riga tra le parentesi graffe.
Aggiungi la regola in questo modo:
Gioca con il valore della larghezza (i 200px nello screenshot) finché non sei soddisfatto di come appare la casella del coupon sullo schermo. Vedrai la pagina web aggiornarsi quando cambi il valore.
Una volta che sei soddisfatto, copia il testo e salvalo in un Blocco note (Windows) o TextEdit (Mac) per conservarlo.
.woocommerce-cart table.cart td.actions input#coupon_code {
width: 200px;
}
Questo è il codice CSS che abbiamo generato e ora dobbiamo solo installarlo sul sito in modo permanente.
Installazione permanente della correzione della casella di inserimento coupon
Se hai esperienza nell'editing dei file CSS, saprai probabilmente che esiste un file style.css nella directory di qualsiasi tema che installi.
Idealmente, dovresti sovrascriverlo con un tema figlio e installare le tue modifiche lì.
Ma se non ne hai uno, c'è un altro modo per farlo e non comporta la modifica di alcun file CSS che potrebbe potenzialmente essere sovrascritto quando aggiorni il tema.
Esiste un plugin chiamato Simple Custom CSS and JS. Questo plugin ti consente di tenere traccia di tutte le piccole modifiche CSS e javascript che devi apportare al tuo tema, senza dover modificare effettivamente il tema stesso. È molto utile.
Installalo andando su Plugin->Aggiungi Nuovo e cercandolo. Installa e attiva.
Otterrai quindi un nuovo menu nel backend:
Fai clic su Aggiungi CSS personalizzato. Si aprirà una nuova finestra in cui inserire il codice generato in precedenza.
Dagli un nome come "Correzione larghezza casella coupon carrello" in modo da poter capire a colpo d'occhio di cosa si trattava in seguito e aggiungi il tuo codice nella casella fornita.
Dovrebbe apparire così:
E questo è tutto!
Allora perché era così importante?
Bene, i coupon sono una delle tue migliori armi di marketing e senza gli indizi visivi su come utilizzare quei coupon i tuoi clienti saranno costretti a cercare dove inserire il codice.
Ho osservato negli anni che i clienti possono essere piuttosto pigri quando si tratta di cose del genere e si arrendono facilmente. Più rendi qualcosa ovvio, migliori saranno i tuoi risultati per quell'azione.
Quindi in questo articolo, abbiamo affrontato concetti chiave per aiutarti a correggere la tua casella di inserimento coupon:
- Come correggere la casella di inserimento coupon corta nella tua pagina del carrello
- Installazione permanente della correzione della casella di inserimento coupon
Quindi mettiti all'opera e prova questa correzione, puoi farcela!
