Woocommerce: come inserire un’etichetta personalizzata

La corretta visualizzazione dei prezzi all’interno di un sito e-commerce è fondamentale per fare in modo che gli utenti abbiano un’idea chiara del costo del prodotto visualizzato.

Delle volte, può 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.

Per chi usa Woocommerce, si può ovviare al problema inserendo un’etichetta personalizzata. Scopriamo insieme come fare.

Woocommerce: etichetta personalizzata prima dei prezzi nei prodotti variabili

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 (-).

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

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 personalizzata 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.