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!