Tips: Identificar categorías de productos en woocommerce para poder usar css

11 de febrero de 2021
Posted in DISEÑO, TIPS
11 de febrero de 2021 Riskoo

Tips: Identificar categorías de productos en woocommerce para poder usar css

Uno de los problemas cuando intentamos personalizar una categoría es como poder identificar la categoría en el css para poder poner diseño de forma individual.

Es un caso que me ha pasado muchas veces y por eso lo pongo por aquí para que lo podáis tener en cuenta.

Yo siempre uso para añadir código el plugin snippets o fragmentos , lo hago para que utilizando plantillas hijo y esto cada vez que actualice la plantilla no pierda la información.

Pues bien, la idea es poder añadir a la página en particular una clase que ponga la id de su categoría, con esto lograremos poder usarlo en nuestro código css.

add_filter( 'body_class','miclase' );
function miclase( $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;
}

Con esto lograremos que nos aparezca algo así… .product-in-cat-2 por ejemplo y poder usarlo en css como en este ejemplo:

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