Quando si gestisce un negozio WooCommerce, il pulsante add-to-cart (aggiungi al carrello) è uno degli strumenti più potenti per ottenere conversioni. È il ponte tra la navigazione del cliente e l’acquisto. Un pulsante aggiungi al carrello ben posizionato e perfettamente funzionante rende l’esperienza di acquisto più fluida e aumenta le probabilità di vendita.
Ma cosa succede quando questo pulsante fondamentale scompare o non si comporta come previsto? Molti proprietari di negozi si imbattono in problemi comuni, come l’errore “Il pulsante Aggiungi al carrello non viene visualizzato”, oppure vogliono personalizzare il pulsante per ottenere un’esperienza più personalizzata.
Questo articolo è una guida completa all’aggiunta, alla personalizzazione e alla risoluzione dei problemi del pulsante Aggiungi al carrello in WooCommerce. Che siate developer alla ricerca di un controllo completo, proprietari di negozi alla ricerca di una soluzione semplice o che stiate provando a risolvere degli errori, questi sono i passi pratici per portare a termine il lavoro in modo efficiente. Andiamo al sodo!
Il pulsante “aggiungi al carrello” di WooCommerce: una breve introduzione
Il pulsante aggiungi al carrello di WooCommerce è un modo importante per far interagire le persone con il vostro negozio. Per impostazione predefinita, consente ai clienti di selezionare i prodotti e aggiungerli al carrello.
Ecco una rapida panoramica di dove si trova di solito questo pulsante:
- Pagine dei prodotti. Appare accanto ai dettagli del prodotto come titolo, prezzo e descrizione.
- Pagine del negozio. Appare direttamente sotto ogni prodotto, consentendo ai clienti di aggiungere articoli senza visitare le pagine dei singoli prodotti.
- Pagine di categoria. Simile alle pagine del negozio, semplifica il processo di acquisto di più prodotti in una specifica categoria del negozio.
Sebbene WooCommerce fornisca un pulsante aggiungi al carrello predefinito che funziona per la maggior parte dei negozi, ci sono scenari in cui potreste dover apportare delle modifiche. Ad esempio, potreste voler personalizzare il pulsante per adattarlo al design del vostro brand, alla sua lingua o per aggiungere qualche funzionalità supplementare. Oppure potreste aver bisogno di riparare qualcosa. Se il pulsante non appare, non funziona o non si comporta correttamente a causa di problemi di compatibilità con i temi, conflitti con i plugin o impostazioni di WooCommerce non aggiornate, potrebbe essere necessario risolvere qualche problema.
Nelle sezioni seguenti esploreremo diversi metodi per aggiungere, personalizzare e correggere il pulsante aggiungi al carrello in modo che il vostro negozio WooCommerce funzioni al meglio.
Metodi per aggiungere un pulsante aggiungi al carrello
Esistono tre metodi principali per aggiungere un pulsante “Aggiungi al carrello” al vostro negozio WooCommerce. Non tutti i metodi sono adatti a tutti i livelli di competenza, quindi leggete le descrizioni, valutatene i pro e i contro e scegliete l’approccio più adatto a voi.
- Usare gli shortcode: si tratta di un metodo semplice e privo di codice, ideale per i principianti. Gli shortcode permettono di aggiungere rapidamente dei pulsanti alle pagine o ai post, ma le opzioni di personalizzazione possono essere piuttosto limitate.
- Modificare i file del tema: per chi ha bisogno di un maggiore controllo e ha dimestichezza con il codice, la modifica dei file dei temi (come
functions.php) permette di aggiungere e personalizzare il pulsante esattamente come desiderate. Tuttavia, questo approccio richiede cautela e conoscenze tecniche, poiché gli errori possono influenzare l’intero sito. - Utilizzare i plugin: i plugin sono un’opzione facile da usare che semplifica il processo di aggiunta e personalizzazione dei pulsanti add-to-cart. Sebbene questo metodo sia rapido e accessibile, i plugin scelti male a volte causano conflitti, rallentano le prestazioni del sito o richiedono aggiornamenti frequenti.
Vediamo come utilizzare gli shortcode per aggiungere un pulsante “aggiungi al carrello”.
Usare gli shortcode
Gli shortcode sono uno dei modi più semplici e accessibili per aggiungere un pulsante aggiungi al carrello in WooCommerce. Uno shortcode è un piccolo pezzo di codice racchiuso tra parentesi come questo: [shortcode]. WooCommerce interpreta questo shortcode per visualizzare una funzione specifica sul vostro sito.
Per aggiungere un pulsante aggiungi al carrello utilizzando uno shortcode, si può usare la seguente sintassi: [add_to_cart id="PRODUCT_ID"]
PRODUCT_ID è l’ID univoco del prodotto a cui volete collegarti. Per trovare l’ID del prodotto, andate su Prodotti > Tutti i prodotti nella bacheca di WordPress. Passate il mouse sul prodotto che volete aggiungere e l’ID del prodotto apparirà sotto il nome del prodotto stesso come segue: ID: 123.
Dovrete quindi inserire lo shortcode in una pagina o in un post. Per farlo, aprite la pagina o il post in cui desiderate visualizzare il pulsante. Quindi aggiungete un blocco Shortcode (se state usando l’editor di blocchi di WordPress) o incollate lo shortcode direttamente nell’area del contenuto.
Sostituite PRODUCT_ID con l’ID prodotto corretto, quindi salvate o aggiornate la pagina o il post. Nell’anteprima della pagina, vedrete che il pulsante è stato aggiunto, insieme al prezzo dell’articolo:
Per impostazione predefinita, il pulsante adotterà gli stili del vostro tema.
Modifica dei file del tema (opzione personalizzata)
Per i proprietari di negozi o gli sviluppatori che desiderano un controllo totale, la modifica dei file del tema è un modo eccellente per aggiungere e personalizzare il pulsante aggiungi al carrello. Questo metodo richiede conoscenze di codifica e cautela, ma offre infinite possibilità di personalizzazione.
Questo approccio permette di modificare il posizionamento, lo stile e la funzionalità del pulsante esattamente come serve. Inoltre, riduce la dipendenza da plugin di terze parti, che possono sempre migliorare le prestazioni del sito.
Per aggiungere il pulsante aggiungi al carrello modificando i file del vostro tema, dovrete prima creare un tema child. Prima di modificare i file del tema, è fondamentale utilizzare un tema child per evitare che le modifiche vengano perse durante gli aggiornamenti del tema.
Il resto di queste istruzioni deve essere eseguito solo all’interno del tema child.
Il file da modificare dipende da dove volete che appaia il pulsante. I file più comuni sono:
single-product.php(per le pagine dei prodotti)functions.php(per le funzionalità globali)
Una volta trovato il file giusto all’interno del tema child, aggiungete il seguente snippet PHP nella posizione desiderata del file del tema:echo do_shortcode('[add_to_cart id="PRODUCT_ID"]');
Sostituite PRODUCT_ID con l’effettivo ID del prodotto.
Quindi, salvate le modifiche e caricate il file aggiornato. Visitate il vostro negozio per verificare che il pulsante appaia e funzioni come previsto.
Usare i plugin
Se preferite una soluzione senza codice, i plugin sono un modo rapido e affidabile per aggiungere e personalizzare il pulsante aggiungi al carrello senza avere conoscenze di programmazione.
Ecco alcuni plugin affidabili che possono aiutarvi a gestire e personalizzare il pulsante aggiungi al carrello di WooCommerce:
YITH WooCommerce Product Add-Ons
Il plugin YITH WooCommerce Product Add-Ons permette di migliorare i vostri prodotti offrendo opzioni e personalizzazioni aggiuntive direttamente sulla pagina del prodotto. Che si tratti di confezioni regalo, campi di personalizzazione o servizi aggiuntivi, questo plugin rende più semplice un’esperienza di acquisto personalizzata. I clienti possono selezionare i componenti aggiuntivi durante il processo di acquisto, migliorando la loro soddisfazione e aumentando il valore medio degli ordini del vostro negozio.
Caratteristiche principali
- Aggiunta di un numero illimitato di opzioni extra, tra cui caselle, dropdown e campi di testo ai prodotti.
- Addebito dei costi aggiuntivi per i componenti aggiuntivi selezionati per aumentare le entrate.
- Offerta di una logica condizionale per visualizzare le opzioni in base alle selezioni dei clienti.
- Completamente compatibile con i prodotti variabili e i temi WooCommerce.
WooCommerce Custom Add to Cart Button
Il plugin Woo Custom Add to Cart Button permette di personalizzare il funzionamento dei pulsanti add-to-cart di WooCommerce. Dà il pieno controllo sul testo, i colori, gli stili e il posizionamento dei pulsanti in modo che si adattino perfettamente al branding del vostro negozio. Il plugin supporta anche funzioni avanzate come gli URL personalizzati, in modo da poter reindirizzare i clienti a pagine specifiche, come quelle di checkout o le landing page personalizzate, dopo aver cliccato sul pulsante.
Caratteristiche principali
- Personalizzazione di testo, stile e posizionamento del pulsante aggiungi al carrello.
- Impostazione di URL di reindirizzamento personalizzati per migliorare i flussi di pagamento.
- Applicazione facilitata delle modifiche senza toccare il codice, il che lo rende facile da usare per i principianti.
- Leggero e compatibile con la maggior parte dei temi WooCommerce.
WPC AJAX Add to Cart
Il plugin WPC AJAX Add to Cart migliora il negozio WooCommerce consentendo ai clienti di aggiungere prodotti al carrello senza aggiornare la pagina. Questa funzionalità AJAX migliora l’esperienza di acquisto, rendendola più veloce e più facile da usare. Il plugin supporta diversi tipi di prodotti, tra cui prodotti semplici, variabili e raggruppati. Si integra inoltre con la maggior parte dei temi e dei plugin WooCommerce.
Caratteristiche principali
- Funzionalità di aggiunta al carrello alimentata da AJAX per un’esperienza utente più fluida.
- Supporto flessibile per diversi tipi di prodotti, compresi quelli variabili e raggruppati.
- Compatibilità con i temi e le estensioni WooCommerce più diffuse.
- Design leggero per garantire al negozio velocità e reattività.
Problemi comuni e come risolverli
Anche con le funzioni integrate di WooCommerce, il pulsante aggiungi al carrello a volte ha un aspetto strano, si comporta in modo non corretto o non viene visualizzato del tutto. Questo compromette le prestazioni del vostro negozio e frustra i clienti. Qui di seguito illustriamo i problemi più comuni e forniamo le soluzioni per risolverli.
Il pulsante Aggiungi al carrello non viene visualizzato
Se il pulsante aggiungi al carrello non compare, spesso è dovuto a:
- Problemi di compatibilità del tema
- Conflitti tra plugin
- Versioni di WooCommerce non aggiornate
- Impostazioni errate del prodotto
Per risolvere questo problema, controllate innanzitutto le impostazioni di WooCommerce. Andate su WooCommerce > Impostazioni > Prodotti e assicuratevi che l’opzione Attiva i pulsanti AJAX aggiungi al carrello sia selezionata.
Successivamente, verificate il tipo di prodotto. Alcuni tipi di prodotti, come quelli esterni o affiliati, potrebbero non visualizzare il pulsante Aggiungi al carrello. Per risolvere questo problema, andate su Prodotti > Tutti i prodotti nella bacheca.
Quindi, modificate il prodotto e assicuratevi che sia impostato su Prodotto semplice o Prodotto variabile nella sezione Dati del prodotto.
Se questo non risolve il problema, verificate che non ci siano conflitti tra i plugin. Disattivate tutti i plugin tranne WooCommerce e visitate il negozio per vedere se il pulsante Aggiungi al carrello ricompare. In caso affermativo, riattivate i plugin uno alla volta, aggiornando ogni volta il sito per identificare il plugin in conflitto.
Per continuare con il troubleshooting, passate temporaneamente a un tema predefinito come Storefront o Twenty Twenty-Four. Se il pulsante funziona con il tema predefinito, il problema risiede nel tema attivo. Potrebbe essere necessario contattare lo sviluppatore del tema per ottenere assistenza.
Potete anche controllare se WooCommerce e WordPress sono aggiornati. Andate su Bacheca > Aggiornamenti e assicuratevi che WooCommerce, WordPress e tutti i plugin siano aggiornati. Le versioni non aggiornate possono causare errori e problemi di prestazioni.
Se avete ancora problemi, attivate il debug. Per farlo, andate su WooCommerce > Stato > Log e cercate i messaggi di errore. Uno strumento come il plugin Query Monitor può aiutarvi a identificare errori o conflitti PHP.
Il pulsante Aggiungi al carrello non funziona
A volte il pulsante appare ma non riesce ad aggiungere prodotti al carrello. Questo può accadere a causa di errori JavaScript o di problemi di caching.
Per iniziare, controllate che non ci siano errori JavaScript. Aprite il vostro negozio in un browser e premete F12 per aprire gli strumenti per gli sviluppatori o Cmd + Option + I su Mac. Andate alla scheda Console e verificate la presenza di messaggi di errore rossi.
Se compaiono degli errori, potrebbero essere causati da script in conflitto con un tema o un plugin.
Se utilizzate un plugin di caching, svuotate la cache e provate di nuovo. Svuotate la cache del browser o provate il sito in una finestra in incognito.
Pulsanti add-to-cart duplicati
A volte si possono vedere più pulsanti “aggiungi al carrello” nelle pagine dei prodotti, il che può confondere i clienti.
Questo è spesso causato da template o personalizzazioni del tema. Per risolvere questo problema, controllate che non ci siano hook do_action(‘woocommerce_after_add_to_cart_button’) duplicati nel file single-product.php del tema. Quindi rimuovete gli hook duplicati e salvate le modifiche.
Come personalizzare il pulsante Aggiungi al carrello di WooCommerce
La personalizzazione del pulsante aggiungi al carrello migliora l’esperienza dell’utente e lo rende più adatto al marchio del vostro negozio. Se volete cambiare il testo, lo stile o la funzionalità, WooCommerce lo rende possibile con alcune modifiche ai file del vostro tema o al CSS. Ricordate di utilizzare un tema child per apportare queste modifiche e di eseguire sempre un backup del sito prima di procedere.
Cambiare il testo del pulsante
Per impostazione predefinita, WooCommerce utilizza il testo del pulsante “Aggiungi al carrello”. Se volete sostituirlo con qualcosa come “Compra ora”, potete farlo con un semplice frammento di codice.
Aggiungete il seguente codice al file functions.php del vostro tema child:
function customize_add_to_cart_text( $text ) {
return __( 'Buy Now', 'woocommerce' );
}
add_filter( 'woocommerce_product_add_to_cart_text', 'customize_add_to_cart_text' );Sostituite Compra ora con il testo che preferite.
Salvate il file e aggiornate lo shop per vedere il testo del pulsante aggiornato.
Cambiare lo stile del pulsante
Per adattarsi meglio al vostro branding, modificate l’aspetto del pulsante, compresi i colori, i caratteri e le dimensioni, utilizzando un CSS personalizzato.
Ecco un esempio di CSS per personalizzare il pulsante Aggiungi al carrello:
.button.single_add_to_cart_button {
background-color: #ff6600;
color: #ffffff;
font-size: 18px;
padding: 12px 24px;
border-radius: 8px;
text-transform: uppercase;
}
.button.single_add_to_cart_button:hover {
background-color: #e65c00;
color: #ffffff;
}Per applicare questo CSS, andate su Aspetto > Personalizza > CSS aggiuntivi nella dashboard di WordPress. Incolla il codice qui sopra e cliccate su Pubblica per salvare le modifiche.
Reindirizzare gli utenti dopo aver cliccato sul pulsante
Cliccando sul pulsante aggiungi al carrello di solito i clienti rimangono sulla stessa pagina. Se volete reindirizzare gli utenti a una pagina specifica, come quella del carrello o del checkout, aggiungete il seguente snippet da GitHub al vostro file functions.php:
function redirect_after_add_to_cart() {
global $woocommerce;
$checkout_url = wc_get_checkout_url();
return $checkout_url;
}
add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_after_add_to_cart' );Questo esempio reindirizza gli utenti alla pagina di checkout.
Sostituite $checkout_url con qualsiasi altro URL di pagina se necessario (ad esempio la pagina del carrello).
Riepilogo
Il pulsante aggiungi al carrello di WooCommerce svolge un ruolo importante nel creare un’esperienza di acquisto fluida e nel favorire le conversioni. In questa guida abbiamo esplorato vari metodi per aggiungere, personalizzare e risolvere efficacemente i problemi del pulsante.
Si possono usare gli shortcode per semplicità, modificare i file del tema per avere un controllo completo o affidarsi ai plugin per una soluzione senza codice. Abbiamo anche incluso un’introduzione su come risolvere i problemi più comuni e aggiungere alcune personalizzazioni per creare un’esperienza utente solida fin dall’inizio.
Volete che il vostro negozio funzioni bene sotto ogni aspetto? Prendete in considerazione l’hosting gestito per WordPress di Kinsta. Grazie a funzionalità come gli ambienti di staging, i backup automatici e la sicurezza di alto livello, il vostro sito funzionerà senza problemi e voi potrete concentrarvi sulla crescita del vostro negozio e sull’offrire prodotti eccellenti. Cosa c’è di meglio?
Steve Bonisteel è un Technical Editor di Kinsta che ha iniziato la sua carriera di scrittore come giornalista della carta stampata, inseguendo ambulanze e camion dei pompieri. Dalla fine degli anni '90 si occupa di tecnologia legata a Internet.
