Mostrar categoría en loop de productos

Snippet para poder mostrar la categoría junto al nombre del producto en el loop de productos de WooCommerce


por

Esta semana me han pedido para una tienda online en WooCommerce, mostrar el nombre de la categoría en el loop de productos (en últimos productos de la home y la página de categoría), junto al nombre y el precio.

categoria loop productos

Creo que hay algunas plantillas que ya lo preven, pero no era el caso, así que tuve que buscar alguna función que lo añadiera.

Os la dejo por si alguien necesita lo mismo y así se ahorra la búsqueda 😉

Lo que hace es sustituir el template estándar de WooCommerce para mostrar el título de producto en el loop y sustituirlo por uno personalizado que incluye el array de categorías de producto, por lo que si pertenece a más de una se mostrarán todas.

¡Espero que te sea útil!

¿Eres implementador o desarrollador WordPress?

En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:

ACCEDER AHORA

Comentarios

24 respuestas a «Mostrar categoría en loop de productos»

  1. Avatar de Amador

    |

    Buenos días; en primer lugar gracias por su aportación a todos lo que » no sabemos muy bien por donde vamos». Hago, mejor dicho, intento hacer una tienda virtual para aprender, el fin no es ponerla en funcionamiento solo, como he dicho, aprender cosas como pasatiempos.
    He copiado el código, de poner categoría en loop, en archivo functions.php de mi tema Divi-hijo, ( en wordpress+woocommerce), y me aparece un error, (un cuadrito rojo con una cruz), en la linea 6. Lo he guardado y he intentado visualizar la página tienda y evidentemente sale error http 500. Lo he quitado y todo ha vuelto a la normalidad.
    ¿ Qué puede ser ?.
    Gracias de nuevo por su atención. Saludos.

    1. Avatar de esther

      |

      Hola Amador,
      Si, efectivamente había un problema con algunos caracteres que aparecían mal en el post. Ya lo he corregido, prueba de copiar/pegar ahora, te debería funcionar.

      Saludos,

      1. Avatar de Amador

        |

        Hola Esther, gracias por tu rápida respuesta. Ya lo he probado, se puede ver en página tienda, fantástico porque ya no da error y he conseguido, bueno has conseguido, que aparezca más información en el loop. Pero hay un problema, no sale la categoría, sale de nuevo el nombre del producto, supongo que es por la variable, no es la adecuada. Por cierto y hablando de variables con la adecuada podría hacerse perfectamente para las etiquetas ó atributos, ¿no?.
        Gracias. Saludos.

        1. Avatar de Amador

          |

          Hola de nuevo Esther, comentar que aparece dos veces el nombre porque las instrucción remove-action no la he puesto. No quería sustituir el nombre del producto quería añadir más información en el loop.
          Saludos.

          1. Avatar de Alejandro

            |

            hola amigo amador, pudo usted resolver el problema del nombre del producto duplicado?, ya que tengo el mismo problema.
            Saludos

          2. Avatar de esther

            |

            Hola Alejandro,
            ¿Has añadido la primera línea de todas, la de remove_action? A Amador se le duplicaba porque no le faltaba esa línea.

            Saludos!

  2. Avatar de Francisco Naranjo

    |

    Estoy intentando hacer que la pagina de productos me muestre lis productos en una sola columna con varias filas.
    Por otro lado existen varias categorías y subcategorias que quiero que se muestren en 2 columnas.
    Que archivo PHP he de modificar?
    Mi tema es Storefront.
    Muchas gracias por cualquier ayuda .

    1. Avatar de esther

      |

      Hola Francisco!
      No es necesario que modifiques la plantilla de Storefront, puedes hacer utilizando los hooks de WooCommerce, en el archivo functions.php por ejemplo o en un plugin tipo «Code Snippets».
      En el caso que comentas, sería modificar el número de columnas del loop de WooCommerce en función de la categoría, añadiendo un condicional. Por ejemplo:

      add_filter('loop_shop_columns', 'loop_columns');
      if (!function_exists('loop_columns')) {
      function loop_columns() {
      if ( is_product_category( 'nombredelacategoria' ) ) {
      return 2;
      } else {
      return 1;
      }
      }
      }

      Espero que te sirva!
      Saludos,

  3. Avatar de Mauro

    |

    Hola primero que todo excelente blog queria preguntarte si genesis tiene un child thee que muestre la descripcion de la categoria y no la mantenga oculta como la mayoria de themes.

    1. Avatar de esther

      |

      Hola Mauro!
      Para mostrar la descripción de la categoría no hace falta que el child theme lo lleve preparado, puedes utilizar cualquiera que te guste y añadir el código necesario para que la muestre, por ejemplo este que indico a continuación:

      function display_category_archives_description () {
      if (is_category() ) {
      echo category_description( $category-id );
      }}
      add_action( 'genesis_before_loop', 'display_category_archives_description');
      /**
      * @author Brad Dalton - WP Sites
      *
      * @link http://wpsites.net/web-design/display-image-on-all-category-pages/
      */

      Saludos!

  4. Avatar de reynaldo

    |

    pero no dices donde poner ese codigo, hay que ponerko to en un lugar o hay que dividirlo?

    1. Avatar de esther

      |

      Hola! Puedes añadirlo en el archivo functions.php de tu theme o en un plugin de snippets o uno propio. En este artículo tienes más información sobre este tema: https://www.esthersola.com/modificar-functions-code-snippets/
      Saludos!

  5. Avatar de Matias

    |

    Hola com estas, tengo un problema que me esta volviendo loco!! tengo un wordpress con woocommerce, en el menu tengo puesto la categoria del producto, cuando hago click en 1 categoria me lleva a todos los productos y no a la categoria que le pido. Ya entre a woocommerce personalizacion y modifique para que me muestre las categorias, pero no pasa nada, agradeceria tu ayuda, muchas gracias

    1. Avatar de esther

      |

      Hola Matías!
      Es complicado de saber el problema sin tener más información. En la personalización puedes modificar que en la página de la tienda aparezcan categorías/subcategorías, productos o ambos, pero es independiente de que tengas una categoría en concreto en el menú.
      En tu caso no se cual podría ser el problema…

      Saludos!

  6. Avatar de Rocio

    |

    Hola!

    Yo tambien tengo que mostrar el nombre de la categoría en el loop de productos de la página de tienda, junto al nombre y el precio para una tienda en WooCommerce. Estoy tratando de utilizar el código que ponen al principio añadiéndolo al functions.php de mi tema hijo, pero no hay manera, al guardar cambios me sale el siguiente error:
    «Los cambios en tu código PHP se han revertido debido a un error en la línea 162 del archivo wp-content/themes/generatepress_child/functions.php. Por favor, arréglalo y trata de guardar de nuevo.
    syntax error, unexpected end of file, expecting elseif (T_ELSEIF) or else (T_ELSE) or endif (T_ENDIF)»
    A alguien le ocurre lo mismo? o alguien me puede ayudar por favor? no tengo mucha idea de php y me estoy volviendo loca! :-s

    1. Avatar de esther

      |

      Hola Rocio!
      El código aparecía cortado, disculpa, ya lo he corregido para que salga completo.

      Saludos!

      1. Avatar de Rocio

        |

        Muchísimas gracias Esther!!
        Ya sí que funciona correctamente, que ayuda tan enorme me acabas de dar!
        Besote

        1. Avatar de esther

          |

          Genial Rocío! Un abrazo!

  7. Avatar de carlos

    |

    Hola, soy muy nuevo en wordpress y woocommerce y trato de aprender por mi cuenta, pero me gustaria poder mostrar el nombre de la categoría y subcategoría en el loop de productos y debajo de cada categoria aparezcan los productos que pertenecen a ella… Podrias ayudarme por favor

    1. Avatar de esther

      |

      Hola!
      En WooCommerce tienes una opción para que la página de la tienda muestre subcategorías o productos o ambos. ¿La opción de ambos a la vez te serviría?

      Saludos!

  8. Avatar de Diego

    |

    Hola Esther!
    Muchas gracias por tu blog. Una consulta: cómo se podrá dejar el título de la categoría linkeable a la misma categoría? Actualmente solo aparece el nombre pero al pincharlo se va al producto.
    Gracias desde ya!

    1. Avatar de esther

      |

      Hola Diego!
      No he tenido tiempo de probarlo, pero yo lo que haría es guardar en el array de cat_links otro valor con el slug de la categoría y así en lugar de hacer un echo $cat_links[0];, montar el enlace completo «‘.$cat_links[0].’«;
      Yo probaría con algo así a ver si te funciona.

      Saludos!

  9. Avatar de Juan Roldán

    |

    Hola Esther,
    Muchas gracias por el código. Lo he copiado tal cual y pegado usando el plugin de «Code Snippets», me aparece la categoría del producto pero me aparece doble el nombre del producto, por ejemplo (categoría = Medidores de flujo, producto = OPTIMASS) :
    Medidores de flujo
    OPTIMASS
    OPTIMASS
    Es importante señalar que mis productos tienen categoría y subcategoría (Medidores de flujo » Medidores de flujo másicos tipo coriolis » OPTIMASS), según dice el artículo, y cito: «incluye el array de categorías de producto, por lo que si pertenece a más de una se mostrarán todas.», no sucede así
    Estoy haciendo esto en un ambiente de pruebas para posteriormente llevarlo a producción.
    Pruebas: https://www.staging5.parrillasyasadoresde.com/
    Producción: https://capsamexico.com.mx/
    Me podrías ayudar con el error?
    Gracias.

    1. Avatar de esther

      |

      Hola Juan!

      Prueba a sustituir en la función «echo $cat_links[0];» por lo siguiente, para recorrer el array y mostrar todos los valores:

      foreach ($cat_links as $value) {
      echo $value." ";
      }

      Saludos!