Come modificare e personalizzare la pagina del carrello di WooCommerce

Pubblicato: 2023-10-26

Quando utilizzi WooCommerce per creare il tuo negozio online, otterrai alcuni modelli di pagina utili progettati specificamente per l'e-commerce, inclusa una pagina del carrello. Tuttavia, potresti voler migliorare l'aspetto e la funzionalità predefiniti. In tal caso, vorrai sapere come modificare la pagina del carrello WooCommerce.

La buona notizia è che questo processo è abbastanza semplice. Inoltre, ci sono diversi approcci che puoi provare. Ad esempio, puoi utilizzare i blocchi per personalizzare la pagina del carrello WooCommerce. Oppure, per un maggiore controllo, puoi modificare manualmente la pagina del carrello.

In questo post, inizieremo discutendo del motivo per cui potresti voler modificare la pagina del tuo carrello WooCommerce. Poi ti mostreremo cinque modi diversi per farlo. Infine, condivideremo alcuni suggerimenti e best practice, prima di rispondere ad alcune domande frequenti.

Perché potresti voler modificare la pagina del tuo carrello in WooCommerce

Per iniziare, parliamo del motivo per cui potresti voler modificare la pagina del carrello in WooCommerce. Ecco come potrebbe apparire la pagina del carrello WooCommerce predefinita:

Per iniziare, parliamo del motivo per cui potresti voler modificare la pagina del tuo carrello in WooCommerce (immagine dell'editor del carrello).

Come puoi vedere, la pagina del carrello predefinita offre una buona base di riferimento. Visualizza un riepilogo delle informazioni essenziali sul prodotto, come prezzo, quantità e totale parziale.

I clienti possono modificare la quantità di un prodotto direttamente dalla pagina Carrello, quindi fare clic su un pulsante per aggiornare i propri carrelli. Inoltre, questa pagina offre ai clienti un posto dove aggiungere un codice coupon, nonché un semplice pulsante Procedi al pagamento .

Tuttavia, a seconda del tema, questa pagina del carrello può sembrare un po’ semplice e minimalista. È improbabile che si adatti al tuo marchio o al design generale del tuo sito. Inoltre, non è realmente ottimizzato per il tuo pubblico specifico.

Per incoraggiare i visitatori ad acquistare di più, potresti voler aggiungere elementi di upselling e cross-selling come una sezione "Mi piace anche alle persone" o "Potresti essere interessato". Oppure potresti essere interessato a funzionalità specializzate come il pulsante “Salva per dopo”.

In questo modo, gli acquirenti che non sono sicuri di un acquisto possono tornare più facilmente ai loro articoli preferiti. Potresti quindi raggiungere questi potenziali clienti in campagne e-mail mirate.

Inoltre, la pagina del carrello offre una buona opportunità per includere elementi chiave del brand come il logo e i colori aziendali. Questi non saranno inclusi per impostazione predefinita, ma quando personalizzi la pagina del carrello, puoi assicurarti che corrisponda al resto del tuo sito. Ciò può aumentare il riconoscimento del marchio e impressionare i clienti.

Inoltre, una pagina del carrello personalizzata supporta un'esperienza di acquisto senza interruzioni. Consente alle persone di rivedere e modificare facilmente tutti gli articoli nei loro carrelli prima di procedere al pagamento.

Nel complesso, modificare la pagina del carrello WooCommerce può aiutarti a fornire un'esperienza cliente più efficace e incoraggiare i visitatori a convertirsi. Inoltre, è semplice e veloce da fare.

Come modificare e personalizzare la pagina del carrello WooCommerce

Ora che sai perché potresti voler modificare l'aspetto predefinito della pagina del carrello WooCommerce, esploriamo quattro diversi modi in cui puoi portare a termine il lavoro. È meglio familiarizzare con tutte le opzioni disponibili, in modo da poter scegliere l'approccio adatto alle tue esigenze.

1. Modifica la pagina Carrello utilizzando i blocchi

Se usi WordPress anche da poco, probabilmente sai che i blocchi sono al centro del processo di progettazione. Questo sistema basato su blocchi consente agli utenti non tecnici di creare facilmente straordinari siti personalizzati senza il fastidio della codifica.

Quindi potrebbe non sorprendere che uno dei modi più semplici per personalizzare la pagina del carrello sia utilizzare i blocchi WooCommerce. Ci sono un paio di modi diversi per farlo.

Se al momento non stai utilizzando un tema a blocchi (che sblocca la potenza della modifica dell'intero sito), puoi comunque utilizzare i blocchi WooCommerce. Questi sono inclusi per impostazione predefinita con WooCommerce 6.9 o versioni successive, oppure puoi utilizzare l'estensione dei blocchi WooCommerce Cart e Checkout (alcuni potrebbero chiamarlo plug-in dei blocchi WooCommerce).

Se al momento non stai utilizzando un tema a blocchi, puoi comunque utilizzare il plugin per i blocchi di WooCommerce.

Dopo aver installato lo strumento, vai alla pagina del carrello predefinita di WooCommerce e aprila nell'editor dei blocchi.

Dopo aver installato lo strumento, vai alla pagina del carrello predefinita di WooCommerce e aprila nell'editor dei blocchi.

Elimina lo shortcode [woocommerce_cart]. Quindi cerca il blocco Carrello WooCommerce (non il Blocco Mini-Cart).

Elimina lo shortcode [woocommerce_cart]. Quindi cerca il blocco Carrello WooCommerce (non il Blocco Mini-Cart).

Aggiungilo alla pagina e dovresti vedere immediatamente che offre alcuni elementi di design utili, come una sezione Potrebbe interessarti....

Aggiungilo alla pagina e dovresti notare immediatamente che offre alcuni utili elementi di design.

Noterai che al momento stai visualizzando un carrello pieno, ma puoi fare clic sul pulsante a forma di occhio denominato Carrello riempito per passare alla visualizzazione della pagina Carrello vuoto .

È possibile fare clic sul pulsante a forma di occhio denominato Carrello riempito per passare alla visualizzazione della pagina Carrello vuoto.

Come puoi vedere, la pagina del tuo carrello WooCommerce cambia in modo significativo quando mancano articoli. Visualizza un semplice collegamento Sfoglia negozio ed evidenzia alcuni nuovi articoli nel negozio.

A questo punto, puoi personalizzare ulteriormente il layout della tua nuova pagina Carrello utilizzando i blocchi. Tieni presente che, oltre al blocco Carrello, l'estensione WooCommerce Blocks ti offre oltre 30 elementi con cui giocare. Questi includono il blocco Prodotti selezionati manualmente e il blocco Prodotti in vendita.

Se utilizzi un tema a blocchi, puoi personalizzare la pagina del carrello utilizzando l'editor del sito. Passare ad Aspetto → Editor. Seleziona Modelli → Gestisci tutti i modelli → Carrello. Ora puoi apportare modifiche all'aspetto della pagina del carrello utilizzando i blocchi nello stesso modo di cui abbiamo appena discusso.

2. Utilizza altre estensioni WooCommerce

Oltre a WooCommerce Blocks, ci sono molte estensioni aggiuntive che puoi utilizzare per personalizzare ulteriormente la pagina del tuo carrello. Sebbene la maggior parte di essi siano premium, di solito sono convenienti e valgono il prezzo.

Ad esempio, puoi aggiungere facilmente upsell e cross-sell alla pagina del carrello quando acquisti l'estensione Cart Upsell per WooCommerce o Product Recommendations.

Puoi aggiungere facilmente upsell e cross-sell alla pagina del carrello quando acquisti l'estensione Cart Upsell per WooCommerce o Product Recommendations.

Quando consigli articoli utilizzando uno di questi strumenti, puoi aumentare il valore medio dell'ordine (AOV) e aumentare i profitti complessivi.

Inoltre, puoi provare l'estensione Avvisi carrello per visualizzare messaggi personalizzati in base al contenuto dei carrelli dei tuoi clienti.

Puoi provare l'estensione Avvisi carrello per visualizzare messaggi personalizzati in base al contenuto dei carrelli dei tuoi clienti.

Questo può essere molto utile, poiché puoi far sapere ai clienti che devono raggiungere un ordine minimo o spingerli a comprarne di più per ottenere la spedizione gratuita (tra molte altre cose).

Anche l'estensione Salva per dopo per WooCommerce è molto conveniente, in quanto può incoraggiare i clienti a rivisitare prodotti che avevano ripensato in passato o ad acquistarli in seguito come regali di compleanno o di Natale.

Anche l'estensione Salva per dopo per WooCommerce è molto conveniente, poiché può incoraggiare i clienti a rivisitare prodotti che avevano ripensato in passato.

Inoltre, se offri prodotti variabili, Variation Switcher in Cart for WooCommerce è un must. Ti consente di aggiungere un collegamento Modifica variante direttamente alla pagina del carrello.

Inoltre, se offri prodotti variabili, Variation Switcher in Cart for WooCommerce è un must.

Grazie a questa funzionalità, i clienti non dovranno tornare indietro al tuo catalogo per trovare i prodotti che desiderano. Di conseguenza, godranno di un'esperienza utente più snella.

3. Personalizza manualmente la pagina del tuo carrello (utilizzando codice e hook)

Una delle grandi cose di WooCommerce è che ti consente di utilizzare gli hook. Esistono due tipi di hook WooCommerce: azioni e filtri. Gli hook di azione ti consentono di inserire codice personalizzato in vari punti. Gli hook filtro ti consentono di manipolare e restituire una variabile.

Se desideri personalizzare la pagina del tuo carrello utilizzando codice e hook, è molto importante eseguire prima il backup del tuo sito WordPress. Poiché l'implementazione del codice personalizzato può essere un processo delicato, ti consigliamo di assicurarti di avere una copia del tuo sito nel caso in cui commetti un errore.

Detto questo, diamo un'occhiata ad alcuni modi utili in cui puoi utilizzare il codice e gli hook per creare una pagina del carrello WooCommerce più personalizzata. Innanzitutto, potresti voler rimuovere alcune delle funzioni predefinite se non ti servono.

Per rimuovere il campo "Applica coupon", puoi aggiungere il seguente snippet di codice al tuo file Functions.php:

 <?php // hide coupon field on the cart page function disable_coupon_field_on_cart( $enabled ) { if ( is_cart() ) { $enabled = false; } return $enabled; } add_filter( 'woocommerce_coupons_enabled', 'disable_coupon_field_on_cart' ); To add a custom message, like to advertise free shipping, you can add the following snippet above the cart table: <?php // Do NOT include the opening php tag add_action( 'woocommerce_before_cart_table', 'wpdesk_cart_free_shipping_text' ); /** * Add "free shipping" text to WooCommerce cart page * */ function wpdesk_cart_free_shipping_text() { echo '<div class="woocommerce-info">Free Shipping available on purchases above $99!</div>'; }

Per ulteriori informazioni sugli hook WooCommerce, puoi consultare la pagina Azioni e riferimenti agli hook del plug-in.

4. Rimuovere completamente la pagina Carrello

Come abbiamo discusso, ci sono molti modi in cui puoi personalizzare la pagina del tuo carrello WooCommerce. Tuttavia, ci sono alcuni scenari in cui potresti voler saltare del tutto questa pagina, consentendo invece agli acquirenti di andare direttamente al check-out.

Ad esempio, se gestisci una boutique o un'azienda molto piccola che offre articoli minimi e nessuna variazione di prodotto, la pagina Carrello probabilmente non è necessaria. Inoltre, ometterlo potrebbe aiutare a incoraggiare le persone a convertirsi più velocemente, poiché dà loro meno tempo per ripensare ai loro acquisti.

Quindi, se desideri rimuovere del tutto la pagina del carrello, accedi semplicemente alla dashboard di WordPress e vai su Pagine . Quindi puoi passare il mouse sulla pagina Carrello e fare clic su Cestino per eliminarlo.

Se desideri rimuovere del tutto la pagina del carrello, accedi semplicemente alla dashboard di WordPress e vai su Pagine. Quindi puoi passare il mouse sulla pagina Carrello e fare clic su Cestino per eliminarlo.

In alternativa, potresti scegliere Modifica invece di aprire l'editor dei blocchi e premere Passa a Bozza . In questo modo, puoi sempre abilitarlo/pubblicarlo di nuovo in seguito quando ne avrai bisogno.

Oppure, se non hai ancora configurato il tuo negozio online, puoi dire a WooCommerce quali pagine utilizzare quando utilizzi la procedura guidata di avvio.

Suggerimenti e best practice per la personalizzazione del carrello WooCommerce

Ora che sai come personalizzare la pagina del carrello WooCommerce, esaminiamo alcune best practice per la personalizzazione del carrello WooCommerce. Ecco alcuni suggerimenti che potresti prendere in considerazione:

  • Ottimizza la velocità di caricamento del carrello e della pagina di pagamento . Una pagina del carrello lenta può frustrare gli acquirenti e persino indurli ad abbandonare il tuo sito. Ciò si traduce in vendite e ricavi persi. Quindi ti consigliamo di assicurarti che tutte le tue pagine siano velocissime. Per far sì che ciò accada, puoi utilizzare un plug-in di ottimizzazione delle prestazioni di WooCommerce come Jetpack Boost.
  • Non complicare eccessivamente il processo . Se aggiungi troppi fronzoli alla tua pagina del carrello WooCommerce, potresti finire per sopraffare i tuoi visitatori. Scegli caratteristiche e funzionalità extra con parsimonia.
  • Tieni a mente le esigenze specifiche del tuo pubblico . Considera quali aggiunte saranno più efficaci per il tuo sito e i tuoi prodotti. In definitiva, dovresti mirare a soddisfare le esigenze specifiche del tuo pubblico. Ad esempio, se gestisci un negozio di abbigliamento più grande con molti prodotti variabili, è una buona idea abilitare il cambio di varianti. In questo modo, i clienti possono modificare facilmente i prodotti in base a caratteristiche come taglia e colore, senza dover tornare alla pagina del prodotto.
  • Effettua prima il backup del tuo sito . Che tu sia nuovo su WordPress o che lavori con il sistema di gestione dei contenuti (CMS) da un po', dovresti sempre eseguire il backup del tuo sito prima di modificare il modello di pagina del carrello WooCommerce. In questo modo, se commetti un errore che influisce negativamente sulla funzionalità del tuo sito, puoi facilmente ripristinare una versione precedente da un backup. Potrebbe essere necessario installare un plug-in di backup di qualità, come Jetpack VaultPress Backup.

Se tieni a mente tutti i suggerimenti di cui sopra, sarai meglio attrezzato per progettare una pagina del carrello WooCommerce efficace.

Domande frequenti

A questo punto, spero che tu abbia capito come modificare la pagina del carrello WooCommerce per soddisfare le tue esigenze. Ma nel caso in cui tu abbia qualche dubbio, abbiamo compilato un elenco di alcune delle domande più comuni quando si tratta di modificare la pagina del carrello WooCommerce. Diamo un'occhiata!

Cos'è la pagina Carrello WooCommerce?

Quando utilizzi il plug-in gratuito - WooCommerce - per trasformare il tuo sito WordPress in un negozio online, otterrai automaticamente alcuni modelli di pagine di e-commerce. Le pagine WooCommerce predefinite sono: Negozio, Carrello, Checkout e Il mio account.

Ognuna di queste pagine include le funzionalità essenziali di cui avrai bisogno. Ad esempio, la pagina Il mio account include collegamenti utili come Dashboard, Ordini e Abbonamenti.

Allo stesso modo, la pagina del carrello WooCommerce offre gli elementi più basilari. Fornisce ai clienti un riepilogo delle informazioni sul prodotto per gli articoli attualmente presenti nei loro carrelli.

Questi dettagli includono il prezzo, la quantità e il totale parziale. Inoltre, c'è spazio per aggiungere un coupon, i totali del carrello e un pulsante "Procedi alla cassa".

La pagina del carrello di WooCommerce è diversa dalla pagina del pagamento?

SÌ! Sono molto diversi. Il layout del carrello WooCommerce offre ai clienti online un riepilogo dei prodotti (e dei dettagli dei prodotti) per gli articoli attualmente presenti nei loro carrelli. Consente inoltre loro di modificare i prodotti.

Per impostazione predefinita, i clienti possono modificare solo la quantità di prodotti nei loro carrelli. Ma se personalizzi la pagina del carrello WooCommerce, puoi consentire agli acquirenti di apportare modifiche più avanzate.

D'altra parte, la pagina di pagamento predefinita è quella in cui i clienti inseriscono i dettagli di fatturazione e tutte le informazioni di contatto necessarie. Offre inoltre loro un'ulteriore opportunità di aggiungere codici coupon e note aggiuntive sui loro ordini. Anche le pagine di pagamento possono essere personalizzate, quindi assicurati di cercare modi per completare le tue personalizzazioni durante l'intera esperienza di acquisto.

La pagina di pagamento predefinita è quella in cui i clienti inseriscono i dettagli di fatturazione e tutte le informazioni di contatto necessarie.

Fornisce anche un riepilogo dell'ordine, simile a quello mostrato nella pagina del carrello. Ma i clienti non possono modificare gli articoli a questo punto. Nella parte inferiore della pagina di pagamento di WooCommerce, possono premere il pulsante "Effettua il tuo ordine".

Poiché la pagina del carrello di WooCommerce include un pulsante “Procedi alla cassa”, puoi considerare queste due pagine come “fasi” diverse nel processo di acquisto. Prima che i clienti effettuino il check-out, probabilmente vorranno visualizzare la pagina del carrello.

Quanto è importante la pagina Carrello per un negozio e-commerce?

L'importanza di una pagina del carrello dipende dalla natura del tuo negozio di e-commerce e dei suoi prodotti. Poiché consente ai clienti di visualizzare e modificare facilmente gli articoli attualmente presenti nei loro carrelli, può essere molto utile se si prevede che i clienti gestiscano un gran numero di prodotti variabili.

Se gestisci un grande negozio di e-commerce o anche un'azienda di abbigliamento di medie dimensioni, questo potrebbe essere fondamentale per supportare un'esperienza cliente positiva. Questo perché quando i clienti acquistano più prodotti di varie dimensioni, può essere difficile tenerne traccia tutti.

Una pagina Carrello consente ai clienti di dare un'occhiata al proprio ordine prima di procedere al pagamento. In questo modo, possono verificare che tutte le dimensioni, le variazioni e le quantità dei prodotti siano corrette e, se necessario, modificarle.

Altrimenti, potrebbero procedere al pagamento e sentirsi frustrati di dover tornare indietro per correggere un errore dopo aver inserito tutti i dettagli di fatturazione e di contatto.

Qual è il modo migliore per personalizzare una pagina del carrello WooCommerce?

Non esiste un modo giusto per personalizzare una pagina del carrello WooCommerce perché dipende dalla tua esperienza come utente WordPress. Ad esempio, se sei un principiante e ti piace utilizzare l'editor di blocchi di WordPress, potresti preferire modificare la pagina del carrello utilizzando i blocchi.

In alternativa, se sei un utente intermedio o esperto, potresti voler utilizzare codici e hook per massimizzare il tuo potenziale di personalizzazione. In definitiva, questa è una preferenza e una scelta personale. Ti consigliamo solo di procedere con cautela se scegli uno dei metodi più avanzati.

Devo eseguire il backup del mio sito prima di modificare la pagina del carrello WooCommerce?

SÌ! Indipendentemente dal tuo livello di abilità o approccio, è una buona idea eseguire il backup del tuo sito Web WordPress prima di modificare la pagina del carrello WooCommerce (o apportare qualsiasi altra modifica notevole al tuo sito).

In questo modo, se commetti accidentalmente un errore minore o grave (o semplicemente cambi idea sulle modifiche), puoi facilmente ripristinare una copia recente del tuo sito ed evitare inutili tempi di inattività.

Cos’altro posso fare per migliorare l’esperienza di acquisto in WooCommerce?

Oltre a personalizzare la pagina del carrello WooCommerce, ci sono alcune cose che puoi fare per migliorare l'esperienza di acquisto dei tuoi clienti.

Se lo desideri, puoi personalizzare le pagine dei tuoi prodotti WooCommerce per semplificare il tuo catalogo. Ad esempio, puoi aggiungere varianti di prodotto. In questo modo, i clienti non devono scorrere molti prodotti simili. Possono semplicemente utilizzare un commutatore di varianti per selezionare il sottoinsieme preferito all'interno di un prodotto primario.

Inoltre, potresti voler modificare la pagina del tuo negozio WooCommerce per fornire un'esperienza più personalizzata. Per cominciare, potresti aggiungere il marchio della tua azienda per creare coesione nel tuo sito.

Per i negozi più grandi, puoi aggiungere filtri di prodotto e sezioni per funzionalità come i prodotti più votati o gli articoli in saldo. La buona notizia è che puoi farlo facilmente utilizzando i blocchi WooCommerce.

Infine, ci sono poche cose più frustranti del caricamento lento delle pagine dei prodotti. Con questo in mente, potresti voler adottare misure aggiuntive per garantire che il tuo negozio WooCommerce offra sempre velocità di caricamento elevate per i clienti.

L'utilizzo di uno strumento come Jetpack Boost è la soluzione più rapida e conveniente per l'ottimizzazione delle prestazioni di WordPress.

L'utilizzo di uno strumento come Jetpack Boost è la soluzione più rapida e conveniente per l'ottimizzazione delle prestazioni di WordPress.

Questo plugin può velocizzare istantaneamente le pagine del tuo sito ottimizzando automaticamente il caricamento CSS, rinviando JavaScript non essenziale, implementando il caricamento lento e molto altro.

Inoltre, può aiutarti a potenziare i Core Web Vitals del tuo sito, il che significa che può anche migliorare il tuo posizionamento nei risultati di ricerca.

Personalizza la pagina del tuo carrello WooCommerce per migliorare il tuo negozio online

WooCommerce ti fornisce alcuni modelli utili per Negozio, Checkout, Carrello e altre pagine importanti. Questo può aiutarti ad accelerare il processo di progettazione e consentirti di lanciare rapidamente il tuo negozio di e-commerce. Tuttavia, potresti voler sapere come modificare una pagina del carrello WooCommerce per aggiungere funzionalità e modificarne l'aspetto.

In tal caso, probabilmente ti sei trovato su Google alla ricerca di "modifica pagina carrello WooCommerce". Per fortuna, questo post è l’unico risultato di cui hai bisogno per iniziare con i principi di base.

Abbiamo discusso alcuni modi diversi in cui puoi lavorare per personalizzare le pagine del carrello di WooCommerce. Per un approccio semplice, puoi provare i blocchi WooCommerce. Puoi anche utilizzare le estensioni WooCommerce per aggiungere funzionalità come consigli sui prodotti, upsell/cross-sell, variazioni, ecc.

Se sei un utente WordPress più avanzato, puoi personalizzare la pagina del carrello WooCommerce utilizzando il codice. Oppure, se il tuo sito non necessita di una pagina Carrello, lasciala semplicemente fuori e consenti ai clienti di passare direttamente al pagamento!