Adăugarea de CSS personalizat la pagina de produs WooCommerce într-o categorie specificată

Question

Adăugarea de CSS personalizat la pagina de produs WooCommerce într-o categorie specificată

1 dec. 2017, 12:20:00

Vizualizări: 20.2K

Voturi: 3

Am petrecut ore întregi cercetând cum să fac acest lucru, dar tot ce am găsit explică într-un mod care mă depășește. Nu sunt foarte bun la programare, dar știu să folosesc Inspect element și să lucrez de acolo, însă asta nu mă ajută în acest caz.

Vreau să folosesc un aspect/șablon diferit de pagină pentru produsele dintr-o categorie specificată. Folosesc WooCommerce și am reușit să folosesc inspect element pentru a recrea o pagină de produs așa cum mi-am dorit. Apoi am copiat textul în CSS-ul personalizat și funcționează perfect. Cu toate acestea, aceasta devine o modificare Globală.

Majoritatea paginilor mele de produse ar beneficia de pe urma șablonului implicit mai degrabă decât cel personalizat pe care l-am creat. Vreau să știu cum să adaug codul în interiorul parantezelor astfel încât CSS-ul personalizat (șablonul personalizat) pe care l-am adăugat să fie aplicat doar produselor din categoria desemnată.

Sper că toate acestea au sens. Iată câteva imagini pentru a vă oferi un exemplu vizual.

exemplu de CSS personalizat pentru pagina de produs WooCommerce

Știu deja ce CSS personalizat vreau să adaug la șablonul modificat al paginii de produs. Sper că desemnarea acestui CSS personalizat pentru categoriile specifice este la fel de simplă precum adăugarea parantezelor similar cu aceasta (îmi cer scuze, sunt sigur că e greșit, dar văd CSS personalizat care arată similar cu acesta)

.product.category-2 { modificări css personalizate aici }

Mulțumesc că ți-ai luat timp să citești acest lucru și apreciez orice ajutor.

Blake Shiman

31

woocommerce offtopic

Comentarii

Corpul paginii ar trebui să aibă o clasă term-XX, unde XX este ID-ul categoriei. Dacă adaugi .term-XX la începutul regulilor tale CSS, acestea se vor aplica doar acelei categorii.

Jacob Peattie

1 dec. 2017 12:56:03

Toate răspunsurile la întrebare

Comentarii

Vă mulțumesc și tuturor celorlalți pentru ajutor! Am să încerc această soluție când mă întorc la birou și vă voi spune cum a mers. Mulțumesc din nou!

Blake Shiman

2 dec. 2017 04:03:13

Comentarii

WordPress adaugă deja o clasă unică pentru categorii în tag-ul body, term-{id}

Jacob Peattie

1 dec. 2017 12:54:05

Apreciez foarte mult feedback-ul tău. Am văzut acest subiect discutat în alte thread-uri în timp ce căutam un răspuns, dar este puțin peste nivelul meu de înțelegere. Știu cum să adaug elemente în fișierul functions.php și mai ales știu cum să adaug CSS personalizat, dar nu sunt sigur unde și ce anume trebuie schimbat.

De exemplu, ID-ul categoriei de produse este 206. Unde ar trebui să adaug acest ID în fișierul functions.php? După ce am plasat ID-ul categoriei de produse în locul potrivit, unde ar trebui să adaug apoi codul CSS personalizat pentru ca acesta să funcționeze? Există vreo metodă de a face asta folosind doar CSS personalizat? Mulțumesc din nou.

Blake Shiman

1 dec. 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 dec. 2017 12:57:30

Mai sus este un exemplu de cod pe care doresc să-l adaug pentru categoria specificată a paginii de produs.

Blake Shiman

1 dec. 2017 12:58:39

@JacobPeattie OP întreabă în mod specific să adauge un selector pe pagina de produs individual, nu pe pagina de categorii. Din păcate, comentariul tău a ratat complet esența întrebării.

Daniel Fonda

1 dec. 2017 13:11:57

Arată celelalte 1 comentarii

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

Iată soluția mea... Am adăugat următoarele în functions.php din tema mea child:

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;
}

Acum, ori de câte ori vizualizați o pagină de produs individual, o clasă CSS suplimentară pentru fiecare categorie în care se află produsul va fi adăugată în tag-ul <body>.

Apoi, dacă doriți să modificați stilizarea pentru orice pagină de produs individual din categoria 2 sau 4, puteți folosi următorul CSS:

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

MarkPraschan

321

1 dec. 2017 20:41:39

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

Adaugă acest cod în fișierul functions.php https://gist.github.com/thegdshop/3197540

Această modificare va adăuga clasa de categorie corespunzătoare când te afli pe pagina unui singur produs.

Daniel Fonda

336

1 dec. 2017 12:35:33

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

1) Instalează plugin-ul "add custom CSS"

2) Acesta nu va afișa implicit o casetă pentru adăugarea CSS. Trebuie să intri în plugin (partea de jos a bării de administrare) și acolo va fi o întrebare despre "enable custom CSS for following pages" - apoi bifă "products" și vei avea acum o casetă pentru adăugarea CSS în produse individuale când intri în ele prin WooCommerce.

Nu știu dacă poți face acest tip de lucru prin această metodă, eu am avut nevoie de asta pentru a elimina CSS-ul care blochează randarea pe o pagină de produs.

TurboWeb.ro

1

18 mai 2018 22:11:18

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

Adăugați o clasă body legată de categoria de produs în WooCommerce Adăugați acest cod în fișierul 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 mai 2018 22:23:07

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

Am adăugat acest cod în fișierul functions.php accesând

dashboard ...>>> aspect >>> editor >>>> functions.php

Am lipit codul la finalul fișierului

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;
}

Apoi am mers în dashboard ...>>> produse >>>> categorii >>> am trecut mouse-ul peste butonul de editare și am obținut ID-ul

Același ID l-am folosit pe pagina de produs individual

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

A funcționat

Aadii Mughal

171

28 aug. 2019 15:27:22