Come rimuovere la scheda Informazioni aggiuntive in WooCommerce

Pubblicato: 2021-10-16

Non è un segreto che l'ottimizzazione del tuo negozio online aumenterà le vendite e le conversioni. Se hai provato di tutto e stai cercando qualcosa di diverso per migliorare la tua attività, questo post è per te. In questo articolo, ti mostreremo come rimuovere la scheda delle informazioni aggiuntive in WooCommerce e modificare le singole pagine dei prodotti.

Perché rimuovere la scheda Informazioni aggiuntive?

La scheda Informazioni aggiuntive viene utilizzata principalmente per visualizzare dettagli aggiuntivi sui prodotti come peso, lunghezza, con e altezza. Questo aiuta i clienti a farsi un'idea di quanto sia grande e pesante l'articolo, in modo che scelgano la giusta dimensione del pacco quando effettuano un ordine.

Questa scheda è importante quando vendi prodotti fisici, ma non ha molto senso se offri prodotti o servizi digitali che non comportano alcuna spedizione. In questi casi, la scheda Informazioni aggiuntive non è necessaria.

Considerando quanta concorrenza c'è oggi nell'eCommerce, dovresti rimuovere i campi non necessari e mantenere il tuo negozio il più pulito possibile. Se qualcosa non aiuta la tua attività, è meglio sbarazzartene. Ad esempio, se vendi prodotti digitali, probabilmente non hai bisogno del campo del codice postale, quindi è meglio disabilitarlo o renderlo opzionale.

Allo stesso modo, dovresti rimuovere la scheda Informazioni aggiuntive se non aggiunge alcun valore ai tuoi clienti o alla tua attività. Nella sezione seguente, ti mostreremo esattamente come farlo.

Come rimuovere la scheda Informazioni aggiuntive in WooCommerce

In questa sezione, ti mostreremo due modi per rimuovere la scheda Informazioni aggiuntive in WooCommerce nel modo giusto.

  1. Con PHP
  2. Utilizzo dei CSS

Useremo un po' di codice, ma non preoccuparti. Anche se sei un principiante sarai in grado di seguire ogni passaggio per assicurarti di non commettere errori.

NOTA: poiché modificheremo i file del tema principale e aggiungeremo codice aggiuntivo al modello, prima di iniziare assicurati di aver generato un backup completo del tuo sito web. Inoltre, ti consigliamo di creare un tema figlio e di modificare quei file. In questo modo, non perderai alcuna personalizzazione quando aggiorni il tema principale.

Per modificare i file con il codice, puoi personalizzare direttamente il tema figlio o utilizzare un plug-in. In questa guida utilizzeremo i frammenti di codice. È uno strumento molto utile per i principianti perché semplifica l'aggiunta di codice. Invece di aggiungere i frammenti al file functions.php del tuo tema figlio, il plugin lo gestisce per te.

Ora, senza ulteriori indugi, esaminiamo entrambi i metodi.

1) Rimuovere la scheda Informazioni aggiuntive con PHP

Per rimuovere la scheda Informazioni aggiuntive in WooCommerce utilizzando PHP, la prima cosa che devi fare è installare e attivare il plug-in Code Snippets sul tuo sito web. In questo modo, sarai in grado di aggiungere frammenti personalizzati senza modificare i file del tema principale.

Nella dashboard, vai su Plugin > Aggiungi nuovo , cerca il plug-in e installalo.

installa il plug-in coe snippets

Dopo averlo installato e attivato, devi creare un nuovo snippet. Vai su Snippet > Tutti gli snippet e premi Aggiungi nuovo .

rimuovi la scheda delle informazioni aggiuntive in woocommerce - aggiungi un nuovo snippet di codice

Ora copia il seguente codice, incollalo nella sezione snippet e attivalo.

 // Rimuove la scheda delle informazioni aggiuntive
funzione quadlayers_remove_product_tabs($tabs) {
unset($tabs['informazioni_aggiuntive'] );
restituisci $schede;
}
add_filter('woocommerce_product_tabs', 'quadlayers_remove_product_tabs', 98);

rimuovere la scheda delle informazioni aggiuntive
Quindi, controlla la pagina del tuo prodotto dal front-end e vedrai che la scheda Informazioni aggiuntive è scomparsa.

scheda informazioni aggiuntive rimossa

Ecco come puoi usare PHP per eliminare la scheda Informazioni aggiuntive.

Per rimuovere altre schede, puoi semplicemente cambiare il nome della scheda in questa riga:

 unset($tabs['tab che vuoi rimuovere']);

Come puoi vedere, questo metodo è piuttosto semplice ma non è l'unico. Nella sezione seguente, ti mostreremo come rimuovere la scheda Informazioni aggiuntive dal tuo negozio WooCommerce utilizzando CSS .

2) Rimuovere la scheda Informazioni aggiuntive con CSS

La cosa buona del metodo CSS è che non hai bisogno di alcun plugin. Puoi semplicemente utilizzare la funzione CSS aggiuntiva disponibile nel Personalizzatore di WordPress per completare l'attività. Vediamo come farlo.

Nella dashboard di WordPress , vai su Aspetto > Personalizza .

personalizzazione wordpress

Una volta nel Customizer, vai alla sezione CSS aggiuntivo .

css aggiuntivo

Ora copia il seguente codice CSS e incollalo all'interno dell'editor. Dai un'occhiata all'anteprima e vedrai immediatamente le modifiche.

 /* Nascondi scheda informazioni aggiuntive */
li.scheda_informazioni_aggiuntive {
display: nessuno !importante;
} nascondi scheda aggiuntiva

Se sei soddisfatto del risultato, ricordati di pubblicare gli aggiornamenti.

Questo è tutto! Ecco come puoi rimuovere la scheda Informazioni aggiuntive dal tuo negozio WooCommerce utilizzando CSS .

Rimuovere la scheda Informazioni aggiuntive dalla pagina di pagamento

Finora, abbiamo visto come eliminare la scheda Informazioni aggiuntive dalla pagina del prodotto. Tuttavia, questa scheda viene visualizzata anche nella pagina di pagamento. In questo caso, consente agli acquirenti di fornire maggiori informazioni e note sui loro ordini.

Se desideri rimuovere la scheda Informazioni aggiuntive dalla pagina di pagamento di WooCommerce , questa sezione è per te.

Prima di iniziare, vediamo come appare la scheda Informazioni aggiuntive nella pagina di pagamento:

ulteriori informazioni woocommerce checkout

Ora per rimuovere quella scheda, useremo un po' di CSS.

Copia semplicemente il codice seguente, incollalo nella sezione CSS aggiuntivo del Customizer e premi Pubblica .

 .woocommerce-ulteriori-campi {
display: nessuno;
}

pubblicare il codice CSS

Quindi aggiorna la pagina di pagamento e vedrai che le informazioni aggiuntive sono scomparse.

pagina di pagamento aggiornata

Questo è tutto! È così che puoi rimuovere la scheda Informazioni aggiuntive dalla pagina di pagamento con un po' di CSS .

Come personalizzare la scheda Informazioni aggiuntive

Ora supponiamo che invece di eliminare direttamente la scheda Informazioni aggiuntive dal tuo negozio, desideri personalizzarla. In questa sezione, ti mostreremo alcune diverse opzioni per personalizzare la scheda Informazioni aggiuntive.

Rinominare la scheda Informazioni aggiuntive

Se vuoi chiarire cosa c'è nella scheda Informazioni aggiuntive, puoi rinominarla. Oltre a descrivere cosa contiene, ti distinguerai dalla concorrenza poiché la maggior parte dei negozi online non lo fa.

Usando il plug-in Code Snippets, crea un nuovo snippet e incolla il codice seguente:

 /**
* Rinomina la scheda Informazioni aggiuntive
*/
add_filter('woocommerce_product_tabs', 'quadlayers_rename_tabs', 98);
funzione quadlayers_rename_tabs($tabs) {
$tabs['informazioni_aggiuntive']['titolo'] = __( 'Informazioni sul prodotto'); // Rinomina la scheda Informazioni aggiuntive
restituisci $schede;
}

Se dai un'occhiata da vicino al codice, vedrai che utilizziamo questa riga per cambiare il nome della scheda:

 $tabs['informazioni_aggiuntive']['titolo'] = __( 'Informazioni sul prodotto'); // Rinomina la scheda Informazioni aggiuntive

In questo esempio, abbiamo cambiato il nome in Informazioni sul prodotto, ma sentiti libero di prendere il codice e modificarlo in base alle tue preferenze.

Dopo aver inserito il codice, pubblica le modifiche e vedrai come la scheda Informazioni aggiuntive ha cambiato nome in Informazioni sul prodotto.

Finora, abbiamo visto come rimuovere la scheda Informazioni aggiuntive e come rinominarla in WooCommerce. Ma c'è di più che puoi fare. Vediamo come puoi aggiungere una nuova scheda alla pagina del tuo prodotto.

Come aggiungere una nuova scheda

Se vendi qualcosa di unico o un prodotto nuovo o con molte specifiche, potresti voler aggiungere schede extra alla pagina del prodotto. In questa sezione, ti mostreremo come aggiungere una scheda a una singola pagina di prodotto utilizzando alcuni snippet PHP.

Innanzitutto, apri le impostazioni dei frammenti di codice e crea un nuovo snippet PHP. Quindi, incolla il codice seguente al suo interno.

 /**
* Aggiungi una nuova scheda dei dati del prodotto
*/
add_filter('woocommerce_product_tab', 'quadlayers_new_product_tab');
funzione quadlayers_new_product_tab($schede) {

// Aggiungi la scheda

$schede['test_tab'] = array(
'title' => __( 'Scheda Prodotto personalizzato', 'woocommerce' ),
'priorita' => 50,
'callback' => 'quadlayers_new_product_tab_content'
);

restituisci $schede;

}
funzione quadlayers_new_product_tab_content() {

// Scheda contenuto

echo '<h2>Scheda Prodotto personalizzato</h2>';
echo '<p>La tua nuova scheda prodotto.</p>';

}

Dopo aver incollato il codice, salvalo per applicare le modifiche.

rimuovi la scheda delle informazioni aggiuntive in woocommerce - aggiungi una nuova scheda

Ora controlla una delle pagine dei tuoi prodotti dal front-end e vedrai la nuova scheda.

rimuovi la scheda delle informazioni aggiuntive in woocommerce - scheda del prodotto personalizzato

Utilizzando lo stesso codice, puoi modificarlo per aggiungere più schede, se necessario. E questo è tutto! Ecco come puoi aggiungere schede personalizzate alla pagina del tuo prodotto WooCommerce.

Ora, prima di finire il post, vediamo un'altra cosa che puoi fare per personalizzare la scheda Informazioni aggiuntive.

Come riordinare le schede

Un altro trucco utile che puoi utilizzare nel tuo negozio è riordinare le schede nella pagina del prodotto. Senza utilizzare alcun plug-in, puoi modificare l'ordine delle schede. Vediamo come farlo usando alcuni frammenti di PHP.

Per impostazione predefinita, WooCommerce dispone le schede come segue:

  1. Descrizione
  2. Informazioni aggiuntive
  3. Recensioni

Diciamo che vuoi mettere in evidenza le Recensioni e metterle al primo posto. Per riorganizzare le schede, dovresti usare questo codice:

 /**
* Riordina le schede
*/
add_filter('woocommerce_product_tabs', 'quadlayers_reorder_tabs', 98);
funzione quadlayers_reorder_tabs($tabs) {

$tabs['recensioni']['priorità'] = 5; // Prima le recensioni
$tabs['description']['priority'] = 10; // Descrizione secondo
$tabs['informazioni_aggiuntive']['priorità'] = 15; // Ulteriori informazioni terzi

restituisci $schede;
}

Come puoi vedere, utilizziamo l'attributo priority per posizionare le schede negli ordini che desideriamo. In questo caso, inseriremo prima le Recensioni, poi la Descrizione e infine la scheda Informazioni aggiuntive. Prendi il codice come base e modificalo in base alle tue esigenze.

Una volta deciso l'ordine, incolla il codice nelle impostazioni del plug-in Code Snippets e attivalo.

riordina le schede

Ora controlla le pagine dei tuoi prodotti dal front-end e vedrai le schede riordinate in base alla tua nuova priorità.

nuova priorità di tabulazione

Per ulteriori informazioni ed esempi su come apportare modifiche alla pagina del prodotto, consulta la nostra guida su come personalizzare la pagina del prodotto WooCommerce.

Per ulteriori informazioni e frammenti di esempio, controlla la pagina della documentazione di WooCommerce.

Conclusione

Tutto sommato, la scheda Informazioni aggiuntive di solito contiene dettagli sui tuoi prodotti come peso, lunghezza, con e altezza. Tuttavia, se non vendi prodotti fisici, potrebbe avere senso sbarazzarsi di quella scheda.

In questa guida, ti abbiamo mostrato come rimuovere la scheda delle informazioni aggiuntive in WooCommerce utilizzando due metodi diversi.

  1. PHP
  2. CSS

Entrambi i modi sono abbastanza semplici e non richiedono molte conoscenze di programmazione. Se conosci PHP, puoi utilizzare un plug-in specifico del sito per aggiungere lo snippet o modificare direttamente il file functions.php del tuo tema figlio. In alternativa, se non ti senti a tuo agio nella modifica dei file del tema, puoi utilizzare il metodo CSS. Non richiede strumenti aggiuntivi e puoi aggiungere il codice utilizzando il Personalizzatore di WordPress. Grazie all'anteprima dal vivo del Customizer, potrai vedere la modifica in tempo reale.

Inoltre, abbiamo visto come rimuovere la scheda Informazioni aggiuntive dalla pagina di pagamento e alcuni esempi diversi su come modificare il nome della scheda, aggiungere una nuova scheda e modificare l'ordine delle schede.

Quale metodo hai utilizzato per eliminare la scheda Informazioni aggiuntive dal tuo negozio WooCommerce? Conoscete qualche altro metodo? Fatecelo sapere nella sezione commenti qui sotto!

Per ulteriori tutorial su come personalizzare il tuo negozio, dai un'occhiata ai seguenti articoli:

  • Come personalizzare la Pagina del Negozio WooCommerce
  • Personalizza la pagina del prodotto utilizzando Elementor
  • Come modificare la sezione Prodotti correlati