Come aggiungere campi personalizzati e metadati alle pagine dei prodotti in WooCommerce?

Quando si costruisce un negozio online professionale basato su WooCommerce, i campi presenti sulla pagina dei prodotti di default spesso non sono in grado di soddisfare tutti i requisiti aziendali. Ad esempio, potrebbe essere necessario aggiungere informazioni come il “modello” o la “garanzia” per i prodotti elettronici, o i “componenti del tessuto” o le “istruzioni per il lavaggio” per i capi di abbigliamento. In questi casi, è fondamentale aggiungere campi personalizzati e metadati ai prodotti. Questo non solo arricchisce le informazioni sui prodotti e migliora l’esperienza utente, ma fornisce anche una base di dati per operazioni di ricerca, filtraggio e lo sviluppo di funzionalità avanzate.

Questo articolo fornirà una descrizione dettagliata di diversi metodi fondamentali per implementare campi personalizzabili per i prodotti in WooCommerce, partendo dall’aggiunta di codice di base fino all’utilizzo di plugin avanzati, e includerà esempi di codice completi e funzionanti.

Utilizzare gli hook di azione integrati in WooCommerce per aggiungere campi

WooCommerce offre una vasta gamma di “Action Hooks” che permettono agli sviluppatori di inserire contenuti in posizioni specifiche all’interno della pagina dei dettagli del prodotto. Questo rappresenta il metodo più diretto e meno invasivo per modificare il funzionamento del sistema originale di WooCommerce.

Si consiglia di leggere Analisi approfondita dei campi personalizzati di WordPress: dalla conoscenza di base alle pratiche di utilizzo avanzate。

L’hook più comunemente utilizzato è… woocommerce_product_options_general_product_dataViene utilizzato per aggiungere campi nella sezione “Dati dei prodotti convenzionali”.

UltaHost – Hosting per siti WordPress

Garanzia di rimborso entro 30 giorni, larghezza di banda illimitata e accesso ai database, protezione gratuita contro gli attacchi DDoS; sconto del 50% per l’acquisto di un piano valido per 3 anni (da 3 a 4 TB di spazio di archiviazione).

pagina di accesso

Aggiungere campi al pannello di dati dei prodotti standard

Il codice seguente mostra come aggiungere un campo di testo e una casella a selezione a discesa ai pannelli di dati generici per i “Prodotti semplici” e i “Prodotti variabili”.

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_general_fields' );
function add_custom_general_fields() {
    global $post;

echo '<div class="options_group">';

// 文本字段示例：产品型号
    woocommerce_wp_text_input(
        array(
            'id'          =&gt; '_product_model',
            'label'       =&gt; __( '产品型号', 'woocommerce' ),
            'placeholder' =&gt; '例如：X-2024Pro',
            'desc_tip'    =&gt; 'true',
            'description' =&gt; __( '请输入此产品的具体型号。', 'woocommerce' ),
        )
    );

// 下拉选择框示例：保修期
    woocommerce_wp_select(
        array(
            'id'          =&gt; '_warranty_period',
            'label'       =&gt; __( '保修期', 'woocommerce' ),
            'options'     =&gt; array(
                ''        =&gt; __( '请选择...', 'woocommerce' ),
                '1year'   =&gt; __( '一年', 'woocommerce' ),
                '2years'  =&gt; __( '两年', 'woocommerce' ),
                'lifetime'=&gt; __( '终身保修', 'woocommerce' ),
            ),
            'desc_tip'    =&gt; 'true',
            'description' =&gt; __( '请选择该产品提供的保修时长。', 'woocommerce' ),
        )
    );

echo '</div>';
}

Salvare i valori dei campi personalizzati

Non è sufficiente visualizzare i campi soltanto in background: è necessario salvare i valori inseriti dall’utente nei metadati del prodotto. Per farlo, è necessario utilizzare… woocommerce_process_product_meta Questo “hook” di salvataggio.

add_action( 'woocommerce_process_product_meta', 'save_custom_general_fields' );
function save_custom_general_fields( $post_id ) {
    // 保存产品型号字段
    $product_model = isset( $_POST['_product_model'] ) ? sanitize_text_field( $_POST['_product_model'] ) : '';
    update_post_meta( $post_id, '_product_model', $product_model );

// 保存保修期字段
    $warranty_period = isset( $_POST['_warranty_period'] ) ? sanitize_text_field( $_POST['_warranty_period'] ) : '';
    update_post_meta( $post_id, '_warranty_period', $warranty_period );
}

Visualizzare i campi personalizzati sulla pagina del prodotto front-end.

L’obiettivo finale è mostrare i valori dei campi salvati sulla pagina del prodotto front-end. Possiamo raggiungere questo scopo attraverso… woocommerce_product_additional_information 或 woocommerce_single_product_summary Aspettiamo i “hook” (meccanismi di integrazione) per esportare i dati dopo la descrizione del prodotto o all’interno della pagina delle etichette.

Verrà visualizzato nella scheda “Informazioni aggiuntive”.

Il codice seguente aggiunge un campo personalizzato alla pagina predefinita di “Informazioni aggiuntive” di WooCommerce.

Si consiglia di leggere Analisi approfondita di WooCommerce: una guida completa per creare un sito e-commerce ad alte prestazioni.。

add_action( 'woocommerce_product_additional_information', 'display_custom_fields_on_product_page' );
function display_custom_fields_on_product_page() {
    global $product;

$product_model = get_post_meta( $product->get_id(), '_product_model', true );
    $warranty_period = get_post_meta( $product->get_id(), '_warranty_period', true );

if ( $product_model ) {
        echo '<div class="product-model"><strong>' . esc_html__( '产品型号：', 'woocommerce' ) . '</strong>'`. esc_html($product_model).`'</div>';
    }

if ( $warranty_period ) {
        // 将存储的值转换为可读的标签
        $warranty_options = array(
            '1year'    =&gt; __( '一年', 'woocommerce' ),
            '2years'   =&gt; __( '两年', 'woocommerce' ),
            'lifetime' =&gt; __( '终身保修', 'woocommerce' ),
        );
        $warranty_label = isset( $warranty_options[ $warranty_period ] ) ? $warranty_options[ $warranty_period ] : $warranty_period;
        echo '<div class="warranty-period"><strong>' . esc_html__( '保修期：', 'woocommerce' ) . '</strong>'`. esc_html($warranty_label)`.'</div>';
    }
}

Utilizzare il plugin per campi personalizzati avanzati per effettuare la configurazione visiva.

Per gli utenti non esperti di codice o per i casi in cui sono necessari tipi di campi complessi (come immagini, selezioni di relazioni, elementi ripetibili, ecc.), l’utilizzo di plugin rappresenta una scelta più efficiente.Advanced Custom Fields Questo rappresenta lo standard del settore.

Creare un gruppo di campi e associarlo ai prodotti.

Dopo aver installato e attivato il plugin ACF (Advanced Custom Fields), è possibile creare facilmente gruppi di campi nel pannello di amministrazione di WordPress. Ad esempio, è possibile creare un gruppo di campi chiamato “Specifiche del prodotto”, che includa un campo di testo per il “Modello” e un campo a selezione per la “Durata della garanzia”. Successivamente, è possibile impostare tale gruppo di campi per essere visualizzato soltanto quando il tipo di articolo corrisponde a “Prodotto”, utilizzando le regole di visualizzazione disponibili in ACF.

ACF gestisce automaticamente la visualizzazione dei campi in background, il salvataggio dei dati e il recupero dei valori dall’interfaccia utente, senza la necessità di scrivere alcun codice per l’interfaccia di gestione.

hosting.com Hosting condiviso

Prestazioni elevate con CPU AMD EPYC, storage SSD NVMe e LiteSpeed, supporto interno di esperti 24 ore su 24, 7 giorni su 7, misure di sicurezza avanzate, tra cui SSL, brute force, malware e protezione DDoS, risparmi fino a 73%

pagina di accesso

Chiamare i campi ACF nel template front-end

Quando viene visualizzato sul front end, si utilizza ciò che è fornito da ACF. get_field() Una funzione viene utilizzata per ottenere un valore.

add_action( 'woocommerce_single_product_summary', 'display_acf_fields_on_product_page', 25 );
function display_acf_fields_on_product_page() {
    $product_model = get_field( 'product_model' );
    $warranty_period = get_field( 'warranty_period' );

if ( $product_model ) {
        echo '<p class="acf-product-model"><strong>Modello del prodotto:</strong>'`. esc_html($product_model).`'</p>';
    }

if ( $warranty_period ) {
        echo '<p class="acf-warranty-period"><strong>Periodo di garanzia:</strong>'`. esc_html($warranty_period)`.'</p>';
    }
}

Aggiungere campi personalizzabili a livello di variante per i prodotti flessibili.

Per i prodotti flessibili, a volte è necessario impostare campi personalizzati separati per ciascuna variante (ad esempio, dimensioni o colori diversi). Per farlo, è necessario utilizzare i “hook” (meccanismi di interazione) specifici per ciascuna variante. woocommerce_product_after_variable_attributes。

Aggiungere un campo al pannello delle varianti

add_action( 'woocommerce_product_after_variable_attributes', 'add_custom_field_to_variations', 10, 3 );
function add_custom_field_to_variations( $loop, $variation_data, $variation ) {
    // 变体专属字段：例如，每个颜色变体的 Pantone 色号
    woocommerce_wp_text_input(
        array(
            'id'          => '_pantone_code[' . $variation->ID . ']',
            'label'       => __( 'Pantone 色号', 'woocommerce' ),
            'value'       => get_post_meta( $variation->ID, '_pantone_code', true ),
            'placeholder' => '例如：PMS 185 C',
            'wrapper_class' => 'form-row form-row-first',
        )
    );
}

Salvare i valori dei campi delle varianti

Per salvare i campi variabili, è necessario utilizzare degli “hook” (meccanismi di interazione specifici) dedicati. woocommerce_save_product_variation。

Si consiglia di leggere Una guida completa per creare un sito web professionale: sviluppa il tuo tema WordPress da zero.。

add_action( 'woocommerce_save_product_variation', 'save_custom_variation_field', 10, 2 );
function save_custom_variation_field( $variation_id, $loop ) {
    $pantone_code = isset( $_POST['_pantone_code'][ $variation_id ] ) ? sanitize_text_field( $_POST['_pantone_code'][ $variation_id ] ) : '';
    update_post_meta( $variation_id, '_pantone_code', $pantone_code );
}

Riassumendo

Aggiungere campi personalizzati ai prodotti di WooCommerce rappresenta la base per una personalizzazione approfondita delle funzionalità del negozio online. Grazie agli action hook nativi di WooCommerce, gli sviluppatori possono controllare con precisione la posizione dei campi, il loro tipo e la logica di elaborazione dei dati, permettendo un’integrazione semplice e leggera nel sistema. Per progetti che richiedono un’implementazione rapida o che coinvolgono tipi di campi più complessi, è possibile fare affidamento su strumenti aggiuntivi o soluzioni personalizzate. Advanced Custom Fields Questi tipi di plugin possono migliorare notevolmente l’efficienza dello sviluppo. Sia che si tratti di prodotti semplici che di prodotti dinamici (quelli i cui contenuti possono cambiare in base alle esigenze degli utenti), conoscere queste tecniche ti permetterà di espandere in modo flessibile la struttura dei dati del prodotto, soddisfacendo così le diverse esigenze dei negozi elettronici e aumentando la professionalità del sito web nonché l’esperienza di utilizzo da parte degli utenti.

FAQ - Domande frequenti

I dati dei campi personalizzati vengono esportati/importati insieme al prodotto?

Sì, ma è necessario un ulteriore trattamento. Quando si utilizzano gli strumenti di importazione/esportazione CSV forniti da WooCommerce, i campi personalizzati aggiunti tramite codice non vengono automaticamente inclusi nelle colonne dell’file esportato. È quindi necessario aggiungere manualmente i titoli delle colonne corrispondenti nel file CSV. _product_modelÈ possibile eseguire questa operazione direttamente all’interno del software di gestione del sito web, oppure utilizzare l’opzione “Esegui l’esportazione di tutti i metadati” durante il processo di esportazione. L’esportazione/importazione dei campi ACF (Access Control Fields) è solitamente supportata in modo più efficace dal plugin ACF stesso o da plugin dedicati all’esportazione/importazione di contenuti, come WP All Import.

Hosting condiviso InterServer

Hosting condiviso $2,50 USD al mese, primo mese $0,1 USD codice promozionale tryinterserver, 461 script di applicazioni cloud, installazione con un clic.

pagina di accesso

È possibile creare filtri di ricerca per i prodotti basati su campi personalizzati?

Certo, ma questo va oltre la semplice aggiunta di campi. È necessario indexare i valori dei campi personalizzati nella taxonomia dei prodotti di WooCommerce, oppure utilizzare plugin di filtraggio di terze parti (come il WooCommerce Product Filters) per riconoscere questi metadati personalizzati. Un approccio più avanzato consiste nella scrittura di query personalizzate… pre_get_posts 或 woocommerce_product_query Modificare il ciclo principale all’interno del “gancio” (hook) per filtrare i prodotti che contengono specifici metadati.

Qual è la differenza fondamentale tra i campi aggiunti tramite il codice e quelli aggiunti tramite il plugin ACF?

La differenza principale risiede nel modo in cui i dati vengono gestiti e archiviati. Quando i dati vengono aggiunti manualmente tramite codice, si ha il controllo diretto sull’output HTML dei campi, sulle operazioni di validazione e sulle procedure di salvataggio; inoltre, si può sfruttare al massimo le funzionalità offerte da WordPress. update_post_meta 和 get_post_meta Le funzioni permettono l’accesso e l’archiviazione dei dati. L’aggiornamento ACF (Additional Components Framework) costruisce sopra di esse un intero strato di gestione, fornendo un’interfaccia utente semplice e intuitiva per definire gruppi di campi e regole, nonché per archiviare i dati in modo più strutturato (forse all’interno dello stesso array). get_field() Queste funzioni restituiscono valori formattati. ACF semplifica il processo di elaborazione dei dati, ma il codice utilizzato è più leggero e più facile da gestire.

Dopo aver aggiunto i campi, come posso farli apparire sulla pagina di archiviazione del prodotto (pagina del negozio)?

Per visualizzare i campi personalizzati sulla pagina di archiviazione dei prodotti (ad esempio, sulla homepage del negozio o sulle pagine di categoria), è solitamente necessario modificare il template relativo agli elementi che vengono mostrati nell’elenco dei prodotti. Il metodo più sicuro consiste nel copiare il file del template fornito da WooCommerce. templates/content-product.php Vai alla relativa path del tuo sottotema e effettua l’overwriting dei contenuti; successivamente, chiama la funzione necessaria in una posizione appropriata all’interno del sottotema (ad esempio, dopo l’informazione sul prezzo). get_post_meta() È possibile utilizzare anche questo metodo per ottenere i valori dei campi. woocommerce_after_shop_loop_item_title Questi “ganci” servono per inserire contenuti, tuttavia è necessario prestare attenzione al fatto che la disposizione visiva del contenuto può variare a seconda del tema scelto.