Come aggiungere custom fields alla Single Product Page di Woocommerce lato admin




Bene bene ragazzi oggi vogliamo mostrarvi come è possibile aggiungere  delle cose moltooooooooooo interessanti alla pagina del prodotto di woocommerce lato admin (pure perchè non è che se ne trovino tante per la modifica del back office). In pratica aggiungeremo una nuova tab option ed aggiungeremo un campo input text a questa nuova tab e per finire la renderemo disponibile solo se la tipologia di prodotto che stiamo creando è un prodotto semplice.

[us_single_image image=”4085″]

CREIAMO LA NOSTRA TAB PERSONALIZZATA







Questa porzione di codice utilizza un filter hook di woocommerce che permette proprio di creare la nostra tab personalizzata e cioè “woocommerce_product_data_tabs“.

La nostra funzione di callback preposta a inserire la nostra tab avrà il compito di impostare:

label’ => __(‘Nome da visualizzare’, ‘woocommerce’),
‘target’ => ‘un id univoco’, //ci servirà a breve fidatevi
‘class’  => ‘show_if_simple’ //con questo gli dico di visualizzare la nuova tab solo se il tipo di prodotto è un prodotto semplice

//Add My Custom Product Tabs

function my_custom_product_tabs($tabs){
$tabs['MyCustomTab'] = array(
'label' => __('MyCustomLabel', 'woocommerce'),
'target' => 'my_target',
'class' => 'show_if_simple'
);

return $tabs;
}

add_filter('woocommerce_product_data_tabs', 'my_custom_product_tabs' );

CREIAMO IL CONTENUTO DELLA TAB PERSONALIZZATA

<!–inizio script banner 320 x 100–>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– Banner320x100 –>
<ins class=”adsbygoogle” style=”display: inline-block; width: 320px; height: 100px;” data-ad-client=”ca-pub-7445104708065818″ data-ad-slot=”1563725012″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!–fine banner 320×100–>

Infine inseriamo il contenuto da visualizzare nella nostra tab personalizzata. Qui faccio un unico appunto e mi raccomando deve essere fatto altrimenti non visualizzerete niente nella tab:

il <div id=”my_target” …………………. deve essere uguale al campo target del codice sopra

/**
* Contents of the My Custom Product Tabs options.
*/
function my_custom_product_tab_content(){
?> <div id="my_target" class="panel woocommerce_options_panel" style="display:block"> <?php
?><div class="options_group show_if_simple">
<?php
woocommerce_wp_text_input( array(
'id' => '_text_input_cs',
'label' => __( 'Quale è il valore di bla blabla', 'woocommerce' ),
'desc_tip' => 'true',
'description' => __( 'Piccola descrizione del campo.....PICCOLA', 'woocommerce' ),
'type' => 'text',
) );
?>
</div>
</div> <?php

}
add_action( 'woocommerce_product_data_panels', 'my_custom_product_tab_content' );

La prossima volta vedremo come salvare questi campi……