Guida definitiva su come aggiungere l’immagine del prodotto nel checkout di Woocommerce

Oggi voglio condividere una guida molto completa ma altrettanto semplice, su come aggiungere l’immagine del prodotto nel checkout di Woocommerce. Questa é una delle domande che Cristina m’ha fatto nella mia pagina facebook e sinceramente non c’avevo mai pensato fino ad oggi. In pratica il problema, se vogliamo chiamarlo cosi, é che attualmente Woocommerce nel checkout mostra solamente i il resoconto dei prodotti che stai per pagare senza l’immagine “thumb image” del prodotto e in alcuni casi risulta difficile in effetti capire cosa si sta acquistando. Avendo fatto alcune ricerche nel web, provato alcuni snippet ho trovato uno che funziona perfettamente lasciando il sito leggerissimo senza dover utilizzare plugins aggiuntivi. Inoltre questo snippet “codice” l’ho testando anche con CartFlow Pro un plugin per la creazione di funnels su WordPress e non da nessun problema. Alla fine dell’articolo ho inserito il codice completo, ma prima vediamo meglio cosa bisogna fare per inserirlo scoprendo bene gli steps.

Cos’é Woocommerce plugin

Una breve parentesi voglio aprirla su Woocommerce, dato che in questa guida andremo a lavorare su questo plugin, dobbiamo capire almeno cos’é. Woocommerce é il migliore plugin per WordPress che ti permette di aggiungere le funzioni di un e-commerce completo nel tuo sito internet. Potrai gestire ordini, utenti avere rapporti completi, spedizioni, pagamenti e molto altro. Insomma una soluzione completa per iniziare a lavorare con il tuo sito e vendere online. Woocommerce inoltre é la soluzione Ecom piú utilizzata al mondo attualmente, sinceramente lo utilizzo so quasi tutti i progetti che richiedano funzioni di pagamento nelle pagine, in alternativa utilizzo Prestashop come soluzione e-commerce open source. Il motivo é semplice libertá di modifiche al codice, cosa che spesso non é possibile con soluzioni in cloud.

Personalizzare il checkout di Woocommerce

Uno dei problemi di Woocommerce é il checkout, spesso e volentieri a seconda del tema che utilizzi rimane molto semplice e non da una bellissima esperienza all’utente, ma puoi sempre personalizzare il checkout utilizzando CSS e qualche trucchetto come quello che ti mostreró oggi su questa guida.

Esistono anche numerosi plugins che ti aiutano a migliorare il checkout, magari levando campi che non servono, aggiungendo timer. bump offers oppure creando checkout a due step, ma non sempre serve utilizzare un plugin e vedremo come con 7 righe di codice aggiunte al nostro file function.php miglioreremo moltissimo l’esperienza del nostro visitatore.

Cos’é il file function.php del tema WordPress?

Ogni tema di WordPress ha il file function.php, ovvero un file che racchiude le “funzioni” del tema specifico, possono esserci aggiunte di azioni particolare, scripts, css ed altro. Solitamente quando si vogliono fare modifiche al tema si cerca sempre di lavorare solamente sul file function.php ma non quello principale ma del nostro “child-theme”.

Cos’é un child theme?

Il Child Theme in italiano (tema figlio), é semplicemente una copia del tema principale che lavora a livello superiore, quindi qualsiasi cartella del tema principale se viene duplicata e inserita nel child-theme verrá presa in considerazione con prioritá massima. Questo é ottimo perché ci aiuta a fare modifiche a stili e funzioni, senza toccare il codice base del tema e quando ci sono aggiornamenti non perderemo nessuna delle nostre modifiche.

Il child theme essendo una sorta di clone del tema ha un file function.php ed é li che andremo a lavorare durante questa guida, questa operazione ci permette di stare al sicuro anche se il tema principale viene aggiornato in futuro e non perderemo nulla!

Come modificare il file function.php del child-theme

Possiamo accedere a questo file in diversi modi il piú semplice é andare nel nostro back-end di WordPress e fare click su aspetto -> editor. Ma é sempre consigliato modificare i file .php via FTP quindi con un ftp client service, come FileZilla o simili, se invece hai un hosting discreto dovresti riuscire andare nel tuo Cpanel -> Gestione File -> e modificare tranquillamente dal tuo browser. Ricordati che é sempre consigliato fare un back-up prima di mettere mano a qualsiasi codice nel tuo sito LIVE.

Ora andiamo a vedere il codice!

Codice snippet per aggiungere l’immagine del prodotto nel checkout di Woocommerce

Sono felice che stai leggendo fino a qui, significa che vuoi migliorare il tuo e-commerce allora ecco il codice che dovrai inserire:

/**
* @snippet Woocommerce mostrare immagine prodotto @ Checkout Page
* Tutorial originale: https://www.techiesandesh.com/woocommerce-show-product-image-checkout-page/
* Tradotto: Davide Volpato
*/

add_filter( 'woocommerce_cart_item_name', 'ts_product_image_on_checkout', 10, 3 );

function ts_product_image_on_checkout( $name, $cart_item, $cart_item_key ) {

/* Ritorna se non é una pagina checkout */
if ( ! is_checkout() ) {
return $name;
}

/* Ottieni oggetto prodotto */
$_product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );

/* Ottieni la foto del prodotto thumnail */
$thumbnail = $_product->get_image();

/* Aggiungi div e qualche css */
$image = '
'
. $thumbnail .
'
';

/* Immagine e ritorna */
return $image . $name;
}

Se ti piace questa guida, commenta e condividi ovviamente, poi fammi sapere.