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
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.
Artículos Relacionados
(1 votos, promedio: 5,00 de 5)
Cargando…