Tempo di Lettura stimato: 6 minuti

Oggi mentre sviluppavo un plugin per un mio cliente ho avuto la necessità di aggiungere dei nuovi capi al prodotto che non erano contemplati nell’interfaccia di admin, di fatto per generare un nuovo prodotto con delle caratteristiche di base nuove e più complete.

In questo snippet andremo a vedere come arricchire i nostri prodotti di default con nuove funzionalità.ù

Aggiunta di un pannello delle impostazioni personalizzate

Un pannello delle impostazioni personalizzate all’interno del prodotto può essere utilizzato per segmentare le proprie impostazioni in una sezione separata.

Funzionerà alla grande se non c’è una buona posizione disponibile all’interno dei pannelli esistenti nelle impostazioni del prodotto WooCommerce.

L’esempio seguente aggiungerà un pannello delle impostazioni “per un buono regalo”;

					

<?php
}
add_filter( 'woocommerce_product_data_tabs', 'giftcard_options_product_tab_content' ); // WC 2.5 and below
add_filter( 'woocommerce_product_data_panels', 'giftcard_options_product_tab_content' ); // WC 2.6 and up
/**
 * Save the custom fields.
 */
function save_giftcard_option_fields( $post_id ) {
	
	$allow_personal_message = isset( $_POST['_allow_personal_message'] ) ? 'yes' : 'no';
	update_post_meta( $post_id, '_allow_personal_message', $allow_personal_message );
	
	if ( isset( $_POST['_valid_for_days'] ) ) :
		update_post_meta( $post_id, '_valid_for_days', absint( $_POST['_valid_for_days'] ) );
	endif;
	
}
add_action( 'woocommerce_process_product_meta_simple', 'save_giftcard_option_fields'  );
add_action( 'woocommerce_process_product_meta_variable', 'save_giftcard_option_fields'  );

Con quanto sopra inserito, dovresti avere un risultato simile a questo.

Riposizionamento del pannello delle impostazioni personalizzate

Al momento della scrittura non è possibile dare la priorità / riposizionare un pannello delle impostazioni in modo carino.

C’è ancora un modo come mostrato di seguito, ma secondo me questo è un modo “spartano” di farlo. Assicurati di sostituire la custom_product_tabs funzione creata nel frammento di codice precedente con quella seguente.

					

<?php
/**
 * Add a custom product tab with a custom position.
 */
function custom_product_tabs( $original_tabs) {
	$new_tab['giftcard'] = array(
		'label'		=> __( 'Gift Card', 'woocommerce' ),
		'target'	=> 'giftcard_options',
		'class'		=> array( 'show_if_simple', 'show_if_variable'  ),
	);
	$insert_at_position = 2; // This can be changed
	$tabs = array_slice( $original_tabs, 0, $insert_at_position, true ); // First part of original tabs
	$tabs = array_merge( $tabs, $new_tab ); // Add new
	$tabs = array_merge( $tabs, array_slice( $original_tabs, $insert_at_position, null, true ) ); // Glue the second part of original
	return $tabs;
}
add_filter( 'woocommerce_product_data_tabs', 'custom_product_tabs' ); // WC 2.5 and below
add_filter( 'woocommerce_product_data_panels', 'custom_product_tabs' ); // WC 2.6 and up

Questo aggiungerà il pannello del nuovo prodotto dopo la seconda scheda (“Inventario”), è possibile modificare la posizione modificando la funzione insert_at_position .

Questo codice inserirà semplicemente $new_tab tra le schede esistenti.

Questo non è un modo ideale per riposizionare una scheda delle impostazioni, ma sembra essere il modo migliore senza rompere nulla.

Ho inviato una richiesta pull a WooCommerce che ti consentirà di aggiungere un priority => 15 parametro all’array, consentendoti di avere un modo carino e carino o di ordinare i pannelli dati del prodotto.

Aggiornamento: la richiesta pull è stata accettata e ora è possibile ordinare le schede più facilmente utilizzando il parametro ‘priorità’.

Impostazione dell’icona del pannello delle impostazioni personalizzate

L’icona che hai visto nello screenshot precedente non è esattamente utile, carina o simile a ciò che potresti desiderare / avere bisogno.

Esistono due modi per modificare l’icona, entrambi utilizzano CSS per modificare la scheda specifica, ma uno utilizza le icone WooCommerce disponibili e l’altro include l’aggiunta di un’icona completamente personalizzata.

Utilizzando un’icona WooCommerce
woocommerce-custom-prodotto-settings-pannello-icons

Ci sono un sacco di icone WooCommerce disponibili, ma sono limitate.

Puoi trovarli tutti nel seguente repository GitHub; Icone di WooCommerce . Per visualizzare e scegliere un’icona, è necessario “Scarica ZIP”, decomprimere e aprire “demo.html” nel browser.

In quel file cerchi l’icona montata e copia il codice sotto l’icona.

Puoi quindi inserire un po ‘di CSS personalizzato nel tuo plugin (consigliato di aggiungere un foglio di stile).

					

<?php
/**
* Add a bit of style.
*/
function wcpp_custom_style() {
?><style>
#woocommerce-product-data ul.wc-tabs li.giftcard_options a:before { font-family: WooCommerce; content: \e600; }
</style><?php
}
add_action( admin_head, wcpp_custom_style );



Il li.giftcard_options identifica la scheda del prodotto corretto e si aggiungerà l’icona corretta.

Utilizzando un’icona completamente personalizzata
Se non riesci a trovare un’icona tra quelle esistenti offerte da WooCommerce, puoi anche aggiungerne una tua.

Aggiunta di un campo prodotto personalizzato

WooCommerce ha un sacco di funzioni disponibili per i campi predefiniti, ma potrebbero non adattarsi alle tue esigenze.

Un esempio di un campo personalizzato che mi piace usare è un aggiornamento a discesa molto ordinato come Select 2 che dovrebbe essere incluso in Core di WP  a breve (inizialmente previsto per 4.2, non ce l’ha fatta), tuttavia è incluso in WooCommerce.

Nello snippet di codice qui sotto sto aggiungendo il mio HTML formattato personalizzato per visualizzare l’impostazione adatta alle mie esigenze.

Il codice dovrebbe essere aggiunto alla funzione giftcard_options_product_tab_content() .

					

<?php
$redeemable_stores = (array) get_post_meta( $post->ID, _redeem_in_stores, true );
?><p class=form-field _redeem_in_stores>
<label for=_redeem_in_stores><?php _e( Redeemable in stores, woocommerce ); ?></label>
<select name=_redeem_in_stores[] class=wc-enhanced-select multiple=multiple style=width: 80%;>
<option <?php selected( in_array( AL, $redeemable_stores ) ); ?> value=AL>Alabama</option>
<option <?php selected( in_array( NY, $redeemable_stores ) ); ?> value=NY>New York</option>
<option <?php selected( in_array( TX, $redeemable_stores ) ); ?> value=TX>Texas</option>
<option <?php selected( in_array( WY, $redeemable_stores ) ); ?> value=WY>Wyoming</option>
</select>
<img class=help_tip data-tip=<?php _e( Select the stores where this gift card is redeemable., woocommerce ); ?> src=<?php echo esc_url( WC()->plugin_url() ); ?>/assets/images/help.png height=16 width=16>
</p>

E, naturalmente, non dimenticare di salvare i valori nella funzione save_giftcard_option_fields;

					

update_post_meta ($ post_id, '_redeem_in_stores', (array) $ _POST ['_ redeem_in_stores']);

Aggiunta di opzioni di prodotto (come “Scaricabile” e “Virtuale”)

Per questo esempio, sarebbe logico che si desiderasse distinguere i normali prodotti semplici, dai prodotti di carte regalo reali.

Poiché non stiamo utilizzando un tipo di prodotto personalizzato per questo, una buona alternativa sarebbe quella di aggiungere una nuova casella di controllo nell’intestazione della meta-casella.

Sarà posizionato proprio accanto alle opzioni ‘Virtuale’ e ‘Scaricabile’.

Il codice seguente aggiunge la nuova opzione.

					

<?php
/**
 * Add 'Gift Card' product option
 */
function add_gift_card_product_option( $product_type_options ) {
	$product_type_options['gift_card'] = array(
		'id'            => '_gift_card',
		'wrapper_class' => 'show_if_simple show_if_variable',
		'label'         => __( 'Gift Card', 'woocommerce' ),
		'description'   => __( 'Gift Cards allow users to put in personalised messages.', 'woocommerce' ),
		'default'       => 'no'
	);
	return $product_type_options;
}
add_filter( 'product_type_options', 'add_gift_card_product_option' );

E per salvare la casella di controllo;

					

$is_gift_card = isset( $_POST['_gift_card'] ) ? 'yes' : 'no';
update_post_meta( $post_id, '_gift_card', $is_gift_card );

EXTRA: visualizza la scheda Buono regalo solo se selezionata

Ora che abbiamo aggiunto il controllo del buono regalo, possiamo anche visualizzare il pannello dei dati del prodotto “Buono regalo” quando l’opzione del prodotto “Buono regalo” è selezionata.

Consente prima di cambiare la funzione custom_product_tabs() . Cambia array( ‘show_if_simple’, ‘show_if_variable’ ),in array( ‘show_if_gift_card’ ),

					

<?php
/**
* Add a custom product tab.
*/
function custom_product_tabs( $tabs) {
$tabs[giftcard] = array(
label => __( Gift Card, woocommerce ),
target => giftcard_options,
class => array( show_if_gift_card ),
);
return $tabs;
}
add_filter( woocommerce_product_data_tabs, custom_product_tabs ); // WC 2.5 and below
add_filter( woocommerce_product_data_panels, custom_product_tabs ); // WC 2.6 and up

Poiché WooCommerce non è a conoscenza della nostra nuova impostazione, le funzioni giuste per far funzionare la nostra nuova classe  show_if_gift_card di cui abbiamo bisogno non ci sono.

Per farlo funzionare dobbiamo aggiungere un po ‘di JavaScript.

					

<script>
jQuery( document ).ready( function( $ ) {
$( input#_gift_card ).change( function() {
var is_gift_card = $( input#_gift_card:checked ).size();
$( .show_if_gift_card ).hide();
$( .hide_if_gift_card ).hide();
if ( is_gift_card ) {
$( .hide_if_gift_card ).hide();
}
if ( is_gift_card ) {
$( .show_if_gift_card ).show();
}
});
$( input#_gift_card ).trigger( change );
});
</script><?php

È possibile aggiungere lo snippet di codice sopra alla funzione  wcpp_custom_styles()  (Whoops! Ora ha un nome errato!)

Questo è tutto!
Ora hai aggiunto un sacco di cose interessanti sul back-end della tua pagina del prodotto.

In un prossimo post approfondirò come è possibile visualizzare questi stessi campi personalizzati sul front-end del tuo sito Web e visualizzarli nel carrello.

Mi piacerebbe sapere da te se questo è stato utile in qualche modo, avere un feedback, oppure qualcosa che ti piacerebbe vedere o solo un grazie

Leggi Anche  Woocommerce: 4 consigli per incrementare la tua customer experience