Categoría padre en las clases del body de un producto de WooCommerce

En un proyecto reciente tuve la necesidad de mostrar u ocultar elementos de un producto dependiendo de su categoría padre, una forma simple es hacerlo por CSS, en este artículo veremos cómo agregar una clase a nivel del body con el nombre de la categoría padre.

 

Generalidades

En un artículo anterior habíamos visto como agregar clases adicionales al body de una categoría de WordPress, sin embargo en este artículo veremos cómo hacerlo a nivel de WooCommerce y además la clase padre a la que hace referencia el producto.

 

Resulta final

Al final queremos obtener algo similar a lo que se muestra en la siguiente imagen en donde se muestra una nueva clase CSS a nivel del body con el nombre de la categoría del producto.

 

Agregar el nombre de la categoría padre como clase CSS

El siguiente código agrega el nombre de la clase padre de un producto en la etiqueta HTML body, esto sólo sucede en la página de detalle de producto.

add_filter( 'body_class', 'dcms_add_category_class' );
function dcms_add_category_class( $classes ) {
        if ( is_product() ) {
                global $post;
                $categories = get_the_terms( $post->ID, 'product_cat' );

                $parent_category = '';
                if ( is_array( $categories ) ) {
                        $main_category_id = $categories[0]->term_id ?? 0;

                        if ( $main_category_id > 0 ) {
                                $parent_categories = get_term_parents_list( $main_category_id, 'product_cat', [
                                        'link'      => false,
                                        'separator' => '|',
                                        'inclusive' => false,
                                        'format'    => 'slug'
                                ] );

                                if ( ! is_wp_error( $parent_categories ) ) {
                                        $parent_category = explode( '|', $parent_categories )[0] ?? '';
                                }
                        }
                }
                if ( ! empty( $parent_category ) ) {
                        $classes[] = 'category-' . $parent_category;
                }
        }

        return $classes;
}

Puedes agregar el siguiente código como parte de tu archivo functions.php de tu tema hijo.

 

Agregar las categorías del producto como clases CSS

Si no necesitas la categoría padre y si sólo necesitas agregar las categorías a las cuales esta asignado el producto, entonces puedes usar el siguiente código:

add_filter('body_class','dcms_add_category_class');
function dcms_add_category_class( $classes ) {
        if ( is_product() ) {
                global $post;
                $categories = get_the_terms( $post->ID, 'product_cat' );

                 foreach($categories as $category) {
                $classes[] = 'category-' . $category->slug;
                }
        }
        return $classes;
}

Puedes agregar el siguiente código como parte de tu archivo functions.php de tu tema hijo.

 

Conclusión

Las clases CSS a nivel de la etiqueta HTML body te pueden servir para estilizar el producto, en este artículo hemos visto como agregar la clase de categoría, tanto de categoría padre como de categorías a la que pertenece el producto.

 

La entrada Categoría padre en las clases del body de un producto de WooCommerce es un artículo reciente del sitio DecodeCMS.