Come aggiungere un tab personalizzato su WooCommerce

Vorresti aggiungere un tab personalizzato su WooCommerce ma non sai come fare? Niente paura, in questa guida andremo a vedere come poterlo fare in diversi modi.

WooCommerce è un plugin di WordPress molto potente, che aggiunge tutte le funzionalità per poter vendere prodotti fisici e digitali su internet.

Nella singola pagina di un prodotto, dopo la descrizione breve, abbiamo una sezione che divide in tab le informazioni: descrizione lunga, informazioni aggiuntive e, se lo abbiamo attivo, le recensioni del prodotto.

Aggiungere un tab personalizzato su WooCommerce

Può essere utile aggiungere un tab personalizzato su WooCommerce in diversi casi. Pensiamo ad esempio a voler inserire una guida standard per le spedizioni. Senza un tab personalizzato, dovremo inserirle ogni volta che creiamo un prodotto, magari nella descrizione.

Questo, oltre ad essere fastidioso e poco pratico, è soprattutto antiestetico e poco professionale per i visitatori del sito web, ovvero gli acquirenti.

Aggiungere un tab ai prodotti con un plugin

Per prima cosa vediamo il metodo più semplice per poter aggiungere un tab personalizzato su WooCommerce, ovvero tramite l’utilizzo di un plugin. Quello che vogliamo consigliarti in questa guida si chiama Custom Product Tabs for WooCommerce.

Se non sai come installare un plugin su WordPress ti consigliamo la nostra guida che ti permetterà di imparare i metodi consigliati per farlo.

Una volta installato ed attivato il plugin avremo una nuova opzione nelle impostazioni del prodotto e una nuova voce nel menu di WordPress. Dirigiamoci quindi in un prodotto esistente o creiamone uno nuovo. Nella sezione dei “Dati Prodotto“, subito dopo “Avanzate“, avremo un nuovo tab chiamato “Custom Tab“.

All’interno di questa sezione avremo la possibilità di creare un tab aggiuntivo per il prodotto, oppure potremo caricare un tab salvato precedentemente per utilizzarlo in altri prodotti.

Dato che siamo alla prima configurazione premiamo su “Add a tab“. Qui le impostazioni sono molto semplici, dovremo infatti aggiungere il titolo e la descrizione del tab.

Sistemati tutti i campi come meglio crediamo, premiamo su “Save Tabs” ed aggiorniamo il prodotto. Successivamente, spostiamoci nella pagina del prodotto (lato visitatore) per vedere i frutti del nostro lavoro.

Qualora volessimo creare un tab ricorrente in diversi prodotti dovremo crearlo da “Custom Product Tabs“, ovvero la voce, a sinistra, nel menu di WordPress. Infine, basterà richiamarlo nel prodotto desiderato attraverso “Add a Saved Tabs“.

Aggiungere un tab ai prodotti tramite Child Theme

È possibile aggiungere un tab personalizzato su WooCommerce anche attraverso l’utilizzo del Child Theme. Basta infatti di un pò di pazienza, e conoscenze minime di programmazione per creare in autonomia un tab senza l’uso di nessun plugin.

La prima cosa da fare è collegarsi al nostro hosting web attraverso il file manager o via FTP. In seguito, andiamo nel Child Theme ed apriamo il file functions.php. In questo file andremo ad inserire il codice che servirà alla creazione del tab.

//Creiamo il tab personalizzato
function wpspecial_product_tab( $tabs ) {
	$tabs['wpspecial_tab'] = array(
		'title' 	=> __( 'Titolo Tab', 'woocommerce' ),
		'priority' 	=> 50,
		'callback' 	=> 'wpspecial_product_tab_content'
	);
	return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'wpspecial_product_tab' );

//Inseriamo il contenuto del tab
function wpspecial_product_tab_content() {
	echo '<h2>Titolo interno al tab</h2>';
	echo '<p>Descrizione interna al tab</p>';	
}

Il tab assumerà la grafica del tema attivo su WordPress. Con il codice appena segnalato però, inseriremo il tab su tutti i prodotti del nostro negozio, quindi va bene per informazioni generiche.

E se volessimo creare un tab personalizzato su WooCommerce che è visibile solo per alcune categorie? Quello che dovremo cambiare è la prima funzione, andando ad inserire un filtro per categoria.

//Creiamo il tab personalizzato filtrato per categoria
function wpspecial_product_tab( $tabs ) {
		global $product;
		$product_id = method_exists( $product, 'get_id' ) ? $product->get_id() : $product->id;
		$product_cats = array( 'slug_categoria_da_filtrare' );
		if( has_term( $product_cats, 'product_cat', $product_id ) ){
			$tabs['wpspecial_tab'] = array(
				'title' 	=> __( 'Titolo Tab', 'woocommerce' ),
				'priority' 	=> 50,
				'callback' 	=> 'wpspecial_product_tab_content'
			);
		}
		return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'wpspecial_product_tab' );

In questo caso, dovremo specificare lo slug della categoria in cui vogliamo visualizzare il tab personalizzato, andando a modificare la variabile $product_cats e inserire lo slug della categoria corretto.

Riordinare o rimuovere i tabs di WooCommerce

Una volta creato un tab personalizzato su WooCommerce, potremo aver bisogno di riordinare o rimuovere determinati tabs presenti di default. Per farlo potremo utilizzare sempre il nostro fidato Child Theme ed il file functions.php.

Inseriamo il codice che trovate successivamente per ordinare i tab inserendo per primo il tab personalizzato appena creato. Il numero affianco ad ogni tab indica la priorità e l’ordine in cui devono essere visualizzati.

//Riordiniamo i tabs di WooCommerce
function wpspecial_reorder_tabs( $tabs ) {
	
	$tabs['wpspecial_tab']['priority'] = 5;   
	$tabs['reviews']['priority'] = 10;			
	$tabs['description']['priority'] = 15;			
	$tabs['additional_information']['priority'] = 20;	

	return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'wpspecial_reorder_tabs', 98 );

Invece, qualora volessimo eliminare qualcuno dei tab predefiniti presenti su WooCommerce, ci basterà inserire il codice seguente, avendo cura di eliminare il tab che invece vogliamo mantenere.

//Rimuoviamo i tabs di WooCommerce presenti di default
function wpspecial_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );      	// Rimuove il tab descrizione lunga
    unset( $tabs['reviews'] ); 			// Rimuove il tab recensioni (non visibile se non attive in impostazioni)
    unset( $tabs['additional_information'] );  	// Rimuove il tab informazioni aggiuntive

    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'wpspecial_remove_product_tabs', 98 );

Infine, voglio ricordarti, che qualora avessi bisogno di maggiore personalizzazione, puoi contattare i nostri specialisti di WordPress tramite l’apposita pagina di assistenza.

Conclusioni

In questa guida abbiamo visto come personalizzare il nostro e-commerce aggiungendo tabs personalizzati nella scheda prodotto. Inoltre, abbiamo visto come eliminare o riordinare i tabs presenti di default.

Tu hai già provato a modificare il tuo negozio online? Hai trovato qualche difficoltà? Se ne hai voglia, facci sapere nei commenti cosa hai modificato e per quale motivo lo hai fatto.