Cómo separar los productos de la tienda por categorías en WooCommerce

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.

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 . '&rarr;</a>';
}
}

La explicación del código completo, por pasos, es la siguiente:

1. 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.
2. A continuación hay que ocultar el mensaje de error que daría WooCommerce al no mostrar los productos por defecto.
3. Para finalizar configuramos nuestra visualización, que consta de 3 partes fundamentales:
   1. Separamos con líneas horizontales cada categoría (hr) y ponemos el nombre de la categoría con un H2.
   2. Lanzamos un shortcode que muestre 4 productos, a 4 columnas de cada categoría con productos.
   3. 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!