Un popup dopo “Aggiungi al carrello” in WooCommerce deve confermare che il prodotto è entrato davvero nel carrello. Deve mostrare articolo e quantità e permettere di continuare gli acquisti o raggiungere il checkout. Aprire un pannello al solo clic non conferma il risultato: l’aggiunta potrebbe essere stata rifiutata.
L’esempio usa HookSpark Side Cart Premium e l’impostazione Open after a successful addition. Selezioniamo Presentation → Modal per mostrare il carrello in un popup centrale su desktop. Drawer è una presentazione diversa, che apre il carrello sul lato dello schermo; nessuna delle due è una vista rapida del prodotto o una promozione all’uscita. Proviamo due tazze da 40 dollari, con subtotale articoli di 80 dollari prima di imposte e spedizione, e un’aggiunta rifiutata.
Cosa preparare prima del test
Lavora in staging con Side Cart Premium attivo, un prodotto semplice acquistabile e nessun altro popup carrello abilitato. Assicurati di avere almeno due unità disponibili. Controlla prima che i normali pulsanti WooCommerce funzionino.
Rivedi l’impostazione WooCommerce che reindirizza al carrello dopo l’aggiunta. Mandare il cliente alla pagina carrello è un percorso diverso dal mantenerlo sul prodotto con un popup carrello centrale. Scegli il percorso e provalo: questa opzione non garantisce di sostituire ogni redirect o implementazione personalizzata del tema.
1. Seleziona Modal e abilita l’apertura automatica
Apri le impostazioni HookSpark Side Cart ed espandi Cart behaviour. Abilita Enable Side Cart e Open after a successful addition. Puoi abilitare anche Show floating cart button per riaprire il pannello dopo averlo chiuso.
In Layout and template imposta Presentation su Modal. La presentazione predefinita Drawer apre invece un carrello laterale. Controlla Visibility and entry points e le pagine escluse. Carrello e checkout sono sempre esclusi dalla superficie Side Cart: prova l’apertura su una pagina prodotto o negozio idonea.
Premi Publish per applicare la configurazione al negozio. Save draft salva una bozza e non modifica il frontend. Riapri quindi il prodotto in una nuova sessione di prova. Le etichette citate appartengono all’interfaccia inglese.
2. Verifica un’aggiunta riuscita
Parti da un carrello di prova vuoto, imposta quantità 2 e premi una sola volta Aggiungi al carrello. Dopo l’aggiunta controlla nome, eventuale variazione, quantità e subtotale nel popup centrale. Nell’esempio senza sconti devono risultare due tazze e 80 dollari; spedizione e imposte possono cambiare il totale da pagare.
Chiudi il pannello e verifica di poter usare di nuovo la pagina prodotto. Riaprilo con il pulsante flottante, se attivo: le due tazze devono esserci ancora. Prova i percorsi usati dai clienti: pulsante AJAX nell’archivio e modulo della pagina prodotto sono ingressi diversi. Un’aggiunta personalizzata dal tema richiede una verifica dedicata.
In Visibility of System Status (Nielsen Norman Group, 2018), il principio di usabilità è fornire un riscontro tempestivo sull’esito dell’azione. Qui significa confermare il contenuto dopo l’aggiunta riuscita, non dimostrare un aumento delle conversioni per ogni negozio.
3. Verifica un rifiuto e il recupero
In staging prova un prodotto non disponibile o una quantità non acquistabile. Leggi la risposta WooCommerce: il carrello non deve contenere l’articolo rifiutato e l’interfaccia non deve presentarlo come aggiunto. Ripristina una scelta valida, aggiungila una volta e controlla l’aggiornamento. Non modificare lo stock di produzione per questa prova.
Perché il popup non si apre?
Controlla configurazione pubblicata, attivazione del plugin, Presentation su Modal, apertura automatica e pagina idonea. Se il carrello compare sul lato, verifica che Presentation non sia rimasto su Drawer. Verifica poi che l’aggiunta sia riuscita: stock, variazioni obbligatorie o altre regole possono impedirla. Rivedi redirect, errori browser e strumenti carrello concorrenti. Se un’altra modale è già aperta, il plugin evita di aprire automaticamente un secondo overlay: chiudi la prima modale e riprova. Disabilita eventuali comportamenti in conflitto soltanto nell’ambiente di prova, un percorso alla volta.
Cosa succede su mobile?
Con una larghezza dello schermo pari o inferiore a 600 pixel, il carrello occupa tutta la schermata anche con Presentation su Modal. Le illustrazioni del popup centrale desktop non rappresentano la vista mobile. Prova chiusura, quantità e pulsante checkout su uno schermo delle dimensioni di un telefono.
Il pannello sostituisce il checkout?
No. È una superficie comoda per il carrello; il cliente deve ancora completare il checkout. Un’aggiunta non è un pagamento o una conferma ordine. Conserva il percorso del carrello normale e prova separatamente il checkout con un metodo di pagamento di test.
Posso aggiungere la barra spedizione gratuita?
È un’opzione distinta, con requisiti legati a destinazione e metodi di spedizione. L’apertura automatica non crea da sola una spedizione gratuita.
Consulta la documentazione Side Cart e prova un’aggiunta riuscita, un rifiuto e il ritorno agli acquisti prima del lancio.