Si buscas en las opciones de personalización de la pagina de la tienda de WooCommerce, del catálogo de productos, verás que puedes mostrar los productos, las categorías con sus subcategorías, incluso el listado de categorías y productos, pero no encontrarás una opción de mostrar productos organizados por categorías.
Y, sinceramente, me parecería el modo más lógico y fácil para los clientes de organizar el catálogo de la tienda online, pero no, por defecto no se puede hacer, salvo que te atrevas a añadir un poco de código que haga la magia por ti.
Índice de contenidos
Un código para gobernarlos a todos … los productos
En realidad el código son 3, porque necesitas darle una serie de instrucciones a WooCommerce para que muestre lo que tú quieres.
El código completo es este:
/* Separar productos por categorias */
//1. Ocultamos los productos de la tienda
add_action( 'pre_get_posts', 'ayudawp_ocultar_productos_tienda_woo' );
function ayudawp_ocultar_productos_tienda_woo( $q ) {
if ( ! $q->is_main_query() ) return;
if ( ! $q->is_post_type_archive() ) return;
if ( ! is_admin() && is_shop() ) {
$q->set( 'post__in', array(0) );
}
remove_action( 'pre_get_posts', 'ayudawp_ocultar_productos_tienda_woo' );
}
//2. Ocultamos el mensaje de error de que no hay productos
remove_action( 'woocommerce_no_products_found', 'wc_no_products_found' );
//3. Agregamos la visualizacion de productos separados por categorias
add_action( 'woocommerce_no_products_found', 'ayudawp_4_productos_cat_woo' );
function ayudawp_4_productos_cat_woo() {
$args = array(
'parent' => 0,
'hide_empty' => true,
'taxonomy' => 'product_cat',
'fields' => 'slugs',
);
$categories = get_categories( $args );
foreach ( $categories as $category_slug ) {
$term_object = get_term_by( 'slug', $category_slug , 'product_cat' );
echo '<hr><h2>' . $term_object->name . '</h2>';
echo do_shortcode( '[products limit="4" columns="4" category="' . $category_slug . '"]' );
echo '<p><a href="' . get_term_link( $category_slug, 'product_cat' ) . '">Ver todos los productos en ' . $term_object->name . '→</a>';
}
}La explicación del código completo, por pasos, es la siguiente:
- Primero hay que ocultar la visualización de productos por defecto, para que no aparezcan «además» de nuestro shortcode, que añadimos al final.
- A continuación hay que ocultar el mensaje de error que daría WooCommerce al no mostrar los productos por defecto.
- Para finalizar configuramos nuestra visualización, que consta de 3 partes fundamentales:
- Separamos con líneas horizontales cada categoría (hr) y ponemos el nombre de la categoría con un H2.
- Lanzamos un shortcode que muestre 4 productos, a 4 columnas de cada categoría con productos.
- Finalizamos con un enlace al listado completo de los productos de cada categoría.
En resumen, conseguimos esta monada…
Mucho mejor ¿no?
¿Dónde añado el código?
En este caso, al ser un asunto de visualización yo apostaría por meterlo al final del archivo functions.php del tema (hijo) activo, pero aquí tienes otras posibilidades de cómo hacerlo…
Cómo y dónde pegar en WordPress códigos PHP, JS, CSS y funciones que encuentres por ahí
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Gracias Fernando. Quedó muy bien.
Saludos.
Hola Fernando,
hace unos días añadí este código a mi functions.php y creia que había funcionado bien, sin embargo, resulta que no solo se aplica a la pagina de la tienda, sino también a las paginas de todas las categorías, y encima de todo, en todas ellas se muestra exactamente lo mismo.
Tras ver esto hoy, decidí eliminar dicho código de mi functions.php pues no funciona de manera adecuada. Cual es mi sorpresa que al borrar el código y guardar el archivo functions, refresco la tienda para comprobar que todo haya vuelto a la normalidad y tachan, sorpresa, al tienda no ha vuelto a la normalidad.
Es cierto que ya no se muestra lo que se menciona en este post, sin embargo ya no se muestra ningún producto en cada categoría!! Sale un aviso «No se encontraron productos que concuerden con la selección.»
¿Qué demonios ha pasado? He comprobado en la lista de productos del backend y mis productos siguen ahí y con sus correspondientes categorías.
Tal vez este código esta tocando algo de la base de datos y se ha eliminado algo de allí? No lo comprendo! Lo único que sé es que mi tienda se ha ido al garete por usar tu código. Antes de ello mi tienda funcionaba a la perfección. Y no he hecho nada más que meter tu código, es decir, no he instalado ningún plugin ni he hecho ninguna actualización ni nada de nada.
Necesito tu ayuda urgentemente para resolver esto pues no puedo dejarlo asi.
Pues no sé qué te pasará, puede ser por algún código del tema activo. Acabo de probarlo de nuevo en una tienda de pruebas y sin problema. Puedes verlo aquí, en la página de tienda y luego haciendo clic en cualquier categoría: https://aulawp.com/woo/shop/ (tienda) | https://aulawp.com/woo/product-category/alimentacion/ (categoría)
Hola Fernando,
pues si que es raro si.
Acabo de ver los links que has puesto, y a ti te funciona perfecto.
Al final lo solucioné haciendo una restauración de copia de seguridad de unos días antes, pero ahora ya no me atrevo a colocar el snippet.
De todas formas, gracias por la atención.