Ocultar categorías que no están activas en widget de categorías WooCommerce

[ 8 abril 2019 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Básico] [ ]

WooCommerce tiene un widget de categorías de productos que podemos usar en nuestro sitio web, sin embargo este widget siempre muestra todas las categorías, en algunos casos nos puede interesar sólo mostrar las categorías o subcategorías actuales.

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

Código CSS para ocultar las categorías no activas

Para ocultar las categorías o subcategorías que no están activas puedes usar el siguiente código CSS:


.single-product .widget_product_categories ul.product-categories > li{
	display:none;
}

.single-product .widget_product_categories ul.product-categories > li.current-cat-parent,
.single-product .widget_product_categories ul.product-categories > li.current-cat {
	display:block;
}

En el código anterior:

El código se se aplica a la página de detalle de producto
Ocultamos todos los ítems de categoría del widget de categorías de productos
Mostramos sólo los ítems de categoría que se muestran actualmente en la página, ya sea un único ítem o un ítem padre

Puedes agregar este código al final del archivo style.css de tu child-theme

Conclusión

Puedes hacer modificaciones de ocultar o mostrar elementos de manera simple al widget que viene por defecto con WooCommerce y evitar usar un plugin adicional para obtener la misma funcionalidad de ocultar categorías que no estén activas.

¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores.