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

[ 26 octubre 2023 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

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

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

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.

Valora este artículo : (1 votos, promedio: 5,00 de 5)

Cargando...