Come aggiungere campi personalizzati nei prodotti WooCommerce

Per aggiungere questi campi, ti mostrerò come modificare il file functions.php, che si trova nella cartella del tema figlio.

Il primo passo è collegarsi a woocommerce_product_options_general_product_data. La funzione collegata a questo hook è responsabile della visualizzazione dei nuovi campi. Un secondo hook, woocommerce_process_product_meta, salverà i valori dei campi personalizzati. Entrambe queste azioni vengono eseguite nel codice seguente::

// The code for displaying WooCommerce Product Custom Fields
add_action( 'woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields' );
// Following code Saves WooCommerce Product Custom Fields
add_action( 'woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save' );

Aggiunta di un campo personalizzato al prodotto

function woocommerce_product_custom_fields () {
global $woocommerce, $post;
echo '<div class=" product_custom_field ">';
// This function has the logic of creating custom field
// This function includes input text field, Text area and number field
echo '</div>';
}

Per creare i campi, utilizzerò generalmente le funzioni WooCommerce integrate tra cui:

woocommerce_wp_text_input

Pacchetto: WooCommerce\Admin\Functions

Situato in:  includes/admin/wc-meta-box-functions.php

woocommerce_wp_textarea_input

Pacchetto: WooCommerce\Admin\Functions

Situato in includes/admin/wc-meta-box-functions.php

Struttura del campo da includere

// Custom Product Text Field
woocommerce_wp_text_input(
   array(
     'id' => '_custom_product_text_field',
     'label' => __( 'My Text Field', 'woocommerce' ),
     'placeholder' => 'Custom Product Text Field',
     'desc_tip' => 'true'
   )
);

Nota l’uso di desc_tip per visualizzare quelle belle bollicine a destra del campo invece di visualizzare la descrizione del campo predefinita. Questo attributo funziona per ogni tipo di campo.

// Custom Product Number Field
woocommerce_wp_text_input(
    array(
        'id' => '_custom_product_number_field',
        'placeholder' => 'Custom Product Number Field',
        'label' => __('Custom Product Number Field', 'woocommerce'),
        'type' => 'number',
        'custom_attributes' => array(
            'step' => 'any',
            'min' => '0'
        )
    )
);

Nel codice precedente, il valore predefinito del passaggio è 1 con il minimo impostato su zero. Fondamentalmente, questo significa che mi aspetto un valore positivo qui (almeno maggiore di zero).

Per creare l’area di testo è necessario utilizzare il codice seguente:

// Custom Product Textarea Field
woocommerce_wp_textarea_input(
    array(
        'id' => '_custom_product_textarea',
        'placeholder' => 'Custom Product Textarea',
        'label' => __('Custom Product Textarea', 'woocommerce')
    )
);

Ecco il codice completo dei campi di input personalizzati che devi incollare nel functions.php, che si trova nella cartella del tema.

// Display Fields
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');
// Save Fields
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');
function woocommerce_product_custom_fields() {
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    // Custom Product Text Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_text_field',
            'placeholder' => 'Custom Product Text Field',
            'label' => __('Custom Product Text Field', 'woocommerce'),
            'desc_tip' => 'true'
        )
    );
    //Custom Product Number Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_number_field',
            'placeholder' => 'Custom Product Number Field',
            'label' => __('Custom Product Number Field', 'woocommerce'),
            'type' => 'number',
            'custom_attributes' => array(
                'step' => 'any',
                'min' => '0'
            )
        )
    );
    //Custom Product  Textarea
    woocommerce_wp_textarea_input(
        array(
            'id' => '_custom_product_textarea',
            'placeholder' => 'Custom Product Textarea',
            'label' => __('Custom Product Textarea', 'woocommerce')
        )
    );
    echo '</div>';
}

Salvataggio dei dati nel database

Dopo aver creato i campi del prodotto personalizzato, è necessaria un’altra funzione per salvare i valori, una volta che l’utente preme il pulsante di aggiornamento o di pubblicazione.

Ora creerò una funzione woocommerce_product_custom_fields_save. Questa funzione è agganciata a woocommerce_process_product_meta. Questa funzione è piuttosto semplice; Per prima cosa controlla se il campo è vuoto. In caso contrario, viene creato un meta post utilizzando update_post_meta(). Ho usato esc_attr() ed esc_html() per proteggere i dati. Ecco il codice per salvare il valore di tutti i campi:

function woocommerce_product_custom_fields_save($post_id) {
    // Custom Product Text Field
    $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
    if (!empty($woocommerce_custom_product_text_field))
        update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));
// Custom Product Number Field
    $woocommerce_custom_product_number_field = $_POST['_custom_product_number_field'];
    if (!empty($woocommerce_custom_product_number_field))
        update_post_meta($post_id, '_custom_product_number_field', esc_attr($woocommerce_custom_product_number_field));
// Custom Product Textarea Field
    $woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea'];
    if (!empty($woocommerce_custom_procut_textarea))
        update_post_meta($post_id, '_custom_product_textarea', esc_html($woocommerce_custom_procut_textarea));
}

Ottieni i valori dal database

Ora che i campi sono stati creati e i loro valori salvati, ora visualizzerò i valori sul frontend. In questo caso, il metodo migliore sarebbe lavorare con i modelli personalizzati di WooCommerce.

Per ottenere quei valori, userò la popolare funzione get_post_meta().

<?php while (have_posts()) : the_post(); ?>
<?php wc_get_template_part('content', 'single-product'); ?>
<?php
// Display the value of custom product text field
    echo get_post_meta($post->ID, '_custom_product_text_field', true);
// Display the value of custom product number field
    echo get_post_meta(get_the_ID(), '_custom_product_number_field', true);
// Display the value of custom product text area
    echo get_post_meta(get_the_ID(), '_custom_product_textarea', true);
    ?>
<?php endwhile; // end of the loop. ?>

Aggiungi campi personalizzati WooCommerce nella pagina del prodotto

Molti proprietari di negozi non si rendono conto che possono aggiungere campi personalizzati all’area dei dati del prodotto. Ciò rappresenta un’opportunità unica per visualizzare informazioni aggiuntive che non rientrano nella UX ufficiale di WooCommerce.

La cosa buona è che questi campi personalizzati possono essere facilmente aggiunti tramite il backend. queste modifiche si riflettono quindi nel frontend come campi personalizzati nelle pagine dei prodotti, nelle pagine del carrello e in aree simili. infatti, questi campi personalizzati possono apparire anche nelle pagine di stato dell’ordine.

Per dimostrare questa idea dei campi personalizzati del prodotto WooCommerce, dimostrerò come aggiungere un nuovo campo personalizzato nella sezione Dati prodotto di una pagina del prodotto WooCommerce:

function woocommerce_product_custom_fields() {
  $args = array(
    	'id' => 'woocommerce_custom_fields',
    	'label' => __('Add WooCommerce Custom Fields', 'cwoa'),
  );
  woocommerce_wp_text_input($args);
}
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

Ecco come apparirebbe lo snippet sul frontend. Come puoi vedere, il campo personalizzato ha la stessa etichetta menzionata nell’array $args.

Salva campi personalizzati WooCommerce

Utilizza il seguente snippet di codice per aggiungere campi personalizzati alle pagine dei prodotti. La cosa importante da notare sullo snippet è che utilizza le funzioni e le azioni standard di WooCommerce.

function save_woocommerce_product_custom_fields($post_id) {
    $product = wc_get_product($post_id);
    $custom_fields_woocommerce_title = isset($_POST['woocommerce_custom_fields']) ? $_POST['woocommerce_custom_fields'] : '';
    $product->update_meta_data('woocommerce_custom_fields', sanitize_text_field($custom_fields_woocommerce_title));
    $product->save();
}
add_action('woocommerce_process_product_meta', 'save_woocommerce_product_custom_fields');

WooCommerce Visualizza i campi personalizzati nella pagina del prodotto

Il frammento di codice seguente mostra i campi personalizzati. Il processo è semplice: controlla il valore del campo personalizzato e conferma che ha un valore. se il caso è vero, mostra il valore come titolo del campo.

function woocommerce_custom_fields_display() {
  global $post;
  $product = wc_get_product($post->ID);
    $custom_fields_woocommerce_title = $product->get_meta('woocommerce_custom_fields');
  if ($custom_fields_woocommerce_title) {
    	printf(
            '<div><label>%s</label><input type="text" id="woocommerce_product_custom_fields_title" name="woocommerce_product_custom_fields_title" value=""></div>',
            esc_html($custom_fields_woocommerce_title)
    	);
  }
}
add_action('woocommerce_before_add_to_cart_button', 'woocommerce_custom_fields_display');

Conclusione

In questo articolo, ho discusso di come aggiungere campi personalizzati alla pagina del prodotto WooCommerce. Ho anche dimostrato come visualizzare i valori sul frontend. Se hai problemi con l’utilizzo del codice o vorresti contribuire alla discussione, lascia un commento qui sotto!