Home>Snippets>Modificare il pulsante “Aggiungi al carrello” in WooCommerce

Modificare il pulsante “Aggiungi al carrello” in WooCommerce


Modificare il testo del pulsante "Aggiungi al carrello" in WooCommerce


Non sei stanco di leggere su ogni e-commerce sempre le stesse diciture standard e di default? E allora perché non dare un tocco di originalità al tuo WooCommerce, modificando il testo del pulsante “Add to cart” a tuo piacimento? Ecco come dare libero sfogo alla tua creatività, con pochissime righe di codice!

  • Leggi l'articolo, ti bastano solo 3 minuti, 15 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!
La guida fa riferimento alla v3.2.1 di WooCommerce

Modificare il testo del pulsante: il loop

Se desideri agire solamente sul testo del pulsante presente su ciascuno dei prodotti visualizzati nelle pagine di categoria o nelle pagine archivio, o in qualsiasi pagina sia presente un elenco di prodotti, apri con un editor di testo il file functions.php del tuo tema, che trovi nello spazio FTP del tuo sito, in:

wp-content/themes/{nome_del_tema}/

ed aggiungi il seguente snippet:

// Modifica il testo del pulsante di acquisto nel loop
add_filter( 'woocommerce_product_add_to_cart_text', function( $text, $product ) {
	return __( 'I want to buy it!', 'woocommerce' );
}, 10, 2 );

ed ecco il risultato:


Modificare il testo del pulsante: la pagina prodotto

Ti starai chiedendo: e se invece volessi cambiare il testo del pulsante solamente nella pagina del singolo prodotto, è possibile?
Certo, che lo è, vediamo come fare.

Apri con un editor di testo il file functions.php del tuo tema, che trovi nello spazio FTP del tuo sito, in:

wp-content/themes/{nome_del_tema}/

ed aggiungi il seguente snippet:

// Modifica il testo del pulsante di acquisto nella pagina del singolo prodotto
add_filter( 'woocommerce_product_single_add_to_cart_text', function( $text, $product ) {
	return __( 'I want to buy it!', 'woocommerce' );
}, 10, 2 );

ed il gioco è fatto:

Da notare che lo snippet è lo stesso, ma cambia l’hook su cui andiamo ad applicare il filtro: woocommerce_product_add_to_cart_text nel caso di prodotti presenti nel loop, woocommerce_product_single_add_to_cart_text nel caso di singola pagina prodotto.


Modifica condizionale del testo

Ma cosa succede se volessi personalizzare il testo solamente per un determinato tipo di prodotto?
Ipotizziamo infatti di voler avere un testo diverso per ogni tipo diverso di prodotto (semplice, grouped, esterno, variabile) e voler diversificare le etichette dei pulsanti per ciascuno di loro, è possibile? Sì, anche in questo caso si può!
È sufficiente modificare leggermente gli snippets precedenti, aggiungendo una condizione che verifichi la tipologia di prodotto (nell’esempio, consideriamo il primo caso: il loop):

// Modifica il testo del pulsante di acquisto a seconda del tipo di prodotto
add_filter( 'woocommerce_product_add_to_cart_text', function( $text, $product ) {
	switch ( $product->get_type() ) {
        case 'simple'  :
        	return __( 'I want to buy it!', 'woocommerce' );
        	break;
        case 'variable':
        	return __( 'Let me choose!', 'woocommerce' );
        	break;
        case 'external':
        	return __( 'Take me to product!', 'woocommerce' );
        	break;
        case 'grouped' :
        	return __( 'I want to buy them!', 'woocommerce' );
        	break;
        default :
        	return __( 'Add to cart!', 'woocommerce' );
        	break;
    }
}, 10, 2 );

Avrai così etichette diverse per i pulsanti delle diverse tipologie di prodotto presenti nel tuo e-commerce:



Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Come rimuovere gli stili di default di WooCommerce

Come rimuovere gli stili di default di WooCommerce


Ecco un semplice snippet per rimuovere gli stili predefiniti di WooCommerce, permettendoti di creare ed applicare uno style personalizzato al tuo e-commerce.

Rimuovere l'auto-linking nei commenti di WordPress

Rimuovere l’auto-linking nei commenti di WordPress


Ecco un piccolo ma utilissimo snippet per rimuovere la funzione di WordPress che converte automaticamente url e indirizzi email in link cliccabili nei commenti.

Oppure cerca tra gli articoli correlati


Qualche dubbio? Ecco le opinioni degli altri utenti

Ciao come faccio con css a cambiare il colore di sfondo del pulsante aggiungi al carrello da violetto a grigio?

In risposta a rino

È sufficiente individuare la classe CSS del pulsante interessato ed assegnare il colore desiderato. Prova ad utilizzare la console di Chrome (CTRL+SHIFT+J) per aiutarti ad individuare le regole applicate al pulsante.

Ho inserito la stringa in aspetto/peronsalizza/css
Ho individuato la stringa
Inserendo background-color: #333
Ma non mi cambia il colore

In risposta a Rino

Ciao Rino, probabilmente la regola già esistente ha una priorità più alta, prova magari a fornire un link alla tua pagina, così da poterci dare un’occhiata

s*a*e*i*e.com

In risposta a Rino

Salve Rino,
presumo si riferisca al pulsante “Aggiungi al carrello” nella pagina del singolo prodotto variabile quando non è stata selezionata alcuna opzione, giusto?
In questo caso, dalla console di Chrome, risulta che la classe interessata è:

.woocommerce button.button.alt.disabled { background-color: #a46497; color: #fff; }

basta quindi assegnare il colore desiderato a questa regola per ottenere il risultato.
Saluti

Risolto!!!!!!!! Graaaaazie!

Grazie, era da 20 minuti che cercavo una soluzione.

E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)