WooCommerce: come inserire un countdown per il black friday

Il Black Friday si avvicina e con esso tutte le offerte a tempo che esso comporta in tutti i portali e-commerce, compresi quelli sviluppati con WooCommerce. Per mettere più fretta ai nostri clienti possiamo mostrare un conto alla rovescia che segnali quanto manca alla fine dell’offerta in corso.

Esiste a tal proposito un semplice plugin che, anche nella sua versione Free, consente di creare un’offerta a tempo per il Black Friday in modo semplice e veloce. Il suo nome è Countdown Builder ed è disponibile nella directory di WordPress, CMS sul quale si basa WooCommerce. Per trovarlo, è necessario entrare nel backend e seguire il consueto percorso Plugin -> Aggiungi nuovo e cercare Countdown Builder.

Il risultato sarà il seguente:

Una volta fatto clic su Installa adesso e, successivamente, su Attiva è il momento di iniziare a creare il primo Countdown usando il plugin. Per iniziare andiamo nel menu di sinistra del backend e facciamo clic su Countdown & Clock. Verremo riportati in una pagina in cui potremo elencare tutti i vari stili e tipi di countdown che creeremo. Iniziamo modificando quello inizialmente nominato Default, che rinomineremo Countdown 1.

Entrando nelle impostazioni inizieremo a definire giorno ed orario di fine del countdown oltre al fuso orario da utilizzare. L’alternativa è quella di spuntare l’opzione Duration ed inserire il numero di giorni, ore, minuti e secondi dalla fine del conto alla rovescia. Scendiamo un po’ ed andiamo nella parte free successiva dedicata alle azioni da compiere una volta scaduto il conteggio. Tra le possibilità ne troviamo una di default, la scomparsa del countdown dalla pagina e l’inizio del conto in avanti. La scelta migliore in questo caso, se si tratta di offerte per il Black Friday, sarebbe quella di far sparire il contatore e scrivere un testo sostitutivo.

Scendiamo ancora un po’ ed andiamo a personalizzare tutto il nostro conto alla rovescia. La parte di editor è molto ampia, perciò l’abbiamo divisa in due immagini che approfondiremo separatamente.

Nella prima parte (clic per ingrandire) vediamo che ci viene data la possibilità di scegliere tutto ciò che riguarda il font come dimensione e stile sia per le scritte che per i numeri. Guardiamo a destra e troviamo le opzioni riguardanti allineamento, animazione e l’ampiezza dei vari quadranti del conto alla rovescia. Con gli interruttori in basso possiamo anche scegliere l’ordine in cui mostrare giorni e ore oltre ad altre opzioni.

Scendendo nelle impostazioni troviamo poi i vari interruttori sui dati da mostrare nel countdown. A sinistra imposteremo la presenza o meno di giorni, ore, minuti e secondi, il testo da mostrare (il plugin è in inglese). Sulla destra invece definiremo il messaggio da mostrare durante il conto alla rovescia (nel nostro caso abbiamo messo “fai presto!”) e quello da mostrare eventualmente al termine.

Salviamo il prodotto finito aiutandoci anche con l’anteprima che viene mostrata in basso a destra nella schermata impostazioni e torniamo alla lista dei countdown, dove troveremo lo shortcode da applicare nella pagina dove vogliamo mostrare il conto alla rovescia appena creato.

Copiamolo ed incolliamolo quindi nella pagina prodotto per farlo vedere a tutti i visitatori del nostro store online. Ovviamente questa è una prova di base, ma come abbiamo visto il plugin Countdown Builder consente di aggiungere molte altre feature anche nella sua versione gratuita. Di seguito vediamo un esempio di timer applicato su una pagina prodotto.