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í

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4.6 / 5. Total de votos: 11

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

4 comentarios en “Cómo separar los productos de la tienda por categorías en WooCommerce”

  1. 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.

  2. 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Información base sobre privacidad:
  • Responsable: Fernando Tellado ([email protected])
  • Fin del tratamiento: Moderación de comentarios para evitar spam
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
  • Derechos: Acceso, rectificación, portabilidad, olvido

 

Ir arriba
Ir al contenido