Woocommerce: etichetta personalizzata

Come aggiungere un etichetta personalizzata prima dei prezzi nei prodotti variabili

La corretta visualizzazione dei prezzi all’interno di un sito E-commerce è fondamentale per far si che gli utenti abbiano un idea chiara del costo del prodotto visualizzato.

Può però nascere la necessità di inserire un prodotto che abbia un range di prezzo che può variare in base al peso, al colore o ad altre caratteristiche che sono selezionabili all’interno della scheda prodotto.

Se stai realizzando il tuo sito E-commerce con WooCommerce avrai notato che, inserendo un “Prodotto Variabile“, la visualizzazione del costo lato utente appare molto scarna e separata da un semplice trattino (-).

Come fare quindi per rendere chiara la fascia di prezzo nei prodotti variabili?

Per risolvere questa situazione ci viene in aiuto un piccolo snippet di codice che puoi inserire all’interno del tuo file functions.php ed un pò di sano CSS.

Ricorda: Prima di apportare modifiche al tuo file functions.php fai sempre un backup e assicurati di avere un accesso FTP attivo per il tuo sito.

Inserisci il seguente codice alla fine del file functions.php nel Tema Child del tuo sito WordPress:

// aggiunge etichetta Da / A sui prodotti variabili
add_filter( 'woocommerce_format_price_range', 'custom_format_price_range', 10, 3 );
function custom_format_price_range( $price, $from, $to ) {
  $text_min = '<span class="range-label">'.__( "Da" ).' </span>';
  $text_max = '<span class="range-label-a">'.__( "  A" ).' </span>';
  $price = sprintf( _x( '%1$s – %2$s', 'Price range: from-to', 'woocommerce' ), 
	is_numeric( $from ) ? $text_min . wc_price( $from ) : $text_min . $from, 
	is_numeric( $to ) ? $text_max . wc_price( $to ) : $text_max . $to );
    return $price;
}

Modifica a tuo piacimento il testo tra parentesi nella riga 5 “$text_min” per inserire un etichetta prima del prezzo minino e nella riga 6 “$text_max” per modificare l’etichetta prima del prezzo massimo.

Un consiglio? Usa il codice CSS nelle classi “.range-label” e “.range-label-a” per modificare il colore del testo dell’etichetta, noi ad esempio abbiamo fatto cosi:

.range-label, .range-label-a {color:#000; font-size: 16px}

ottenendo questo risultato:

Volendo, puoi separare le due classi e assegnare colori diversi alle 2 etichette.

Ricapitolando

Sopra troverai il codice per aggiungere un etichetta prima del prezzo nei prodotti variabili di WooCommerce. Questo semplice codice ti consentirà di rendere più comprensibile la fascia di prezzo dei tuoi prodotti variabili aiutando gli utenti a comprendere meglio i costi dei tuoi prodotti.

Adriano Cipriani

Co-founder e Web Designer di Ca2, si occupa principalmente di grafica e dello sviluppo siti web, dalla radice fino all’interfaccia, e di design per i dispositivi mobile. Dopo la laurea in Grafica e Progettazione Multimediale e una passione sfrenata per la tecnologia, ha approfondito la sfera dello sviluppo web, riuscendo a far conciliare perfettamente competenze e passione.