Come personalizzare il pulsante Aggiungi al carrello in WooCommerce

 add_action('woocommerce_single_product_summary', 'QL_add_text_above_add_to_cart', 20);
funzione 'QL_add_text_above_add_to_cart'() {
  echo "Garanzia di rimborso di 14 giorni";
}

D'altra parte, puoi anche aggiungere del testo sotto il pulsante Aggiungi al carrello . Questo può essere utile per informare gli acquirenti che potrebbero esserci sconti per acquisti all'ingrosso, ad esempio. Per aggiungere un testo sotto il pulsante Aggiungi al carrello, puoi utilizzare questo snippet di codice:

 add_action('woocommerce_after_add_to_cart_button', 'QL_add_text_under_add_to_cart');
funzione QL_aggiungi_testo_sotto_aggiungi_al_carrello() {
  echo 'Contattaci per acquisti all'ingrosso';
} 

Come puoi vedere, si tratta di modifiche molto semplici che puoi apportare per aumentare i tassi di conversione in pochissimo tempo.

3) Cambia il colore del pulsante Aggiungi al carrello

Ora vediamo come modificare il pulsante Aggiungi al carrello cambiandone il colore. Anche se la maggior parte dei temi WordPress e WooCommerce sono dotati di colori predefiniti per i pulsanti, dovresti assicurarti che corrispondano allo stile del tuo negozio.

Per personalizzare il colore del pulsante Aggiungi al carrello in WooCommerce, dovrai aggiungere uno snippet di codice CSS al file style.css . Puoi accedervi con un client FTP o dalla dashboard di WordPress andando su Aspetto > Personalizza > CSS aggiuntivo . Qui ci sono due opzioni:

1. Cambia il colore del pulsante Aggiungi al carrello sui singoli prodotti
2. Cambia il colore del pulsante Aggiungi al carrello nelle pagine archivio

3.1) Modificare il colore sui Singoli Prodotti

Incolla questo codice nel file style.css e cambia i colori in quelli che desideri. In questo caso, avremo uno sfondo rosso e un testo argentato.

 .single-product .product .single_add_to_cart_button.button {
colore di sfondo: #FF0000;
colore: #C0C0C0;
}

3.2) Modifica il colore del pulsante Aggiungi al carrello nella pagina di archivio

Per personalizzare il pulsante Aggiungi al carrello e cambiarne il colore nella Pagina Archivio WooCommerce, usa questo codice e cambia i codici esadecimali con quelli che hanno senso per il tuo negozio.

 .woocommerce .product .add_to_cart_button.button {
colore di sfondo: #FF0000;
colore: #C0C0C0;
} 

4) Rimuovere il pulsante Aggiungi al carrello e aggiungere un pulsante di acquisto diretto nella pagina del negozio

Ora, diamo un'occhiata a un'opzione più avanzata. Avere un processo di acquisto con diversi passaggi aumenta le possibilità che gli acquirenti abbandonino in ogni fase. Ecco perché accorciare la canalizzazione è un ottimo modo per ottimizzare il checkout e migliorare i tassi di conversione.

In questa sezione, ti mostreremo come rimuovere il pulsante Aggiungi al carrello e sostituirlo con uno di acquisto diretto utilizzando Direct Checkout per WooCommerce . Questo plugin ha versioni sia gratuite che premium e include molte funzionalità per aiutarti a semplificare il checkout. Inoltre, ti consente di saltare la pagina del carrello e reindirizzare gli utenti direttamente alla pagina di pagamento , rendendo più breve il processo di acquisto. Quindi, vediamo come rimuovere completamente il pulsante Aggiungi al carrello e sostituirlo con un pulsante di acquisto diretto.

Modifica la funzione del pulsante Aggiungi al carrello

Innanzitutto, devi installare e attivare Direct Checkout. Puoi scaricare la versione gratuita da questo link o dare un'occhiata a uno dei piani premium che partono da 19 USD (pagamento una tantum).

Dopo aver attivato il plugin, nella dashboard di WordPress , vai su WooCommerce > Pagamento diretto > Generale e compila le opzioni come segue:

Per ulteriori informazioni su come personalizzare la pagina del negozio WooCommerce, dai un'occhiata a questa guida completa.

Modifica il testo del pulsante Aggiungi al carrello

Dopo aver impostato le opzioni nella scheda Generale, il pulsante Aggiungi al carrello reindirizzerà gli utenti alla pagina di pagamento. Tuttavia, dovresti anche modificare il testo del pulsante poiché hai cambiato la sua funzione. Il pulsante non aggiunge più prodotti al carrello, quindi è meglio cambiarlo in qualcosa come Acquista ora, ad esempio. Per fare ciò, vai alla scheda Archivi e compila le opzioni come segue: Qui puoi modificare il testo del pulsante per tipi di prodotti specifici. Applicheremo le modifiche a tutti i tipi di prodotti selezionandoli tutti nel campo corrispondente. Dopodiché, è il momento di controllare il front-end.

Come puoi vedere, abbiamo personalizzato il pulsante Aggiungi al carrello nel nostro negozio WooCommerce e sostituito il pulsante Aggiungi al carrello con un pulsante Acquista ora che porterà i clienti dalla pagina del negozio direttamente alla pagina di pagamento. Inoltre, abbiamo completamente rimosso la funzionalità del carrello dal nostro negozio.

Per ulteriori informazioni su come rimuovere il pulsante Aggiungi al carrello, consulta questa guida dettagliata.

5) Personalizza il pulsante Aggiungi al carrello e aggiungi un pulsante Acquisto diretto nella Pagina del prodotto

Infine, possiamo fare qualcosa di simile e personalizzare il pulsante Aggiungi al carrello per reindirizzare gli utenti dalla pagina del prodotto alla cassa .

In questo modo, puoi facilmente creare un pulsante Aggiungi al carrello personalizzato in WooCommerce sia nella pagina Negozio che nella pagina Prodotti. E la parte migliore è che puoi avere pulsanti diversi su ogni pagina.

Come personalizzare il messaggio Aggiunto al carrello

Oltre a personalizzare il pulsante, puoi anche modificare il messaggio Aggiunto al carrello. Il modo più semplice per farlo è semplicemente cambiare il messaggio incollando il seguente script nel file functions.php .

 add_filter( 'wc_add_to_cart_message_html', 'quadlayers_custom_add_to_cart_message');
funzione quadlayers_custom_add_to_cart_message() {
   $message = 'Il tuo prodotto è stato aggiunto al carrello. Grazie per l'acquisto con noi!' ;
   restituisci $messaggio;
}

In questo caso, stiamo modificando il messaggio in Il tuo prodotto è stato aggiunto al carrello. Grazie per l'acquisto con noi!

Per renderlo più personalizzato, puoi visualizzare il nome del prodotto che il cliente ha appena aggiunto al carrello come segue:

 add_filter('wc_add_to_cart_message', 'quadlayers_custom_wc_add_to_cart_message', 10, 2); 
 
funzione quadlayers_custom_wc_add_to_cart_message($messaggio, $id_prodotto) { 
    $messaggio = sprintf(esc_html__('%s è stato aggiunto al tuo carrello. Grazie per lo shopping!','tm-organik'), get_the_title( $product_id ) ); 
    restituisci $messaggio; 
} 

Questi sono solo alcuni esempi, ma c'è molto di più che puoi fare e aggiungere link e pulsanti al messaggio. Per ulteriori informazioni a riguardo, consulta la nostra guida su come modificare il messaggio Add-to-Cart di WooCommerce.

Bonus: modifica il testo del pulsante Aggiungi al carrello per diverse categorie

Ora supponiamo che tu abbia diverse categorie di prodotti e desideri avere pulsanti Aggiungi al carrello personalizzati per ciascuna categoria. Ad esempio, potresti voler avere un pulsante che dice "Acquista ora" per la categoria di prodotti 1 ma visualizzare il testo "Download" per la categoria 2.

Per fare ciò, dovresti usare la stessa funzione che abbiamo usato al punto 1. add_filter('woocommerce_product_single_add_to_cart_text','QL_customize_add_to_cart_button_woocommerce');

È necessario ottenere le categorie di ciascun prodotto e quindi utilizzare un condizionale per modificare il testo in base alla tassonomia come segue:

if($category=='category 1'){
return __('Buy Now', 'woocommerce');
}elseif($category=='category 2'){
return __('Download', 'woocommerce');
}else{
return __('Default text', 'woocommerce');
}

Il mio pulsante Aggiungi al carrello non funziona. Cosa posso fare?

Potrebbero esserci diversi motivi per cui il pulsante Aggiungi al carrello potrebbe non funzionare. I più comuni sono:

• Plugin/incompatibilità del tema
• Prodotti con informazioni incomplete
• Problemi con la cache
• Endpoint di pagamento
• Permalink
• Problemi di ModSecurity
• E altro ancora

Per sapere come risolvere ciascuno di questi problemi, consulta la nostra guida su come risolvere il pulsante Aggiungi al carrello.

APPUNTI

• Le impostazioni salvate nella sezione Archivi del pannello delle opzioni del plug-in si applicheranno alle pagine di base del Negozio e delle categorie di Prodotti, mentre le impostazioni nella sezione Prodotti si applicheranno solo alle pagine dei Prodotti.
• Per questa demo, abbiamo utilizzato il tema Storefront ma puoi utilizzare qualsiasi tema compatibile con WooCommerce.
• Anche se la maggior parte dei temi si integrerà senza problemi, alcuni temi potrebbero alterare le funzionalità predefinite di WooCommerce e causare problemi durante l'utilizzo di Direct Checkout.
• Abbiamo trattato alcune funzionalità di base di Direct Checkout. Per funzionalità più avanzate, dai un'occhiata ai piani Premium che ti aiuteranno a portare il tuo negozio al livello successivo.

Conclusione

Tutto sommato, la personalizzazione del pulsante Aggiungi al carrello può avere un grande impatto sulla tua attività. Ecco perché ti consigliamo di adattarlo alle esigenze del tuo negozio. In questa guida, hai imparato diversi modi per personalizzare il pulsante Aggiungi al carrello sia a livello di codice che con i plug-in:

• Modifica il testo del pulsante Aggiungi al carrello
• Aggiungi testo sopra o sotto il pulsante Aggiungi al carrello
• Cambia il colore del pulsante Aggiungi al carrello
• Rimuovi il pulsante Aggiungi al carrello e aggiungi un pulsante Acquisto diretto nella pagina del negozio
• Personalizza il pulsante Aggiungi al carrello e aggiungi un pulsante Acquisto diretto nella pagina del prodotto