ACF e WooCommerce: Aggiungere Campi Personalizzati ai Prodotti

Perché Aggiungere Campi Personalizzati ai Prodotti WooCommerce

WooCommerce è la piattaforma e-commerce più utilizzata al mondo, alimentando oltre il 25% di tutti i negozi online. Tuttavia, le schede prodotto predefinite offrono un set limitato di informazioni: titolo, descrizione, prezzo, immagini, categorie e poco altro. Per molti negozi, questo non basta. Un e-commerce di elettronica ha bisogno di specifiche tecniche dettagliate. Un negozio di abbigliamento necessita di tabelle taglie personalizzate. Un portale di prodotti alimentari deve mostrare valori nutrizionali, allergeni e certificazioni. Ed è qui che ACF e WooCommerce insieme diventano uno strumento indispensabile.

Advanced Custom Fields ti permette di aggiungere qualsiasi tipo di informazione personalizzata alle schede prodotto di WooCommerce, con un’interfaccia intuitiva per l’inserimento dei dati e la massima flessibilità nella visualizzazione frontend. In questo articolo vedremo come configurare ACF per WooCommerce, come posizionare i campi nell’editor del prodotto, come visualizzare i dati personalizzati nella scheda prodotto e come sfruttare le funzionalità avanzate per creare un’esperienza di acquisto unica.

L’integrazione ACF-WooCommerce funziona sia con la versione gratuita che con ACF PRO, anche se quest’ultima offre funzionalità aggiuntive come i Repeater (perfetti per specifiche tecniche e tabelle dati) e le Options Page (utili per impostazioni globali del negozio). WooCommerce stesso non richiede configurazioni speciali: ACF si integra nativamente perché i prodotti WooCommerce sono implementati come custom post type di WordPress.

Configurare il Gruppo di Campi per i Prodotti

La configurazione di ACF per i prodotti WooCommerce segue lo stesso processo di qualsiasi altro gruppo di campi, con una particolarità nella regola di posizionamento. Crea un nuovo gruppo di campi in ACF > Field Groups > Aggiungi Nuovo e assegnagli un titolo descrittivo, ad esempio “Specifiche Tecniche Prodotto”. Nella sezione Location Rules, imposta la regola: Post Type è uguale a Product. Il tipo “Product” è il custom post type registrato da WooCommerce per i prodotti.

Puoi anche creare regole più specifiche se non tutti i prodotti necessitano degli stessi campi. Ad esempio, puoi usare la regola Product Category è uguale a Elettronica per mostrare le specifiche tecniche solo per i prodotti della categoria Elettronica, oppure Product Type è uguale a Simple Product per differenziare i campi tra prodotti semplici e variabili. Questa granularità è particolarmente utile per negozi con cataloghi eterogenei dove diverse categorie di prodotti richiedono informazioni diverse.

Per quanto riguarda la posizione del gruppo nell’editor, la scelta “Normal” posiziona il metabox ACF sotto il pannello dei dati prodotto di WooCommerce, che è generalmente il posto più intuitivo. Se preferisci che i campi personalizzati siano più visibili, puoi scegliere la posizione “High (after title)” per posizionarli subito dopo il titolo del prodotto. La posizione “Side” funziona bene per campi brevi come toggle, select o campi numerici che non richiedono molto spazio.

Campi Comuni per i Prodotti E-Commerce

Ecco una selezione di campi ACF comunemente utilizzati per arricchire le schede prodotto WooCommerce. Specifiche Tecniche: un campo Repeater con sottocampi “Nome Specifica” (Text) e “Valore” (Text) permette di creare tabelle di specifiche completamente personalizzabili. Materiali e Composizione: un campo Text Area per la descrizione dei materiali, utile per abbigliamento, arredamento e prodotti artigianali.

Tabella Taglie: un Repeater con sottocampi per taglia, misure in cm (petto, vita, fianchi, lunghezza) che genera automaticamente una tabella taglie completa. Certificazioni: un campo Checkbox con opzioni come “Bio”, “Vegan”, “Senza Glutine”, “Made in Italy”, “ISO 9001”, utile per mostrare badge di certificazione nella scheda prodotto. Documenti Allegati: un campo File per caricare schede tecniche PDF, manuali d’uso o certificati di conformità.

Video Prodotto: un campo oEmbed per inserire l’URL di un video YouTube o Vimeo che mostra il prodotto in azione. FAQ Prodotto: un Repeater con domanda e risposta specifiche per il singolo prodotto, diverse dalle FAQ generali del sito. Informazioni Nutrizionali: per prodotti alimentari, un Group con sottocampi per calorie, proteine, carboidrati, grassi e allergeni. La scelta dei campi dipende ovviamente dal tipo di prodotti venduti e dalle informazioni che i clienti cercano prima di acquistare.

Visualizzare i Campi nella Scheda Prodotto

Per visualizzare i campi ACF nella pagina del prodotto WooCommerce, hai diverse opzioni a seconda del livello di personalizzazione desiderato. Il metodo più semplice è utilizzare gli hook di WooCommerce per inserire il contenuto nel punto esatto della scheda prodotto dove vuoi che appaia. WooCommerce offre numerosi hook (action e filter) in punti strategici della pagina prodotto.

Per inserire le specifiche tecniche sotto la descrizione breve del prodotto, aggiungi questo codice al file functions.php del tuo tema:

<?php
add_action(woocommerce_single_product_summary, mostra_specifiche_acf, 25);
function mostra_specifiche_acf() {
    if( have_rows(specifiche_tecniche) ):
        echo <div class="product-specs">;
        echo <h3>Specifiche Tecniche</h3>;
        echo <table>;
        while( have_rows(specifiche_tecniche) ): the_row();
            echo <tr>;
            echo <th> . esc_html(get_sub_field(nome)) . </th>;
            echo <td> . esc_html(get_sub_field(valore)) . </td>;
            echo </tr>;
        endwhile;
        echo </table>;
        echo </div>;
    endif;
}
?>

Il numero 25 nel terzo parametro di add_action rappresenta la priorità: WooCommerce usa priorità specifiche per i suoi elementi (titolo=5, valutazione=10, prezzo=10, descrizione breve=20, pulsante aggiungi al carrello=30), quindi con priorità 25 il nostro contenuto apparirà tra la descrizione breve e il pulsante di acquisto.

Aggiungere Tab Personalizzati alla Scheda Prodotto

Un approccio più elegante per organizzare le informazioni aggiuntive è creare tab personalizzati nella sezione delle schede prodotto di WooCommerce (la zona con “Descrizione”, “Informazioni aggiuntive” e “Recensioni”). Puoi aggiungere tab personalizzati utilizzando il filtro woocommerce_product_tabs:

<?php
add_filter(woocommerce_product_tabs, aggiunta_tab_acf);
function aggiunta_tab_acf($tabs) {
    if( get_field(specifiche_tecniche) ) {
        $tabs[specifiche] = array(
            title     => Specifiche Tecniche,
            priority  => 15,
            callback  => contenuto_tab_specifiche
        );
    }
    if( get_field(documenti_allegati) ) {
        $tabs[documenti] = array(
            title     => Documenti,
            priority  => 20,
            callback  => contenuto_tab_documenti
        );
    }
    return $tabs;
}

function contenuto_tab_specifiche() {
    if( have_rows(specifiche_tecniche) ):
        echo <table class="shop_attributes">;
        while( have_rows(specifiche_tecniche) ): the_row();
            echo <tr><th> . esc_html(get_sub_field(nome)) . </th>;
            echo <td> . esc_html(get_sub_field(valore)) . </td></tr>;
        endwhile;
        echo </table>;
    endif;
}

function contenuto_tab_documenti() {
    $file = get_field(documenti_allegati);
    if($file) {
        echo <a href=" . esc_url($file[url]) . " target="_blank">;
        echo Scarica  . esc_html($file[filename]);
        echo  ( . size_format($file[filesize]) . )</a>;
    }
}
?>

I tab personalizzati vengono mostrati solo quando il campo ACF corrispondente ha un valore (grazie al controllo if(get_field(...)) prima di aggiungere il tab). Questo è importante: non vuoi mostrare un tab “Specifiche Tecniche” vuoto per i prodotti che non hanno specifiche compilate. La classe CSS shop_attributes riutilizza lo stile della tabella “Informazioni aggiuntive” di WooCommerce, garantendo un aspetto coerente senza CSS aggiuntivo.

ACF e Variazioni Prodotto

Un aspetto avanzato dell’integrazione ACF-WooCommerce riguarda i prodotti variabili. WooCommerce gestisce le variazioni come post separati (di tipo product_variation), e ACF può essere configurato per aggiungere campi a ciascuna variazione individualmente. Tuttavia, l’interfaccia predefinita di ACF non è ottimale per le variazioni perché i metabox appaiono nel pannello generale del prodotto, non all’interno di ciascuna variazione.

Per gestire campi ACF a livello di variazione, puoi utilizzare gli hook di WooCommerce woocommerce_product_after_variable_attributes (per aggiungere campi al pannello variazione nel backend) e woocommerce_save_product_variation (per salvare i valori). Questa integrazione richiede codice PHP personalizzato e una buona conoscenza della struttura dati di WooCommerce, ma permette scenari avanzati come mostrare informazioni diverse per ogni variazione di colore o taglia.

Visualizzare i Campi ACF con Elementor e WooCommerce

Se utilizzi Elementor Pro per personalizzare le pagine prodotto di WooCommerce, puoi sfruttare i Dynamic Tag per collegare i widget di Elementor ai campi ACF dei prodotti, esattamente come faresti per qualsiasi altro custom post type. Crea un template Single Product nel Theme Builder di Elementor e usa i Dynamic Tag ACF per mostrare le informazioni personalizzate nel layout che preferisci.

Questo approccio è particolarmente potente perché ti dà il pieno controllo visuale sulla posizione e lo stile di ogni campo ACF nella scheda prodotto. Puoi creare sezioni con icone per le certificazioni, banner promozionali condizionali basati su campi True/False, slider video basati su campi oEmbed e qualsiasi altro layout creativo che desideri. La combinazione ACF + WooCommerce + Elementor Pro è la triade perfetta per e-commerce con schede prodotto ricche e personalizzate.

Performance e Considerazioni SEO

Aggiungere campi ACF ai prodotti WooCommerce ha implicazioni sulle performance e sulla SEO che vale la pena considerare. Dal punto di vista delle performance, ogni campo ACF aggiunge una riga nella tabella wp_postmeta. Per un catalogo con migliaia di prodotti e decine di campi per prodotto, la tabella postmeta può diventare molto grande. Assicurati di avere indici adeguati sulla tabella e considera l’uso di un plugin di caching per le pagine prodotto.

Dal punto di vista SEO, i dati ACF visibili nel frontend contribuiscono al contenuto della pagina e vengono indicizzati dai motori di ricerca. Questo è un vantaggio significativo: specifiche tecniche dettagliate, descrizioni dei materiali e FAQ specifiche per prodotto arricchiscono il contenuto della pagina, migliorando le possibilità di posizionamento per query long-tail. Considera anche l’aggiunta di structured data (schema.org) basati sui campi ACF: puoi generare dinamicamente il markup Product con specifiche, recensioni e disponibilità basate sui dati personalizzati.

L’integrazione ACF-WooCommerce apre possibilità infinite per personalizzare l’esperienza di acquisto. Dai semplici campi informativi ai complessi sistemi di configurazione prodotto, ACF fornisce la flessibilità necessaria per trasformare un negozio WooCommerce standard in una piattaforma e-commerce completamente su misura per il tuo settore e il tuo pubblico.

Vuoi potenziare il tuo negozio WooCommerce con campi personalizzati ACF e schede prodotto avanzate? Il team di G Tech Group è specializzato nella realizzazione di siti web e-commerce con personalizzazioni su misura. Contattaci per una consulenza gratuita e scopri come rendere il tuo e-commerce unico e competitivo.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

• Come Installare Elementor su WordPress
• Come Installare e Configurare WP Rocket
• Come Installare e Configurare SEOPress
• Come Installare e Configurare UpdraftPlus