Come modificare i colori delle schede della pagina del prodotto del tema della vetrina

Pubblicato: 2020-10-29

Colori delle schede della pagina del prodotto di Storefront WooCommerce ha più di 5 milioni di installazioni attive nel repository di WordPress. WooCommerce è una soluzione di eCommerce incredibilmente popolare per WordPress. La maggior parte delle persone costruisce i propri negozi online con WooCommerce, principalmente per la sua flessibilità e facilità di personalizzazione.

WooCommerce ha molte estensioni, che coprono quasi tutte le funzionalità o funzionalità di cui potresti aver bisogno. Tuttavia, alcuni di loro costano denaro, ma portano comunque a termine il lavoro. Puoi facilmente eseguire alcune personalizzazioni da solo usando le azioni.

Colori delle schede della pagina del prodotto di Storefront

In questo tutorial, cambierò il colore delle schede della pagina del prodotto. Inoltre, utilizzerò per aggiungere e modificare le schede dei prodotti WooCommerce.

Se hai familiarità con WooCommerce, sai che WooCommerce supporta tre schede. Queste schede sono:

Descrizione
Informazioni aggiuntive
Recensioni

Ecco come il tema Storefront li mostra: Schede prodotto

Passaggi per cambiare il colore delle schede della pagina del prodotto WooCommerce

Ecco i passaggi che devi seguire:

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Personalizza .
Passa a CSS aggiuntivo nella barra laterale sinistra che appare.
Aggiungi la regola CSS.

 .woocommerce div.product .woocommerce-tabs ul.tabs li.active

{

colore di sfondo:#a02fa4 !importante;

colore: bianco! importante;

}

Questo sarà il risultato:

Questo codice cambia il colore della scheda attiva.

Inoltre, condividerò alcuni frammenti per personalizzare questa sezione.

Passaggi per aggiungere una scheda prodotto WooCommerce Storefront personalizzata

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina Editor temi, cerca il file delle funzioni del tema per aggiungere la funzione per aggiungere una scheda del prodotto WooCommerce personalizzata.
Aggiungi il seguente codice al file functions.php:

 add_filter('woocommerce_product_tab', 'njengah_new_product_tab');

funzione njengah_new_product_tab($schede) {

// Aggiungi la nuova scheda

$schede['test_tab'] = array(

'titolo' => __( 'Sconto', 'dominio di testo' ),

'priorita' => 50,

'callback' => 'njengah_new_product_tab_content'

);

restituisci $schede;

}




funzione njengah_new_product_tab_content() {

// Il nuovo contenuto della scheda

eco 'Sconto';

echo 'Ecco la tua nuova scheda prodotto scontato.';

}

Questo sarà il risultato:

Passaggi per rimuovere le schede dei prodotti WooCommerce Storefront

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina Editor temi, cerca il file delle funzioni del tema per aggiungere la funzione per rimuovere le schede dei prodotti WooCommerce Storefront.
Aggiungi il seguente codice al file functions.php:

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

funzione njengah_remove_product_tabs($schede) {

unset($tabs['descrizione']); // Rimuove la scheda della descrizione

unset($tabs['recensioni']); // Rimuovi la scheda recensioni

unset($tabs['informazioni_aggiuntive'] ); // Rimuove la scheda delle informazioni aggiuntive

unset($tabs['test_tab']); // Rimuove la scheda sconto

restituisci $schede;

}

Questo sarà il risultato:

Passaggi per rinominare le schede dei prodotti WooCommerce Storefront

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina Editor temi, cerca il file delle funzioni del tema per aggiungere la funzione per rinominare le schede dei prodotti WooCommerce Storefront.
Aggiungi il seguente codice al file functions.php:

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

funzione njengah_rename_tabs($tabs) {

$tabs['description']['title'] = __( 'Maggiori informazioni', 'testo-dominio' ); // Rinomina la scheda della descrizione

$tabs['recensioni']['titolo'] = __( 'Valutazioni', 'dominio di testo'); // Rinomina la scheda recensioni

$tabs['informazioni_aggiuntive']['titolo'] = __( 'Dati prodotto', 'dominio-testo' ); // Rinomina la scheda delle informazioni aggiuntive

$tabs['test_tab']['title'] = __( 'Commissione', 'dominio di testo'); // Rinomina la scheda sconto

restituisci $schede;

}

Questo sarà il risultato:

Passaggi per riordinare le schede dei prodotti WooCommerce

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina Editor temi, cerca il file delle funzioni del tema per aggiungere la funzione per riordinare le schede dei prodotti WooCommerce.
Aggiungi il seguente codice al file functions.php:

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

funzione njengah_reorder_tabs($tabs) {

$tabs['recensioni']['priorità'] = 5; // Prima le recensioni

$tabs['description']['priority'] = 15; // Descrizione terzo

$tabs['informazioni_aggiuntive']['priorità'] = 20; // Ulteriori informazioni quarto

restituisci $schede;

}

Questo sarà il risultato:

Conclusione

Questo post ha condiviso come cambiare il colore delle schede prodotto attive nella pagina del singolo prodotto. Inoltre, ho condiviso alcuni frammenti di codice che puoi utilizzare per personalizzare questa sezione. Ho illustrato come aggiungere o rimuovere schede prodotto. Inoltre, ho dimostrato come rinominare e riordinare le schede dei prodotti WooCommerce Storefront.