Agregar CSS personalizado a la página de producto de Woocommerce en una categoría específica

Question

Agregar CSS personalizado a la página de producto de Woocommerce en una categoría específica

1 dic 2017, 12:20:00

Vistas: 20.2K

Votos: 3

He pasado horas investigando cómo hacer esto, pero todo lo que encontré lo explica de una manera que está fuera de mi alcance. No soy muy bueno con la programación, pero sé cómo usar el Inspector de elementos y trabajar desde ahí, aunque eso no me ayuda en este caso.

Quiero usar un diseño/plantilla de página diferente en productos de una categoría específica. Estoy usando WooCommerce y pude usar el inspector de elementos para recrear una página de producto como deseaba. Luego copié el texto en el CSS personalizado y funciona muy bien. Sin embargo, esto termina siendo un cambio Global.

La mayoría de mis páginas de productos se beneficiarían de tener la plantilla predeterminada en lugar de la personalizada que hice. Quiero saber cómo agregar el código dentro de los corchetes para que el CSS personalizado (plantilla personalizada) que he agregado solo se aplique a productos en su categoría designada.

Espero que todo esto tenga sentido. Aquí hay imágenes para darles un ejemplo visual.

Ejemplo de página de producto personalizada en WooCommerce

Ya sé qué CSS personalizado quiero agregar a la plantilla de página de producto modificada. Espero que designar este CSS personalizado a las categorías específicas sea tan simple como agregar corchetes similar a esto (perdón, estoy seguro de que está muy mal pero veo CSS personalizado que se parece a esto)

.product.category-2 { custom css changes here }

Gracias por tomarse el tiempo de leer esto y agradezco toda la ayuda.

Blake Shiman

31

woocommerce fueradetema

Comentarios

El cuerpo debe tener una clase term-XX, donde XX es el ID de la categoría. Si agregas .term-XX al comienzo de tus reglas CSS, estas solo se aplicarán a esa categoría.

Jacob Peattie

1 dic 2017 12:56:03

Todas las respuestas a la pregunta

Comentarios

¡Gracias a ti y a todos los demás por la ayuda! Voy a intentar esto cuando regrese a la oficina y les haré saber cómo me fue. ¡Gracias de nuevo!

Blake Shiman

2 dic 2017 04:03:13

Comentarios

WordPress ya añade una clase única al cuerpo para las categorías, term-{id}

Jacob Peattie

1 dic 2017 12:54:05

Realmente aprecio tu retroalimentación. He visto esto mencionado en otros hilos durante mi búsqueda de una respuesta, pero esto está un poco fuera de mi alcance. Sé cómo añadir cosas al archivo function.php y más aún sé cómo añadir CSS personalizado, pero no estoy seguro de qué cambiar y dónde colocarlo.

Por ejemplo, el ID de la categoría de producto es 206. ¿Dónde agregaría eso en el archivo functions.php? Después de haber colocado el ID de la categoría de producto en el lugar correcto, ¿dónde añadiría entonces el código CSS personalizado para que esto funcione? ¿Hay alguna manera de hacer esto con CSS personalizado? Gracias de nuevo

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

Arriba hay un ejemplo del código que quiero agregar para la categoría específica de la página de producto.

Blake Shiman

1 dic 2017 12:58:39

@JacobPeattie El OP está preguntando específicamente sobre agregar un selector a la página de producto individual, no a la página de categorías. Lamento decir que tu comentario no dio en el blanco.

Daniel Fonda

1 dic 2017 13:11:57

Mostrar los 1 comentarios restantes

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

Aquí está mi solución... Agregué lo siguiente al archivo functions.php de mi tema hijo:

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

Ahora, cada vez que estés viendo una página de producto individual, se agregará una clase CSS adicional para cada categoría en la que esté el producto a la etiqueta <body>.

Luego, si deseas cambiar el estilo para cualquier página de producto individual en las categorías 2 o 4, puedes usar el siguiente 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

Añade esto a tu functions.php https://gist.github.com/thegdshop/3197540

Esto debería agregar la clase de categoría correspondiente cuando estés en la página de un producto individual.

Daniel Fonda

336

1 dic 2017 12:35:33

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

1) Instala el plugin "add custom CSS"

2) Por defecto no mostrará una caja para añadir CSS. Necesitas entrar en el plugin (parte inferior de la barra de administración) y allí habrá una pregunta sobre "habilitar CSS personalizado para las siguientes páginas" - entonces marca "productos" y ahora tendrás una caja para añadir CSS en productos individuales cuando accedas a ellos a través de WooCommerce.

No sé si puedes hacer ese tipo de cosas a través de este método, yo necesitaba esto para eliminar CSS de bloqueo de renderizado en una página de producto.

TurboWeb.ro

1

18 may 2018 22:11:18

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

Añadir una clase body relacionada con la categoría de producto en WooCommerce Añade esto a tu 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 may 2018 22:23:07

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

He añadido este código en el archivo functions.php accediendo a:

panel de control ...>>> apariencia >>> editor >>>> functions.php

Al final del código pegué:

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

Luego fui a:
panel de control ...>>> productos >>>> categorías >>>
pasé el mouse sobre el botón editar y obtuve el ID

Ese mismo ID lo coloqué en la página de producto individual:

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

Funcionó

Aadii Mughal

171

28 ago 2019 15:27:22