Inserire form di contatto nella scheda prodotto di WooCommerce

Quando si sviluppa un sito web con WordPress e WooCommerce, tanto che si sfrutti il plugin per creare un catalogo online piuttosto che un e-store per la vendita di prodotti, accade spesso che la scheda prodotto o le foto inserite non bastino per destare l’interesse del pubblico e l’unico modo per fornire informazioni complete all’utente è essere contattati.

Alcuni template non consentono di inserire direttamente un modulo di contatto nella scheda prodotto, ma incorporare una sidebar nella pagina può, a volte, rovinare l’estetica del sito.

Come è possibile ovviare, quindi, a tale problematica ed inserire un form di contatto nella scheda di un prodotto WooCommerce?

Come inserire un form di contatto nella scheda di un prodotto WooCommerce

Grazie all’utilizzo del plugin Contact Form 7, della sua estensione Contact Form 7 Dynamic Text Extension e all’implementazione di un codice nel file functions.php del tema (ricordati di fare un backup e usa sempre un tema child!) è possibile aggiungere automaticamente il modulo di contatto ad ogni scheda prodotto presente sul negozio online.

Di seguito, gli step necessari per l’inserimento del modulo contatti nella scheda prodotto.

1. Installa i plugin necessari

Comincia installando il plugin Contact Form 7 (o CF7) e l’estensione complementare Contact Form 7 Dynamic Text Extension nel tuo sito WordPress.

Vai, quindi, in plugin / Aggiungi nuovo e ricerca o carica i plugin.

Dopo aver installato e attivato i plugin vai nella pagina Contatto / Moduli di Contatto e crea o modifica uno dei moduli di contatto esistenti.

Sfrutta le funzionalità dinamiche introdotte da Contact Form 7 Dynamic Text Extension per inviare il titolo della pagina prodotto tramite e-mail.

Grazie agli Special mail-Tags di Contact Form 7 puoi aggiungere il codice direttamente nella tab Mail invece che in Modulo: procedi, quindi, ad aggiungere il titolo della pagina prodotto sfruttando il tag  [_post_title].

Puoi usarlo nell’oggetto della mail che invii:

o all’interno del corpo del messaggio:

Nell’esempio puoi vedere inseriti altri tag speciali utilizzati per conoscere ulteriori informazioni relative al messaggio inviato.

Qui trovi un elenco completo degli Special mail-Tags messi a disposizione da CF7.

2. Aggiungi il modulo creato automaticamente a tutti i prodotti

Potresti aggiungere manualmente lo Shortcode generato da CF7 nella descrizione di ogni prodotto, ma in alcuni casi potrebbe risultare lungo e potresti dimenticartene o commettere errori.

Il metodo più semplice è inserire alcune righe di codice all’interno del file functions.php del tuo template e far visualizzare il modulo automaticamente all’interno della tua scheda prodotto.

Posizionati nell’ultima riga del file functions.php e inserisci le seguenti righe di codice:

// Inserire form informazioni nel singolo prodotto

add_filter('the_content', 'dc_cf7_form_to_all_products');
function dc_cf7_form_to_all_products($content) {
    if ( class_exists( 'woocommerce' ) && is_product() && is_main_query() ) 
{  // Check suggested by: https://pippinsplugins.com/playing-nice-with-the-content-filter/
        return $content . '<div id="forminfo">' . '[contact-form-7 id="232" title="Richiesta Informazioni"]' . '</div>';
    }
    return $content;
}

Il codice controlla che WooCommerce sia attivo sul tuo sito (class_exists( ‘woocommerce’ ) ) e che ci si trovi in una pagina prodotto ( is_product() ). Effettuate tali verifiche, in automatico inserisce il modulo di contatto dopo la descrizione completa del prodotto, ma è possibile anche scegliere di posizionare il form sotto la descrizione breve utilizzando un altro hook.

Conclusione

Seguendo questi pochi e semplici passaggi puoi integrare il tuo Form Personalizzato all’interno della tua pagina prodotto di WooCommerce. Ovviamente il risultato varia in base alla grafica del tema utilizzato ma, nel caso in cui non ti piaccia, puoi sfruttare l’ID “forminfo” per cambiare la visualizzazione tramite codice CSS.

Adriano Cipriani

Co-founder e Web Designer di Ca2, si occupa principalmente di grafica e dello sviluppo siti web, dalla radice fino all’interfaccia, e di design per i dispositivi mobile. Dopo la laurea in Grafica e Progettazione Multimediale e una passione sfrenata per la tecnologia, ha approfondito la sfera dello sviluppo web, riuscendo a far conciliare perfettamente competenze e passione.