Cerca

WooCommerce: come eliminare, rinominare e riordinare i tab delle pagine prodotto.

WooCommerce personalizzare tab pagine prodotto
WooCommerce personalizzare tab pagine prodotto

Come personalizzare i tab delle pagine prodotto di WooCommerce

Testato con WooCommerce 3.5.7
Revisione dell’articolo originale scritto il 25 Agosto 2014

Le pagine prodotto di WooCommerce mostrano le informazioni suddivise in 3 tab, o linguette che dir si voglia, che in versione italiana appaiono etichettate come: “Descrizione”, “Informazioni aggiuntive” e “Recensioni”. In questo preciso ordine.

La seconda a dire il vero non è sempre presente, è dinamica, e appare solo quando ci sono le condizioni giuste di prodotto.

Alle volte è necessario modificare questa struttura, vediamo quindi come sia possibile eliminare o rinominare uno o più tab prodotto, o cambiarne l’ordine.

Ci vuole uno snippet, facile facile.

[tweet “I tab delle pagine prodotto di #WooCommerce si possono eliminare, rinominare o cambiarne l’ordine.”]

I codici che seguono vanno aggiunti al file functions.php del tema in uso, come al solito è sempre consigliabile utilizzare un tema child in WordPress.

Gli snippet che seguono si rifanno dalla documentazione ufficiale di WooCommerce, e sono testati con WooCommerce 2.1.x.

1. Eliminare uno o più tab nelle pagine prodotto di WooCommerce.

È possibile eliminare uno o più tab nella pagina prodotto di WooCommerce, utilizzando lo snippet che segue.

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );      	// Rimuove il tab Descrizione
    unset( $tabs['reviews'] ); 			// Rimuove il tab Recensioni
    unset( $tabs['additional_information'] );  	// Rimuove il tab Informazioni Aggiuntive

    return $tabs;

}

Occorre fare riferimento alle righe dalla 5 alla 7, utilizzando solo la riga che ci interessa. Ad esempio, se ci interessa rimuovere il tab “Recensioni” occorre modificare lo snippet lasciando la riga 6, e rimuovendo le righe 5 e 7.

Se invece vogliamo eliminare i tab “Descrizioni” e “Informazioni Aggiuntive”, lasciando solo il tab “Recensioni” nella pagina prodotto, bisogna lasciare nello script le righe 5 e 7, e togliere la riga 6.

2. Cambiare nome ad uno o più tab nelle pagine prodotto di WooCommerce.

Come per lo snippet precedente, se si vuole rinominare uno o più tab della pagina prodotto di WooCommerce, basta modificare lo snippet che segue lasciando solo le righe che ci interessano, tra la 5 e la 7.

add_filter( 'woocommerce_product_tabs', 'woo_rename_tabs', 98 );

function woo_rename_tabs( $tabs ) {

	$tabs['description']['title'] = __( 'Nuovo nome tab Descrizione' );		// Rinomina il tab Descrizione
	$tabs['reviews']['title'] = __( 'Nuovo nome tab Recensioni' );				// Rinomina il tab Recensioni
	$tabs['additional_information']['title'] = __( 'Nuovo nome tab Informazioni Aggiuntive' );	// Rinomina il tab Informazioni Aggiuntive

	return $tabs;

}

Si intuisce facilmente a quale tab si riferisce ogni riga, il nuovo nome del tab va inserito al posto delle stringhe “Nuovo nome tab…”.

3. Cambiare ordine dei tab nelle pagine prodotto di WooCommerce.

L’ordine predefinito dei tab delle pagine prodotto di WooCommerce è il seguente:

  1. Descrizione
  2. Informazioni aggiuntive
  3. Recensioni

È possibile cambiare l’ordine predefinito utilizzando questo snippet:

add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {

	$tabs['reviews']['priority'] = 5;			// Mette il tab Recensioni al primo posto
	$tabs['description']['priority'] = 10;			// Mette il tab Descrizione al secondo posto
	$tabs['additional_information']['priority'] = 15;	// Mette il tab Informazioni Aggiuntive al terzo posto

	return $tabs;
}

Un valore più piccolo di priority assegna il primo posto al tab, il valore più grande l’ultimo.
I commenti inseriti nello snippet possono aiutare a comprenderne meglio la logica, se viene utilizzato come proposto il nuovo ordine dei tab sarà:

  1. Recensioni
  2. Descrizione
  3. Informazioni aggiuntive

Lo stesso snippet può essere utilizzato anche con i tab aggiuntivi eventualmente presenti.

Testato con WooCommerce 3.5.7
Revisione dell’articolo originale scritto il 25 Agosto 2014

Condividi se ti è piaciuto!

Altri articoli che potrebbero interessarti:

Picture of Roberto Rota

Roberto Rota

Libero professionista, un "artigiano del web", lavoro nella comunicazione in rete da quando esiste Internet. Mi occupo principalmente di assistenza su WordPress e assistenza e consulenza WooCommerce, seguo la realizzazione di progetti web, in particolare siti di e-commerce, visibilità e comunicazione in rete. Il mio curriculum è su Linkedin, e mi puoi trovare anche su Instagram, FaceBook e Twitter.

DAI IL TUO CONTRIBUTO

Se il mio lavoro ti è stato di aiuto, contribuisci alla continuità di questo sito.
Basta una piccola donazione su PayPal, una pizza e una birra alla tua salute!

71 risposte

  1. Ciao Roberto, ho letto un po’ tutto dal post ai commenti. Riferendomi al Tab delle informazioni aggiuntive, in cui compaiono gli attributi del prodotto, se volessi rimuovere il link o comunque non rendere le voce (gli attributi) cliccabili, conosci una funzione da inserire nel file function.php che mi potrebbe tornare utile.

    Ti ringrazio per la disponibilità
    Manuel

    1. Ciao Manuel, non mi sono mai posto il problema e no ti saprei dire.

      Magari andando a ravanare nel loop che li genera si riesce ad intercettare la funzione relativa e costruire un filtro ad-hoc.

      rob

  2. Ringrazio
    Con il suo consiglio ho risolto eliminando il tab informazioni aggiuntive.

    Le chiedo come si può togliere il doppio titolo dei tab.
    mi spiego meglio:
    il tab ha il titolo “descrizione” poi di seguito come titolo in alto al corpo del testo c’è di nuoVo “descrizione”. Stessa cosa con il tab “recensioni”
    è possibile togliere questo secondo titolo (che si trova nel corpo del testo).

    Grazie

      1. Salve Roberto, ho lo stesso problema di Gianluca e provando ad applicare lo snippet add_filter( ‘woocommerce_product_description_heading’, ‘__return_null’ ); non ottengo alcun risultato.
        Ho provato in tutti i modi.
        Grazie

        1. Ciao Marco, dovrei vedere per poterti dire qualcosa, magari il tema si mette di traverso sovrascrivendo alcune parti del prodotto

          Magari se così fosse puoi intercettarlo via CSS e nasconderlo

          Roberto

          1. grazie per la risposta, il tema è astra che sino ad oggi non mi ha dato alcun problema. Secondo te può essere un problema di compatibilità con l’ultima versione di woocommerce?

            1. Astra è abbastanza “neutrale” riguardo WooCommerce, lo uso in tanti siti, non dovrebbe dipendere da lui.

              Appena ho un attimo testo lo snippet, vedo se ho qualche sito di test con astra installato

              1. Ciao Roberto, ho risolto in questo modo:
                Il problema nel mio caso è un plugin che utilizzo che si chiama Custom Product Tabs for WooCommerce, utilizzando questo plugin lo snippet doveva essere cambiato in questo modo:
                add_filter( ‘yikes_woocommerce_custom_repeatable_product_tabs_heading’, ‘__return_false’ );
                così funziona 🙂

                1. ah beh ma se mi dicevi che utilizzavi un plugin per personalizzare i tab di woocommerce te lo dicevo subito di guardare in quella direzione 🙂

  3. Salve, provo a domandare qua 🙂
    Mi sto incaponendo su una questione che non riesco a risolvere; quello che vorrei fare e vedere dentro alla pagina del singolo prodotto gli attributi sempre in uno stesso ordine da me preimpostato indipendentemente da come questi siano stati inseriti dentro la pagina di edit del prodotto stesso. E’ possibile? Grazie.

    1. Ciao Max, come hai già notato gli attributi seguono l’ordine in cui sono inseriti nel prodotto.
      Probabilmente si può riuscire a filtrarli, ma dovrei documentarmi per questo

      Se scopro qualcosa ti faccio sapere.

  4. Salve Roberto,
    avrei una domanda a cui non sono riuscito a trovare una risposta, anche sfogliando fra le varie domande fatte in precedenza: all’interno del Tab “Informazioni aggiuntive” compare il peso degli articoli inseriti nel catalogo (quando questo viene inserito, ovviamente). Vorrei aggiungere alla scritta “Peso” la parola “lordo” per distinguerlo dal peso netto degli articoli, visto che il peso lordo è quello che viene utilizzato per il calcolo delle spedizioni.
    Grazie fin da adesso….

    1. Ciao Carlo, non ho la soluzione a portata di mano ma credo che utilizzando il filtro “woocommerce_display_product_attributes” non dovrebbe essere un grosso problema.

  5. Proprio in questo momento sto provando ancora una volta a disattivare uno ad uno i plugin ma già so che non dipende da questo. La ringrazio comunque per avermi dedicato del tempo.

  6. Ho il tema di default di wordpress e con l’altro plugin i tab nella scheda del prodotto sono corretti. Per plugin ‘simili’ intendo che entrambi mi servono per trasformare il sito in un catalogo prodotti e so bene che ognuno ha caratteristiche proprie ma resta il fatto che woocommerce sul mio sito mi da problemi e per quanto io stia cercando di risolvere non ci riesco, purtroppo.

    1. A questo punto sarei curioso di vedere l’installazione, perché se i tab non appaiono un motivo deve esserci per forza, conflitto tra plugin o impostazioni errate che siano.

      rob

  7. Forse non mi sono spiegata bene, non è un problema di tema perchè ho provato altro plugin simile a woocommerce e i tab sono corretti come anche la descrizione è visibile. Ho disattivato uno ad uno i plugin ma il problema resta.

    1. Non puoi paragonare WooCommerce con altri plugin simili (??) perché ogni plugin ha caratteristiche proprie, e reagisce diversamente con temi e plugin terzi.

      Prima di dire che non è un problema di tema devi provare ad impostare un tema sicuramente compatibile, al posto di quello attuale, e vedere se i tab vengono fuori.
      Anche il tema di default di wordpress andrebbe bene, purché aggiornato, o se vuoi essere sicura al 100% installa il tema Storefront.

  8. Buonasera Roberto, devo trasformare un semplice sito (wordpress) in catalogo prodotti ma senza ecommerce. Ho attivato woocommerce con relativa estenzione per disattivare la vendita e fin qui tutto bene tranne per il fatto che nella scheda del prodotto non si vede la descrizione e se clicco su informazioni aggiuntive, dove ho inserito correttamente gli attributi, questa tab non si apre. Ho controllato anche se era un problema del tema ma ho quello base e poi ho provato altro plugin con simile caratteristiche e la descrizione è visibile e il tab si apre senza problemi, quindi è errore di woocommerce. Gentilmente potrebbe aiutarmi? Grazie in anticipo per la cortese risposta

    1. se con il tema attivo e woocommerce da solo, ovvero con altri plugin disattivati, i tab si presentano senza problemi non direi che sia un problema suo.

      hai provato a disattivare i plugin e riattivarli uno ad uno, in modo da individuare il colpevole?

  9. buonasera
    ho un problema :
    ho copiato il codice all’interno della pagina function.php x Cambiare nome ad uno o più tab nelle pagine prodotto di WooCommerce. ..mi ha generato un errore nel salvataggio dicendo che non era andato a buon fine.
    Adesso ho la classica schermata bianca e non riesco ad accedere al ws-admin

    1. Un classico errore durante il salvataggio del file, forse un timeout.

      Entra via FTP nella cartella del tema, e ripristina il file functions.php che immagino tu abbia copiato per sicurezza, prima di modificarlo.

      Tutto dovrebbe ritornare alla normalità.

      rob

  10. Ciao Roberto,
    ho bisogno di un info, com’è possibile che nella pagina prodotto ci sia un H2 fisso con la parola “Descrizione”??? come posso fare per rimuoverlo ???
    Ti ringrazio per il supporto.
    grazie Roberto

    1. Ciao, hai due strade:

      1. tramite css, con un bel display:none per “.woocommerce-tabs .panel h2”

      2. tramite snippet php, ora non ce l’ho sottomano
      ma dovrei averlo postato in qualche articolo qui nel blog, comunque se fai una ricerca in rete lo trovi facilmente.

      rob

  11. salve, dentro il mio woocommerce vorrei mettere di fianco al numerino dei prodotti disponibili un testo come faccio?

  12. Questo filtro elimina solo la scritta nella scheda “descrizione”. Per eliminare anche le altre ho improvvisato…

    add_filter( ‘woocommerce_product_description_heading’, ‘remove_product_description_heading’ );
    function remove_product_description_heading() {
    return ”;
    }

    add_filter( ‘woocommerce_product_reviews_heading’, ‘remove_product_reviews_heading’ );
    function remove_product_reviews_heading() {
    return ”;
    }

    add_filter( ‘woocommerce_product_additional_information_heading’, ‘remove_product_additional_information_heading’ );
    function remove_product_additional_information_heading() {
    return ”;
    }

    È corretto? Funziona solo per due schede e non per l’ultima… 🙁

    1. Le virgolette e gli apici sono tipografichi, lo sono anche nello script? Potrebbe essere quello il problema.

      O forse puoi provare a sostituire return'' con echo''

      rob

  13. Pur modificando correttamente l’etichetta con il nome personalizzato, rimane la scritta “Descrizione prodotto” inserita nella scheda. Hai per caso qualche idea di come eliminarla? Grazie

    1. Sono due cose ben distinte, il titolo lo puoi eliminare via css o con questo filtro per il file functions.php:

      add_filter( 'woocommerce_product_description_heading', 'remove_product_description_heading' );
      function remove_product_description_heading() {
      return '';
      }

  14. Grazie per la risposta, comunque ho provato a disattivare praticamente tutti i plugin ma non sono riuscita a risolvere il problema, quindi ho provveduto a non far vedere più quel messaggio. Grazie mille per l’attenzione. Buon lavoro.

  15. Ciao, scusami ho un problema che non riesco a risolvere. Nei messaggi automatici di woocommerce, ad esempio ” rimosso. Annullare?” quando si rimuove un prodotto dal carrello, il link “annullare” non manda a niente, anzi non è proprio cliccabile. Da dove si possono modificare questi messaggi? Ho provato a cerca ma non ho trovato niente… grazie mille

  16. vorrei modificare in griglia l’immagine prodotto… cioè vorrei mettere un cambio foto sul hover… sai mica qual’è il php che devo andarmi a modificare?… lo cerco da giorni…

      1. ciao io invece ho un “problema” diverso vorrei che i campi addizionali fossero visibili direttamwnte dopo la descrizione del prodotto.. è possibile fare una modifica del genere?
        sto creando un negozio di libri e quindi vorei che campi come autore, numero pagine lingia ecc mi fossero subito disponibili ….e se posse possibile anche ricercabili!!!

        1. Ciao Claudio, i campi addizionali (o custom fields) sono una cosa diversa, è facile realizzarli ma la loro visualizzazione in punti precisi è un pochino più complicata, bisogna intervenire nel loop di generazione della pagina prodotto e qualche tema ci mette del suo a complicare la vita.

          rob

  17. Ciao,
    ma se io volessi semplicemente non mostrare il peso del prodotto che viene inserita nella tab informazioni aggiuntive? Ovviamente se la elimino, tolgo anche quello che vorrei invece che l’utente vedesse.

    Grazie

    1. Ciao Francesca, bella domanda.
      Ho fatto una ricerca veloce in rete ed ho visto che ci sono filtri per togliere le informazioni su peso e dimensioni, ma non ho trovato niente solo per il peso.

      rob

      1. Ciao Roberto, grazie per la risposta!
        Potresti indicarmelo? Eventualmente posso eliminare anche le dimensioni. Diciamo che non reputo necessario che il cliente li veda.

        Grazie

      2. È quello che trovato anch’io questa mattina spulciando in rete.
        Sembrerebbe funzionare.

        Grazie Rob!

  18. Ciao, io ho bisogno di poter visualizzare i contenuti dei tab in sezioni nella pagina del prodotto. Quindi come posso modificare la modalità tab di woocommerce rendendo i contenuti visibili subito senza cliccare le tab? Grazie mille.

    1. Ciao Ale,

      con alcuni temi è una funzione offerta nei settaggi.

      In teoria c’è la possibilità di rimuovere l’action che genera i tab tramite snippet, ma poi bisogna integrare i contenuti dei tab nella pagina del singolo prodotto. Se fai una ricerca veloce in rete la trovi subito.

      C’è però da dire che alcuni temi, che intervengono direttamente nei template e nei loop di woocommerce, non reagiscono bene a queste operazioni.

      rob

  19. Io vorrei duplicare il tab principale del sito che ho comprato , poichè l’impostazione grafica mi piace molto. Non è possibile suddividere gli attributi nei diversi tab?

    1. La gestione dei Tab nelle pagine dei prodotti WooCommerce è un tantinello complessa, come anche quella degli attributi.

      Magari è fattibile, ma la vedo dura…

      rob

  20. Buonasera Roberto, ho provato ad inserire alla fine del file functions.php lo script e già da dreamweaver mi da errore poi quando sostituisco il file originario mi scompare la pagina. woocommerce 2.4.10 cosa ho bagliato?

    1. Così funziona, sono andato a naso, non sono un programmatore, il sito sembra funzionare tutto:

      add_filter( ‘woocommerce_product_tabs’, ‘sb_woo_remove_reviews_tab’, 98);
      function sb_woo_remove_reviews_tab($tabs) {
      unset($tabs[‘reviews’]);
      unset($tabs[‘description’]);
      unset($tabs[‘additional_information’]);
      return $tabs;
      }

      Ora bisogna vedere se non ha intaccato qualcosa che non noto

  21. Ciao, grazie per l’ottimo lavoro svolto! Un domanda… Come poter aggiungere del testo “fisso” nella sezione INFORMAZIONI AGGIUNTIVE? Avrei bisogno di una porzione di testo sempre visibile in ogni prodotto e sarebbe scomodo creare un falso attributo NOTE. Grazie!

    1. Ciao Christopher, mi cogli impreparato perché è una cosa che finora non mi ha mai chiesto nessuno.

      Provo a documentarmi appena ho tempo, se scopro qualcosa ti aggiorno.

      Roberto

  22. Grazie mille per lo snippet! Ha funzionato perfettamente, però mi sono scomparsi i link social.
    possibile?
    Grazie
    Davide

      1. Ciao Roberto ,
        non c’entrano nulla effettivamente, sto facendo un po’ di esperimenti.
        erano spariti per altre cause
        grazie mille
        davide

  23. Salve, cercavo qualcosa di simile però non è questo.
    Mi spiego quando apro il prodotto in defaul mi va su Recensioni invece in default vorrei che andasse su descrizione

    1. Ciao, è la prima volta che sento un problema del genere, non vorrei che fosse il tema utilizzato a condizionare questa situazione perché non l’ho mai vista da nessuna parte.
      Di solito il primo tab è quello che si apre di default, e di solito è la descrizione prodotto.
      rob

        1. Vedo dalla demo che in effetti il tema di default mostra il tab recensioni, bizzarra scelta…
          Non conosco il tema, nella pagina di configurazione del singolo prodotto c’è nulla a riguardo?

          rob

            1. Ad ogni modo, ciò che determina la visualizzazione di questo o quel tab per primo è la priorità, evidentemente il tema la cambia a suo piacere.
              Se non ci fossero settaggi dedicati nella configurazione del tema, puoi intervenire tramite snippet, tipo questo:

              add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
              function woo_reorder_tabs( $tabs ) {

              $tabs['reviews']['priority'] = 5; // Reviews first
              $tabs['description']['priority'] = 10; // Description second
              $tabs['additional_information']['priority'] = 15; // Additional information third

              return $tabs;
              }

              Ovviamente nell’esempio viene assegnata la maggior priorità alle recensioni, mentre tu dovresti modificarla per le descrizioni.
              Dovrebbe funzionare
              rob

                1. Ma l’hai modificato invertendo la priorità dei primi due?

                  Se sì, allora il tema una una sua funzione che riesce a dare una priorità maggiore, bisognerebbe guardare il codice del tema.

                  Ultima spiaggia, chiedere agli sviluppatori che conoscono bene le funzioni inserite nel tema.

                  rob

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.