Lo standard della pagina negozio di WooCommerce mostra un solo pulsante sotto ogni prodotto: «Aggiungi al carrello». Per la maggior parte dei negozi è sufficiente. Ma se vendi prodotti che richiedono una valutazione prima dell'acquisto, un singolo pulsante «Aggiungi al carrello» non basta. I clienti vogliono prima aprire la pagina prodotto, leggere la descrizione, verificare le specifiche e solo dopo aggiungere al carrello da lì.

Il problema è che WooCommerce non offre un'impostazione nativa per «aggiungere un pulsante Leggi di più accanto ad Aggiungi al carrello». I plugin per questo compito sono o gonfi di funzioni superflue o entrano in conflitto con il tema. Resta quindi la strada collaudata: codice personalizzato nel functions.php.

Di seguito trovi una guida passo passo. Otterrai due pulsanti nella pagina negozio: «Leggi di più» (collegamento alla pagina prodotto) e «Aggiungi al carrello» (funziona come sempre). Tratteremo anche il caso particolare dei prodotti esauriti.

💡 Panoramica rapida:

• Rimuovere il pulsante predefinito «Aggiungi al carrello» tramite remove_action
• Aggiungere un pulsante personalizzato «Leggi di più» con link alla pagina prodotto
• Riposizionare il pulsante «Aggiungi al carrello» accanto a «Leggi di più»
• Correggere la duplicazione dei pulsanti per i prodotti esauriti con jQuery
• Il codice va nel functions.php del tema child, sicuro e senza plugin

Come WooCommerce genera i pulsanti nella pagina negozio

WooCommerce produce il pulsante «Aggiungi al carrello» tramite l'hook woocommerce_after_shop_loop_item. Questo hook viene attivato in ogni scheda prodotto all'interno del loop WP_Query nella pagina negozio. La funzione responsabile dell'aggiunta del pulsante è woocommerce_template_loop_add_to_cart con priorità 10.

L'hook è agganciato a un'azione. Per modificare l'insieme dei pulsanti, ci lavoriamo direttamente: rimuoviamo il gestore predefinito e ne aggiungiamo uno nostro. Non sono necessarie modifiche ai template di WooCommerce e il tema resta aggiornabile.

Passo 1: rimuovere il pulsante predefinito «Aggiungi al carrello»

Il primo passo è sganciare la funzione woocommerce_template_loop_add_to_cart. Inserisci questo codice nel functions.php del tuo tema child o tramite il plugin Code Snippets:

1
/* Remove the standard Add to cart button */
2
function remove_loop_button() {
3
    remove_action(
4
        'woocommerce_after_shop_loop_item',
5
        'woocommerce_template_loop_add_to_cart',
6
        10
7
    );
8
}
9
add_action( 'init', 'remove_loop_button' );

Avvolgiamo remove_action in una funzione e la agganciamo all'hook init. Non puoi chiamare remove_action direttamente nel functions.php perché WooCommerce potrebbe non aver ancora inizializzato i suoi hook quando il tema viene caricato. L'hook init garantisce che tutte le azioni siano già registrate.

Dopo aver inserito questo codice, la pagina negozio perderà il pulsante «Aggiungi al carrello». Non preoccuparti: nel prossimo passo lo riporteremo, ora abbinato a «Leggi di più».

Passo 2: aggiungere un pulsante personalizzato «Leggi di più»

Il pulsante «Leggi di più» è un link alla pagina prodotto, stilizzato come un pulsante WooCommerce standard. Usiamo $product->get_permalink() per ottenere l'URL e do_shortcode per il contenitore:

1
/* Add a More details button */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart'
5
);
6
function replace_add_to_cart() {
7
    global $product;
8
    $link = $product->get_permalink();
9
    echo do_shortcode(
10
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Read More</a>'
11
    );
12
}

La funzione si aggancia alla stessa azione woocommerce_after_shop_loop_item con la priorità predefinita di 10. Recupera l'oggetto $product tramite global, ottiene l'URL della pagina prodotto e produce un link con la classe button. WooCommerce eredita automaticamente gli stili dei pulsanti dal tema attivo.

Nota la chiamata a esc_url(): eseguire l'escape dell'URL è obbligatorio per la sicurezza. Puoi sostituire la classe addtocartbutton con una tua se desideri stili personalizzati.

Passo 3: ripristinare il pulsante «Aggiungi al carrello» affiancato

Il pulsante «Aggiungi al carrello» serve ancora nella pagina negozio; senza, i clienti non possono aggiungere prodotti direttamente al carrello. Ma ora deve apparire DOPO il pulsante «Leggi di più». Per ottenere questo risultato, registriamo il gestore nativo con priorità 20 (dopo il nostro pulsante con priorità 10):

1
/* Restore the Add to cart button */
2
add_action( 'after_setup_theme', 'lets_add_cart_button' );
3
function lets_add_cart_button() {
4
    add_action(
5
        'woocommerce_after_shop_loop_item',
6
        'woocommerce_template_loop_add_to_cart',
7
        20
8
    );
9
}

Avvolgiamo add_action nell'hook after_setup_theme per lo stesso motivo della rimozione: WooCommerce potrebbe non essere ancora caricato quando functions.php viene eseguito. La priorità 20 posiziona «Aggiungi al carrello» rigorosamente dopo «Leggi di più» (priorità 10).

Risultato: sotto ogni prodotto nella pagina negozio ora hai due pulsanti. Prima «Leggi di più», poi «Aggiungi al carrello».

Il video mostra un approccio alternativo che aggiunge pulsanti personalizzati a singoli prodotti e all'intera pagina negozio. Il principio di lavoro con gli hook è lo stesso che abbiamo trattato sopra.

Cosa non funziona con i prodotti esauriti

Il codice sopra funziona perfettamente per i prodotti disponibili. Ma per gli articoli esauriti sorge un conflitto: WooCommerce sostituisce automaticamente il pulsante «Aggiungi al carrello» con «Leggi di più» per tali prodotti. Il risultato sono DUE pulsanti «Leggi di più» in fila: il nostro personalizzato e la sostituzione di WooCommerce.

Il problema non è nella logica del nostro codice; è così che è progettato il core di WooCommerce. La funzione standard woocommerce_template_loop_add_to_cart genera un link «Leggi di più» invece del pulsante «Aggiungi al carrello» per gli articoli esauriti. Il nostro pulsante «Leggi di più» personalizzato rimane, quindi otteniamo un duplicato.

Passo 4: rimuovere il pulsante extra con jQuery

Il modo più diretto per rimuovere il pulsante duplicato è jQuery. Lo script individua il link contenente il testo «Leggi di più» che si trova all'interno del contenitore span standard di WooCommerce e lo rimuove:

1
/* Remove the duplicate More details button for out-of-stock items */
2
jQuery( document ).ready( function( $ ) {
3
    $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Read More")' ).remove();
4
 
5
    $( 'button.button.woof_reset_search_form' ).on( 'click', function() {
6
        $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Read More")' ).remove();
7
    });
8
});

Lo script fa due cose. Primo, al caricamento della pagina rimuove tutti i link con la classe product_type_simple che contengono il testo «Leggi di più». Secondo, aggancia un gestore al pulsante di reset dei filtri WooCommerce (woof_reset_search_form) perché dopo un filtraggio AJAX il DOM si aggiorna e i duplicati ricompaiono.

Inserisci il codice jQuery in un file .js separato e caricalo tramite wp_enqueue_script nel functions.php, oppure incollalo nel campo «JavaScript personalizzato» del tuo tema o di un plugin come Simple Custom CSS and JS.

Approccio alternativo: un filtro invece della rimozione

Se preferisci evitare jQuery, esiste un metodo più elegante: il filtro woocommerce_product_is_in_stock. Verifica la disponibilità del prodotto prima di generare il pulsante personalizzato:

1
/* Do not show the More details button for unavailable items */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart_conditional',
5
    10
6
);
7
function replace_add_to_cart_conditional() {
8
    global $product;
9
 
10
    if ( ! $product->is_in_stock() ) {
11
        return;
12
    }
13
 
14
    $link = $product->get_permalink();
15
    echo do_shortcode(
16
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Read More</a>'
17
    );
18
}

Il metodo $product->is_in_stock() restituisce false per i prodotti esauriti, quindi il nostro pulsante semplicemente non viene generato. WooCommerce mostra il proprio «Leggi di più» per tali prodotti. Per gli articoli disponibili, entrambi i pulsanti funzionano come previsto. Questo approccio è più pulito: niente JS, meno conflitti tra filtri.

Quale variante scegliere dipende dal tuo negozio. jQuery è più universale (funziona con qualsiasi plugin di filtraggio), mentre il filtro PHP è più leggero e veloce.

⁉️🤔 Domande frequenti

Il codice non funziona e i pulsanti non compaiono. Cosa c'è che non va?

Per prima cosa, assicurati che il codice sia nel functions.php del tema CHILD, non del tema parent (il parent viene sovrascritto dagli aggiornamenti). Secondo, verifica che WooCommerce sia attivo e aggiornato all'ultima versione. Terzo, controlla se il tuo tema sovrascrive l'hook woocommerce_after_shop_loop_item. Alcuni temi sostituiscono completamente il template della scheda prodotto e gli hook di WooCommerce non vengono attivati al suo interno.

Posso cambiare il testo del pulsante «Leggi di più» con qualcos'altro?

Sì. Nella funzione replace_add_to_cart(), sostituisci la stringa 'Read More' negli attributi del tag <a> con il testo che preferisci, ad esempio «Visualizza», «Seleziona» o «Descrizione». Il testo è statico e non influisce sulla funzionalità.

Perché il selettore jQuery usa product_type_simple?

Perché WooCommerce assegna classi diverse ai pulsanti a seconda del tipo di prodotto: product_type_simple per i prodotti semplici, product_type_variable per quelli variabili. Se il tuo negozio ha prodotti variabili esauriti, aggiungi un secondo selettore per product_type_variable oppure usa un selettore più generico come a.button.ajax_add_to_cart.

È sicuro inserire codice PHP nel functions.php?

È sicuro a due condizioni. Primo, fai un backup del functions.php prima di modificarlo (oppure usa un tema child così l'originale resta intatto). Secondo, inserisci il codice via FTP/SFTP o tramite l'editor «Aspetto → Editor del tema» dell'amministrazione, piuttosto che con plugin di snippet con caricamento automatico. Se si verifica un errore di sintassi, WordPress mostrerà una schermata bianca e ripristinare il file è più semplice via FTP.

I pulsanti non assomigliano ai pulsanti nativi del mio tema. Come posso stilizzarli?

La classe button nel tag <a> fornisce gli stili WooCommerce di base. Se il pulsante appare ancora diverso, probabilmente il tuo tema sovrascrive i selettori dei pulsanti in modo più specifico (ad esempio, .products .button invece del semplice .button). Copia le classi CSS dal pulsante nativo «Aggiungi al carrello» usando l'ispettore del browser e aggiungile all'attributo class del tuo link personalizzato.

Cosa usare nel 2026: codice o un plugin?

La scelta tra codice personalizzato e un plugin dipende da tre fattori. Se stai modificando un singolo pulsante nella pagina negozio e vuoi evitare l'appesantimento da plugin, il codice di questo articolo è sufficiente. Non aggiunge peso nell'amministrazione, non crea query aggiuntive al database e non si rompe con gli aggiornamenti di WooCommerce (gli hook woocommerce_after_shop_loop_item e woocommerce_template_loop_add_to_cart sono stabili dalla versione 3.0).

Tuttavia, se hai bisogno di modificare il comportamento dei pulsanti su pagine diverse o per categorie di prodotto differenti, vale la pena considerare i plugin: YITH WooCommerce Customize My Account Page offre un editor visuale dei pulsanti, e WooCommerce Product Add-Ons ti permette di aggiungere campi personalizzati prima dell'acquisto.

Inizia con il codice. È gratuito, trasparente e completamente sotto il tuo controllo. Se in futuro avrai bisogno di più funzionalità, passa ai plugin, ora con una chiara comprensione di esattamente quali caratteristiche ti servono.