Come creare un mini carrello WooCommerce: 3 metodi

Stai cercando un modo semplice per impostare un mini carrello WooCommerce ? Se la tua esperienza di pagamento è lenta e ripetitiva, può influire sull'esperienza di acquisto del tuo cliente. Migliorare il flusso del processo di pagamento è parte integrante del miglioramento delle conversioni di lead e un mini carrello può essere un'ottima soluzione per questo.

Quindi, per aiutarti ad aggiungerne uno al tuo sito web, ecco una guida su come creare un mini carrello WooCommerce. Ma prima, diamo un'occhiata a cos'è esattamente un mini carrello e perché potresti aver bisogno di usarne uno.

Che cos'è un mini carrello WooCommerce?

Il tuo carrello WooCommerce Mini è solo una piccola forma della tua attuale pagina del carrello WordPress. Contiene i prodotti aggiunti al carrello insieme ad alcuni dettagli in più. I contenuti del mini carrello dipendono dal tuo tema WordPress attivo ma generalmente includono:

• La tua lista di prodotti
• totale parziale
• Miniature dei prodotti
• Quantità di prodotto

Indipendentemente dai dettagli mostrati dal tuo mini carrello WooCommerce, è una parte cruciale dell'esperienza utente del tuo cliente durante la navigazione nel tuo negozio WooCommerce. È uno strumento accessibile che i tuoi clienti possono utilizzare per passare alla pagina di pagamento direttamente da qualsiasi parte del tuo sito Web e aiuta a tenere traccia degli articoli del carrello.

Anche noi utilizziamo il mini carrello di QuadLayers. Se aggiungi un prodotto al carrello, puoi visualizzare il mini carrello passando il mouse sull'icona del carrello nel menu di intestazione.

Se guardi lo screenshot qui sotto, abbiamo aggiunto il prodotto WooCommerce Checkout Manager al carrello. Questo viene visualizzato anche nel mini carrello insieme alla quantità e al totale parziale.

Perché creare un Mini Carrello per il tuo sito WooCommerce?

Per impostazione predefinita, il tuo tema WooCommerce potrebbe avere il suo mini carrello WooCommerce. E anche se lo fa, la sua posizione e lo stesso stile potrebbero non essere completamente personalizzabili dalle impostazioni del tema. Inoltre, potrebbe anche non essere nel posto perfetto per il tuo mini carrello.

Alcuni dei nostri lettori potrebbero prendere in considerazione l'aggiunta di un mini carrello mobile, mentre altri potrebbero aggiungerlo alla barra laterale o al piè di pagina. Esistono vari approcci possibili per il mini carrello che potresti prendere in considerazione di utilizzare. Inoltre, potresti anche dover aggiungere più contenuti ai tuoi mini carrelli come prezzi di spedizione, dettagli aggiuntivi del carrello, messaggi personalizzati e altro ancora.

La facilità di utilizzo del carrello può anche essere importante per te e per i tuoi clienti per migliorare le vendite effettive . Un checkout personalizzato e pronto per le vendite che si adatta perfettamente all'estetica del tuo sito Web può essere un punto di svolta per il tuo sito Web WooCommerce. Quindi, se vuoi creare e aggiungere il tuo mini carrello personalizzato a diverse pagine del tuo sito web, non cercare oltre!

Come creare un mini carrello WooCommerce in WordPress

Per creare e aggiungere il tuo carrello WooCommerce Mini , puoi utilizzare 3 metodi diversi :

1. Aggiunta di un widget carrello
2. Utilizzo di un plugin per WordPress
3. Programmaticamente

Diamo un'occhiata a ciascun metodo e ai passaggi coinvolti in tutti loro, a partire dal metodo predefinito di utilizzo dei widget di WordPress.

1. Crea un mini carrello WooCommerce utilizzando i widget di WordPress

Per impostazione predefinita, puoi creare mini carrelli WooCommerce utilizzando il widget del carrello WooCommerce. Poiché stiamo usando un widget, può essere posizionato solo nelle aree widget disponibili del tema. Le aree più comuni includono:

• Barra laterale dei widget
• Sotto l'intestazione
• Piè di pagina

Possono esserci più aree widget a seconda del tema. Ma assicurati di utilizzare anche uno dei temi compatibili con WooCommerce.

1.1. Seleziona l'Area widget

Per aggiungere un widget carrello, dovrai prima selezionare un'area widget. Quindi apri la dashboard di amministrazione di WP e vai su Aspetto> Widget . Quindi, scegli l'area dei widget per il tuo mini carrello.

Per la nostra demo, utilizzeremo la barra laterale . Ma puoi usare l'area widget che ti è più comoda.

1.2. Aggiungi Carrello Widget all'Area Widget

Dopo aver selezionato l'area del widget per il tuo mini carrello, fai clic sul pulsante + per aggiungere il widget. Usa la barra di ricerca per cercare Carrello e cliccaci sopra per aggiungere il widget .

Se non riesci a vedere il widget, assicurati di aver impostato correttamente WooCommerce sul tuo sito web.

Qui puoi anche abilitare o disabilitare l'opzione Nascondi se il carrello è vuoto . Ti consigliamo di abilitarlo perché il tuo carrello della barra laterale sarà nascosto se il carrello del tuo cliente è vuoto. Questo renderà anche il tuo sito web più funzionale.

Una volta terminata l'aggiunta del widget del carrello, Aggiorna i widget per salvare le modifiche. Ora, il tuo mini carrello della barra laterale dovrebbe apparire sul tuo front-end.

Naturalmente, puoi anche aggiungere il tuo mini carrello a un'area widget diversa. Seleziona semplicemente la posizione sotto la pagina dei widget e puoi facilmente aggiungere il widget sotto l'intestazione o nel piè di pagina.

Sebbene questo sia il modo più semplice per creare il tuo mini carrello WooCommerce, viene fornito con un discreto numero di limitazioni . Per uno, non ci sono personalizzazioni per il tuo mini carrello. Sei molto limitato in termini di aspetto del tuo mini carrello e di come vi accedono i tuoi clienti.

Le posizioni del mini carrello sono limitate alle aree dei widget fornite dal tuo tema. Inoltre, funzioni come mini carrelli pop-up o campi personalizzati per il carrello non sono disponibili per i clienti o il proprietario del sito web. Quindi, se desideri un mini carrello più personalizzabile, ti consigliamo di continuare a leggere e considerare invece i seguenti metodi.

2. Crea un mini carrello WooCommerce utilizzando un plugin per WordPress

L'utilizzo di un plug-in WordPress è uno dei modi più semplici per curare l'esperienza del carrello. Puoi assicurarti che i tuoi clienti possano effettuare il check-out facilmente in qualsiasi momento con l'aiuto dei plug-in. Ti consentono inoltre di semplificare l'esperienza di pagamento del tuo sito web.

I plug-in del mini carrello offrono funzionalità ingegnose per promuovere le vendite dei tuoi prodotti e migliorare la generazione di lead. Per esempio:

• Puoi abilitare le icone e i popup del carrello in bilico per il mini carrello. In questo modo i tuoi clienti possono accedervi in ​​qualsiasi momento mantenendo il resto del contenuto del negozio pulito e privo di distrazioni.
• Molti elementi del carrello e del prodotto possono essere aggiunti al mini carrello stesso. Ad esempio, informazioni aggiuntive sul prodotto, modifica della quantità, modifica del totale parziale e della visualizzazione totale del carrello e molto altro.
• Con i plug-in, puoi aggiungere alcune funzionalità intelligenti come l'aggiunta di coupon direttamente dal mini carrello, prodotti in evidenza dedicati e suggerimenti di prodotti consigliati.

Quindi, ti consigliamo vivamente di utilizzare un plug-in WordPress dedicato all'aggiunta e alla personalizzazione del tuo mini carrello WooCommerce.

Per la nostra demo, utilizzeremo il plug- in Woocommerce Cart All in One . È uno dei migliori plugin per creare un mini carrello sul tuo sito web. Il plug-in è anche molto facile da usare e ha tutte le funzionalità di cui hai bisogno come un popup di mini carrello, un carrello della barra laterale o opzioni di personalizzazione del carrello dei menu.

Abbiamo anche un elenco dei migliori plugin per mini carrello WooCommerce. Se vuoi usare qualsiasi altro plugin, puoi dare un'occhiata anche tu.

2.1. Installa e attiva il plugin

Iniziamo installando e attivando il plugin.

Apri la dashboard di amministrazione di WP e quindi vai su Plugin> Aggiungi nuovo nella barra laterale.

Quindi, utilizza la barra di ricerca in alto a destra per cercare Cart All In One For WooCommerce .

Dopo aver trovato il plug-in, fare clic su Installa ora per installare il plug-in. Infine, attiva il plugin una volta installato.

Se desideri utilizzare un plug-in premium, dovrai caricarlo e installarlo manualmente. Dai un'occhiata alla nostra guida dettagliata per installare manualmente un plugin per WordPress per ulteriori informazioni.

Ora, dobbiamo configurare il plugin per abilitare il tuo mini carrello WooCommerce.

2.2. Configura il carrello All in One per il plugin WooCommerce

Per configurare il mini carrello WooCommerce del plug-in, fai clic sulla scheda Carrello All in One nella dashboard di amministrazione di WP . Si aprirà la pagina Dashboard del plugin.

Nella versione gratuita del plugin, puoi abilitare un Mini carrello Sidebar o un Mini carrello Menu . Puoi anche aggiungere e configurare un pulsante Aggiungi al carrello AJAX, ma per ora concentriamoci solo sulle opzioni del mini carrello.

Per attivare il popup del mini carrello sul tuo sito web, apri il carrello della barra laterale e fai clic su Abilita . Puoi anche utilizzare l'opzione Mobile Enable per abilitare/disabilitare il popup del mini carrello sui dispositivi mobili. Infine, salva le modifiche.

Ora vai e ricarica il front-end del tuo sito web. Dovresti vedere la tua nuova icona del mini carrello sulla tua pagina web. Puoi semplicemente fare clic su di esso per aprire il tuo mini carrello.

Inoltre, puoi anche aggiungere un carrello dei menu a uno qualsiasi dei tuoi menu. Basta aprire la scheda Menu Carrello e abilitarla proprio come i passaggi precedenti. Puoi anche abilitarlo sui menu mobili, se necessario.

Successivamente, devi aggiungere i menu di WordPress in cui desideri visualizzare il carrello dei menu sul tuo sito web. Scegli semplicemente i menu in cui desideri aggiungere al tuo mini carrello WooCommerce nel campo Menu . Quindi fare clic su Salva .

Ora dovresti vedere il tuo mini carrello del menu sul tuo sito web. Verrà aggiunto ai menu che hai selezionato per il mini carrello.

2.3. Personalizza il tuo WooCommerce Mini Cart usando il plugin

La personalizzazione è una caratteristica fondamentale del plug-in Cart All in One . Puoi personalizzare liberamente il tuo carrello della barra laterale e il carrello dei menu. Ciò include colori, stili di mini carrello, posizioni, animazioni personalizzate, icone di mini carrello, stili di menu della barra laterale e molto altro.

Per accedere alle opzioni di personalizzazione, vai su Aspetto > Personalizza nella dashboard di amministrazione di WP. Verrai reindirizzato al tuo personalizzatore del tema. Qui, fai clic su Carrello All in One per WooCommerce e dovresti vedere tutte le opzioni di personalizzazione del mini carrello.

Per questa demo, personalizzeremo il carrello della barra laterale. Quindi fai clic su Carrello Sidecart e dovresti vedere tutte le opzioni per esso. Per ora, abiliteremo un mini carrello più piccolo utilizzando l'opzione Visualizza contenuto della barra laterale e cambieremo la posizione del carrello della barra laterale.

Ma puoi personalizzare ulteriormente il tuo mini carrello utilizzando queste opzioni a seconda di come si adatta al tuo sito web. C'è ancora molto da modificare come l'interazione con l'icona del carrello stessa, quindi il mini carrello viene visualizzato quando si passa il mouse sull'icona, si personalizza l'icona di caricamento e molto altro.

Una volta terminate le modifiche, fai clic su Pubblica e salvale. Potrai vedere tutte queste personalizzazioni del tuo mini carrello sul tuo sito web.

E questo è l'essenza di base della personalizzazione del tuo mini carrello utilizzando il plug-in. Se vuoi saperne di più su tutte le opzioni di personalizzazione fornite dal plugin, ti consigliamo vivamente di consultare la loro documentazione .

3) Crea un mini carrello WooCommerce in modo programmatico

Diciamo che preferisci non utilizzare un plug-in per aggiungere il tuo carrello WooComerce Mini per mantenere una struttura leggera del tuo sito web. Quindi, puoi anche scegliere di crearne uno a livello di codice.

Ciò richiederà di creare uno shortcode personalizzato utilizzando una funzione personalizzata e incollarlo nel file functions.php del tuo tema. Quindi, puoi utilizzare lo shortcode su qualsiasi parte del tuo sito Web o persino aggiungerlo a qualsiasi file modello WordPress o WooCommerce per aggiungere direttamente il mini carrello WooCommerce.

Poiché cambieremo alcuni dei file principali, è meglio eseguire il backup del tuo sito Web e creare anche un tema figlio a livello di codice o utilizzando uno dei plug-in del tema figlio. Ciò ti assicura di non perdere i tuoi codici personalizzati quando aggiorni il tema WordPress.

3.1. Aggiungi lo Shortcode personalizzato alle tue funzioni del tema

Aggiungeremo i codici personalizzati nei file del tema del tuo sito Web dall'editor del file del tema. Se non sei completamente a tuo agio nell'aggiungere codici a WooCommmerce, ti consigliamo di leggere prima questo articolo.

Una volta che sei pronto, apri l'editor di temi da Aspetto > Editor di file di temi nella dashboard di amministrazione di WP . Usa la barra laterale dei file del tema a destra e fai clic su functions.php . Questo aprirà il file functions.php sul tuo editor di temi.

Ora, incolla il seguente codice nel tuo editor di temi:

 funzione custom_mini_cart() {
echo '<a href="#" class="dropdown-back" data-toggle="dropdown"> ';
echo '<i class="fa fa-carrello della spesa" aria-hidden="true"></i>';
echo '<div class="basket-item-count">';
echo '<span class="cart-items-count count">';
echo WC()->carrello->get_cart_contents_count();
eco '</span>';
eco '</div>';
eco '</a>';
echo '<ul class="menu a discesa menu a discesa-mini-carrello">';
echo '<li> <div class="widget_shopping_cart_content">';
woocommerce_mini_cart();
eco '</div></li></ul>';

}
add_shortcode('quadlayers-mini-cart', 'custom_mini_cart'); 

Dopo aver aggiunto il codice, fare clic su Aggiorna file . Questo creerà uno shortcode personalizzato intitolato "[quadlayers-mini-cart]" per il tuo sito web. Ora puoi utilizzare questo shortcode su qualsiasi post, pagina o widget per aggiungere il tuo mini carrello WooCommerce personalizzato.

3.2. Usa lo shortcode in un modello WooCommerce

Puoi anche utilizzare il seguente snippet di codice per aggiungere il tuo mini carrello personalizzato a qualsiasi file modello di tema o modello WooCommerce.

 <?php echo do_shortcode('[quadlayers-mini-cart]'); ?>

Ad esempio, aggiungiamo questo codice al tuo file modello di archivio prodotti WooCommerce. Per aprire il tuo file modello WooCommerce, vai su Plugin > Editor file plugin dalla dashboard di WordPress.

Quindi, usa l'opzione Seleziona plug-in da modificare in alto a destra e scegli WooCommerce e fai clic su Seleziona. Utilizzando il menu File Plugin, fare clic su modelli > archive-product.php.

Quindi, aggiungi la seguente riga di codice a qualsiasi parte appropriata del modello.

 echo do_shortcode('[quadlayers-mini-cart]');

Per la nostra demo, aggiungeremo la riga di codice sotto do_action( 'woocommerce_before_main_content' ) ; linea. Ma puoi aggiungere lo snippet su qualsiasi file modello e ovunque necessario.

Infine, aggiorna il file dopo aver aggiunto i codici nell'editor del plugin. Il mini-carrello verrà visualizzato sulle pagine WooCommerce designate. Nel nostro caso, è la pagina Negozio/Archivio Prodotto.

Questo approccio aggiungerà il tuo mini carrello al modello. Tuttavia, il mini carrello potrebbe non apparire esattamente come desideri e potrebbe richiedere uno stile aggiuntivo utilizzando il foglio di stile del file del tuo tema. Quindi, questo metodo è consigliato solo se sei abituato alla programmazione e hai una discreta conoscenza per aggiungere PHP e CSS a WordPress.

Bonus: come saltare la pagina del carrello in WooCommerce

Se desideri che i tuoi clienti abbiano una procedura di pagamento più rapida, puoi anche scegliere di saltare completamente la pagina del carrello . Poiché il mini carrello è già fornito ai tuoi clienti, non c'è molto bisogno della pagina del carrello. Quindi, puoi reindirizzare i tuoi clienti direttamente alla pagina di pagamento quando desiderano effettuare un acquisto.

Puoi farlo utilizzando un plug-in dedicato o utilizzando una funzione personalizzata. Per ora, tratteremo come saltare la pagina del carrello in modo programmatico.

Ma prima di procedere, devi andare su WooCommerce> Impostazioni dalla dashboard WP e aprire la scheda Prodotti . Sotto le Opzioni generali , disabilita entrambe le opzioni di comportamento Aggiungi al carrello . Ciò garantisce che non ci siano interferenze con la nostra funzione personalizzata.

Ora, apri nuovamente il file functions.php del tuo tema figlio usando lo stesso passaggio di cui sopra. Basta andare all'editor del tema da Aspetto > Editor del file del tema e fare clic sul file functions.php .

Quindi, incolla qui il seguente frammento di codice.

 add_filter('add_to_cart_redirect', 'ql_skip_cart_page');
funzione ql_skip_cart_page () {
$ woocommerce globale;
$redirect_checkout = $woocommerce->carrello->get_checkout_url();
restituisce $redirect_checkout;
} 

Ora, ogni volta che i tuoi clienti aggiungono un prodotto al carrello, verranno indirizzati direttamente alla pagina di pagamento anziché alla pagina del carrello.

Per semplificare questo processo, puoi anche utilizzare un plug-in come Direct Checkout per WooCommerce. Se vuoi saperne di più e perché dovresti considerare di usarlo, puoi consultare la nostra guida dedicata qui.

Conclusione

E questo conclude la nostra guida su come creare un mini carrello WooCommerce. L'impostazione e la personalizzazione di WooCommerce Mini Cart non è un processo noioso e puoi scegliere di utilizzare metodi diversi per farlo. Riassumiamo i metodi che abbiamo utilizzato nella guida di oggi per aggiungere e personalizzare il nostro Mini Carrello WooCommerce:

• Utilizzo dei widget del carrello
• Con un plugin WordPress dedicato
• A livello di codice utilizzando uno shortcode personalizzato e file modello

Se non sei sicuro di quale processo utilizzare, ti consigliamo vivamente di utilizzare un plug -in per creare il tuo mini carrello WooCommerce. Non solo questo metodo è più sicuro e semplice, ma ottieni anche tonnellate di opzioni di personalizzazione e personalizzazione dedicate per il tuo mini carrello. Se sei un principiante di WordPress e desideri aggiungere un mini-carrello WooCommerce con limitazioni minime, ti consigliamo vivamente di utilizzare un plug-in dedicato.

Inoltre, se stai cercando ulteriori mezzi per abbreviare la tua procedura di pagamento e migliorare le tue vendite, perché non esamini alcuni dei nostri altri articoli:

• I migliori plugin per personalizzare la pagina del carrello di WooCommerce
• Come creare un checkout di una pagina WooCommerce
• Come creare un link di pagamento diretto WooCommerce

Quindi puoi aggiungere un mini carrello al tuo sito web ora? O l'hai già aggiunto? Saremo lieti di saperlo nei commenti.