Come creare schede prodotto personalizzate in WooCommerce

I clienti del tuo negozio online hanno bisogno di informazioni: più sono, meglio è. Grazie alla soluzione e-commerce WooCommerce per WordPress puoi già aggiungere informazioni extra ai tuoi prodotti. Oltre agli elementi standard come nome, prezzo, immagine o descrizione breve, hai a disposizione 3 schede prodotto standard:

1. Scheda Descrizione con la descrizione lunga del prodotto
2. Informazioni aggiuntive con gli attributi del prodotto
3. Recensioni con le recensioni dei clienti sul prodotto

E se ti servono altre schede prodotto WooCommerce personalizzate? Allora hai due possibilità. O sai programmare in PHP e scrivi del codice da inserire nel file functions.php del tuo tema child. Oppure usi un plugin per WooCommerce che ti permette di creare schede come vuoi, senza programmare. Ti mostriamo come aggiungere schede prodotto personalizzate in entrambi i modi.

Aggiungere schede personalizzate con PHP

Se conosci PHP e WordPress puoi sviluppare una tua soluzione per aggiungere schede personalizzate ai prodotti. Crea un tema child se non ne hai uno, apri il file functions.php e mettiti al lavoro. Il core di WooCommerce offre un filtro chiamato woocommerce_product_tabs per aggiungere schede proprie. Agganciarsi a questo filtro è semplice.

Come esempio aggiungiamo una nuova scheda «Spedizione e tempi di consegna». Con questa vogliamo dare al cliente più informazioni sulla spedizione: quando arriva il mio pacco, quali corrieri vengono usati.

Iniziamo agganciandoci al filtro:

add_filter( 'woocommerce_product_tabs', 'my_shipping_tab' );
function my_shipping_tab( $tabs ) {
    // Adds the new tab
    $tabs = array(
        'title'     => __( 'Shipping & Delivery', 'child-theme' ),
        'priority'  => 50,
        'callback'  => 'my_shipping_tab_callback'
    );
    return $tabs;
}

Le cose più importanti sono il titolo, la priorità e la funzione di callback. Se vuoi cambiare la posizione della scheda, ad esempio renderla la prima, imposta la priorità su 1. La callback è la funzione che definiamo ora. Restituisce il contenuto della scheda:

function my_shipping_tab_callback() {
	// The new tab content
	echo '<h2>Shipping & Delivery</h2>';
	echo '<p>We ship for free within USA using UPS.</p>';
}

Fatto: ora ogni prodotto contiene questa scheda. Puoi anche rimuovere schede o rinominare quelle esistenti.

E se ti servono schede WooCommerce specifiche per prodotto o per categoria? Ad esempio vuoi mostrare una guida alle taglie, ma solo per i prodotti della categoria abbigliamento. Allora ti conviene un plugin!

Creare schede per categoria in WooCommerce

Grazie al plugin WooCommerce Ultimate Custom Product Tabs puoi creare le schede come vuoi:

• Creare schede specifiche personalizzate
• Aggiungere schede solo per determinate categorie
• Mostrare schede prodotto globali
• Inserire un’icona davanti alle schede
• Aggiungere stili e altro ancora

Queste sono solo alcune delle funzioni più importanti che il plugin offre per una gestione completa delle schede prodotto. Riprendiamo l’esempio di prima: come creare una scheda specifica per una categoria. Vai in wp-admin > WooCommerce > Ultimate Tabs. Attiva ad esempio la scheda 1, aggiungi titolo, contenuto e priorità. Poi c’è la parte «Apply to», dove imposti dove deve comparire la scheda. Ed è tutto: la scheda ora appare solo nella sezione felpe, facilissimo. Cos’altro può fare il plugin? Può rinominare, disattivare e riordinare le schede standard, oppure disattivare del tutto la funzione schede.

Come disattivare la funzione schede di WooCommerce

A volte è meglio per la SEO o per i tuoi clienti che tutti i contenuti siano visibili subito. Può quindi essere utile togliere le schede e mostrare direttamente descrizione, dati tecnici e recensioni. Se vuoi eliminare del tutto la funzione schede, aggiungi questo script:

wp_dequeue_script( 'wc-single-product' );

Poi aggiungi questo CSS per nascondere le schede prodotto:

.woocommerce-tabs ul.tabs {
display: none !important;
}