Aggiungere CSS Personalizzato alla Pagina Prodotto WooCommerce in una categoria specifica

Question

Aggiungere CSS Personalizzato alla Pagina Prodotto WooCommerce in una categoria specifica

1 dic 2017, 12:20:00

Visualizzazioni: 20.2K

Voti: 3

Ho passato ore a cercare come fare questo ma tutto ciò che ho trovato viene spiegato in modo troppo complesso per me. Non sono molto esperto di programmazione ma so come usare l'Ispettore elementi e lavorare da lì, ma in questo caso non mi aiuta.

Voglio utilizzare un layout/template di pagina diverso sui prodotti in una categoria specifica. Sto usando WooCommerce e sono riuscito a utilizzare l'ispettore elementi per ricreare una pagina prodotto come desideravo. Poi ho copiato il testo nel CSS personalizzato e funziona alla perfezione. Tuttavia, questo finisce per essere una modifica Globale.

La maggior parte delle mie pagine prodotto trarrebbe beneficio dall'avere il template predefinito piuttosto che quello personalizzato che ho creato. Voglio sapere come aggiungere il codice all'interno delle parentesi in modo che il CSS personalizzato (template personalizzato) che ho aggiunto venga applicato solo ai prodotti nella categoria designata.

Spero che tutto ciò abbia senso. Ecco delle immagini per darti un esempio visivo.

esempio di pagina prodotto WooCommerce con layout personalizzato

So già quale CSS personalizzato voglio aggiungere al template della pagina prodotto modificata. Spero che designare questo CSS personalizzato alle categorie specifiche sia semplice come aggiungere parentesi simili a questo (mi scuso, sono sicuro che sia sbagliato ma vedo CSS personalizzato che assomiglia a questo)

.product.category-2 { modifiche css personalizzate qui }

Grazie per aver dedicato tempo alla lettura e apprezzo qualsiasi tipo di aiuto.

Blake Shiman

31

woocommerce offtopic

Commenti

Il body dovrebbe avere una classe term-XX, dove XX è l'ID della categoria. Se aggiungi .term-XX all'inizio delle tue regole CSS, queste si applicheranno solo a quella categoria.

Jacob Peattie

1 dic 2017 12:56:03

Tutte le risposte alla domanda

Commenti

Grazie a te e a tutti gli altri per l'aiuto! Proverò questa soluzione quando tornerò in ufficio e vi farò sapere come è andata. Grazie ancora!

Blake Shiman

2 dic 2017 04:03:13

Commenti

WordPress aggiunge già una classe unica al body per le categorie, term-{id}

Jacob Peattie

1 dic 2017 12:54:05

Apprezzo molto il tuo feedback. Ho visto questo argomento discusso in altri thread durante la mia ricerca di una risposta, ma è un po' troppo avanzato per me. So come aggiungere elementi al file function.php e so anche come aggiungere CSS personalizzato, ma non sono sicuro di cosa cambiare e dove inserirlo.

Ad esempio, l'ID della categoria prodotto è 206. Dove dovrei inserirlo nel file functions.php? Dopo aver inserito l'ID della categoria prodotto nel posto giusto, dove dovrei poi aggiungere il codice CSS personalizzato affinché funzioni? C'è un modo per farlo con il CSS personalizzato? Grazie ancora

Blake Shiman

1 dic 2017 12:55:47

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width: 100%; }

Blake Shiman

1 dic 2017 12:57:30

Sopra c'è un esempio di codice che voglio aggiungere per la specifica categoria della pagina del prodotto.

Blake Shiman

1 dic 2017 12:58:39

@JacobPeattie OP sta specificamente chiedendo di aggiungere un selettore alla pagina del singolo prodotto, non alla pagina delle categorie. Temo che il tuo commento abbia completamente mancato il punto.

Daniel Fonda

1 dic 2017 13:11:57

Mostra i restanti 1 commenti

MarkPraschan 321 · Answer 1 · 2017-12-01T20:41:39Z

Ecco la mia soluzione... Ho aggiunto quanto segue al file functions.php del mio child theme:

add_filter( 'body_class','my_body_classes2' );
function my_body_classes2( $classes ) {

if ( is_product() ) {

    global $post;
    $terms = get_the_terms( $post->ID, 'product_cat' );

    foreach ($terms as $term) {
        $product_cat_id = $term->term_id;
        $classes[] = 'product-in-cat-' . $product_cat_id;    
    }
}
return $classes;
}

Ora ogni volta che visualizzi una pagina di prodotto singolo, verrà aggiunta una classe CSS aggiuntiva per ogni categoria a cui appartiene il prodotto al tag <body>.

Quindi se vuoi modificare lo stile per le pagine di prodotto singolo nelle categorie 2 o 4, puoi usare il seguente CSS:

.product-in-cat-2 , .product-in-cat-4 {
    color: #ffffff;
}

MarkPraschan

321

1 dic 2017 20:41:39

Daniel Fonda 336 · Answer 2 · 2017-12-01T12:35:33Z

Aggiungi questo al tuo file functions.php https://gist.github.com/thegdshop/3197540

Questo dovrebbe aggiungere la classe della categoria appropriata quando sei nella pagina del singolo prodotto.

Daniel Fonda

336

1 dic 2017 12:35:33

TurboWeb.ro 1 · Answer 3 · 2018-05-18T22:11:18Z

1) Installa il plug-in "add custom CSS"

2) Di default non mostrerà una casella per aggiungere CSS. Devi entrare nel plug-in (nella parte inferiore della barra di amministrazione) e troverai una domanda su "abilita CSS personalizzato per le seguenti pagine" - quindi seleziona "prodotti" e ora avrai una casella per aggiungere CSS nei singoli prodotti quando li accedi tramite WooCommerce.

Non so se puoi fare quel tipo di modifica con questo metodo, avevo bisogno di questo per rimuovere il CSS render-blocking su una pagina prodotto.

TurboWeb.ro

1

18 mag 2018 22:11:18

Ashar Zafar 117 · Answer 4 · 2018-05-31T22:23:07Z

Aggiungi una classe body relativa alla categoria del prodotto in WooCommerce Aggiungi questo al tuo functions.php

add_filter( 'body_class', 'wc_cat_names' );
function wc_cat_names( $classes ) {
    if(is_product()){
    global $post;
    $terms = get_the_terms( $post->ID, 'product_cat' );
        foreach ($terms as $term) {
            $classes[] = $term->slug;
        }
    }
    return $classes;
}

Ashar Zafar

117

31 mag 2018 22:23:07

Aadii Mughal 171 · Answer 5 · 2019-08-28T15:27:22Z

Ho aggiunto questo codice nel file functions.php andando in

Pannello di controllo ...>>> Aspetto >>> Editor >>>> functions.php

In fondo al codice ho incollato

add_filter( 'body_class','my_body_classes2' );
function my_body_classes2( $classes ) {

if ( is_product() ) {

    global $post;
    $terms = get_the_terms( $post->ID, 'product_cat' );

    foreach ($terms as $term) {
        $product_cat_id = $term->term_id;
        $classes[] = 'product-in-cat-' . $product_cat_id;    
    }
}
return $classes;
}

Poi sono andato in Pannello di controllo ...>>> Prodotti >>>> Categorie >>> ho passato il mouse sul pulsante modifica e ho ottenuto l'ID

Lo stesso ID l'ho inserito nella pagina del singolo prodotto

.product-in-cat-(ID) {
    color: #ffffff;
}

Ha funzionato

Aadii Mughal

171

28 ago 2019 15:27:22