Come inserire il carrello di WooCommerce nel menu o dove preferite

Oggi vediamo come inserire il carrello di WooCommerce nel menu o in qualsiasi parte del tema che più vi sia a genio. Per rendere tutto molto compatibile e longevo, vedremo di inserire un semplice bottone, che al mouse hover ci mostrerà il nostro carrello.

Questo è il codice per inserire il bottone con il carrello, ed ovviamente potete anche inserire un testo per il carrello vuoto, per il carrello con 1 solo articolo ed un testo per il carrello con più articoli. Dentro alla tendina non ho fatto altro che inserire la classe del widget di serie in WooCommerce che trovate qui.

E questo è invece il CSS minimo necessario.

Ovviamente se osservate il codice, potrete notare la prima condizione, ovvero quella che WooCommerce effettivamente sia installato nel tema, questo per prevenire situazioni spiacevoli.

Osservazione

Grazie a Franco che nei commenti mi ha fatto notare un appunto!

Di default WooCommerce blocca la visualizzazione del widget nella pagina carrello e nella pagina del checkout.

Nel carrello viene bloccato per il semplice motivo che se dal widget togliete un articolo poi l’utente deve aggiornare il browser se vuole vedersi aggiornato il carrello.

Nella pagina del checkout se togliete un articolo dal widget , lo togliete anche dall’ordine che state processando quindi genera un errore.

Infatti è stato segnalato a WooCommerce il problema/non problema e si spera possano risolvere a breve andando ad eseguire lo javascript in tempo reale che vada a modificare le condizioni di acquisto del cliente!

Vi posto comunque qui la soluzione per mostrare comunque gli articoli nel WC_Widget_Cart di WooCommerce!

18 commenti su Come inserire il carrello di WooCommerce nel menu o dove preferite

  1. Buonasera,
    se volessi inserire in un blocco di testo il carrello a icona con il numero di prodotti, cosa è possibile fare?

    1. Ciao Max, non devi fare altro che prendere quel codice ed inserirlo dove vuoi. Dopodiché dovrai stilizzarlo in modo ottimale con il tuo CSS.

  2. Salve, per errore ho eliminato le pagine “carrello” e “cassa”, facendo la prova di acquisto sul mio e-commerce mi appare i prodotti sull’anteprima del carrello situata nella parte dx dello schermo ma ovviamente quando premo il tasto “apri carrello” la schermata carrello non appare perchè non c’è e di conseguenza neanche la schermata cassa per pagare successivamente, vorrei chiedervi come posso fare per reinserire le due pagina, ovvero, come fare, una volta aggiunte le due pagine, a ricollegarle ai miei acquisti,
    grazie Saluti

    1. Ciao Gianni, ti basta ricrearle ed andare in WooCommerce nelle impostazioni per rimettere le pagine al loro posto. Le pagine Cassa e Carrello dentro devono avere i rispettivi shortcode di WooCommerce!

  3. Io invece ho un altro problema… le pagine ci sono tutte, ma quando uno acquista un prodotto esce fuori la scritta “visualizza prodotto nel carrello” ma se clicchi sul bottone torna alla home… come risolvo?

    1. Ciao Ofelia, sicuramente hai un problema nel codice, e bisogna capire se è il tema o un plugin.

  4. Salve, io vorrei inserire il codice per collegare un contenuto articolo con il carrello di woocommerce. Non ho capito però come inserire praticamente il codice che hai proposto. Puoi farmi un esempio pratico. Grazie

  5. Ciao, anzitutto complimenti per il codice, l’ho inserito e modificato con i css e funziona bene. Ho un solo problema: quando vengono tolti gli articoli dal carrello utilizzando questo menù il contatore continua ad indicare che ci sono gli articoli nel carrello fino a quando non si cambia o refresha la pagina. C’è un modo per farlo cambiare in tempo reale?

    1. Ciao Federico! Si la tua richiesta è lecita! Ma il codice che ho postato utilizza un widget, invece per fare quello che dici tu occorre un codice diverso! 

      Comunque mi hai dato uno spunto per un prossimo articolo che posso fare ad-hoc! 

  6. ciao anche io ho un problema con woocommerce ho inserito il carrello però quando vado ad aggiungere al carrello e clicco su visualizza il carrello mi riporta alla schermata della home, nelle impostazioni di woocommerce “woocommerce> Impostazioni > Prodotti” quando metto la spunta alla frase “Reindirizza alla pagina del carrello” e faccio “salva impostazioni” me la toglie perchè? Perchè mi riporta alla home se clicco su cassa o carrello?

    1. Controlla che non sia qualche plugin che interferisca con questa opzione di WooCommerce!

    1. Ciao Franco e grazie per il tuo appunto! Ho aggiornato anche l’articolo con la soluzione che puoi trovare in fondo o qui

  7. Buongiorno vorrei modificare il carrello, in modo tale che se la quantita’ di merce sia inferiore a un tot 27 kg aggiunga spesa di spedizione se superiore a multipli di 27 non mi effettui l ordine. Questo perche ‘ho necessita ‘di spedire casse di 27 kg. Come si puo’ fare?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.