Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Mostrar la Categorías, Subcategorías y Productos en Listas Separadas en WooCommerce

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Oscar Abad Folgueira (you can also view the original English article)

Final product image
What You'll Be Creating

WooCommerce te da algunas opciones en cuanto a lo que puedes mostrar en las páginas de archivo:

  • productos
  • categorías (en la página principal de la tienda) o subcategorías (en páginas de categoría)
  • ambos productos y categorías.

Cuando estoy configurando una tienda, normalmente selecciono la tercera opción: productos y categorías/subcategorías. Esto significa que los visitantes de mi tienda pueden seleccionar productos de la página de inicio o refinar la búsqueda haciendo clic en un archivo de la categoría de producto.

Sin embargo, hay un problema con este enfoque: muestra las categorías/subcategorías, con ninguna separación entre los dos. Esto significa que si las imágenes de tu producto tienen dimensiones diferentes, el diseño puede parecer un poco desordenado. Incluso si tus imágenes son del mismo tamaño, si una de las líneas en la página de archivo incluye categorías y productos, la ausencia de un botón de 'Agregar a carrito' para las categorías hace que la fila se vea desordenada, ya que no todos sus elementos tienen las mismas dimensiones.

En este tutorial te voy a enseñar cómo mostrar categorías en un a lista separada antes de mostrar los productos.

Para hacer esto, sigue estos cuatro pasos:

  1. Identifica el código que WooCommerce usa para mostrar las categorías y subcategorías en las páginas de archivo.
  2. Crea un plugin con tu código.
  3. Escribe una función para poner las categorías o subcategorías antes de la lista de productos.
  4. Dale estilo.

Pero antes de empezar, necesitarás una instalación de WooCommerce con algunos productos añadidos, y categorías y subcategorías de productos configuradas.

Que Vas a Necesitar

Para seguir e tutorial, necesitarás:

  • Una instalación en desarrollo de WordPress.
  • Un editor de código.
  • WooCommerce instalado y activado.
  • Añadir productos —he importado los datos de producto de demostración que vienen con WooCommerce; para detalles de cómo hacerlo, consulta a esta guía.
  • Un tema compatible con WooCommerce activado - yo estoy usando Storefront.

Antes De Empezar: Las Opciones Por Defecto

Echemos un vistazo a lo que nos da WooCommerce por defecto.

He comenzado añadiendo algunas imágenes las categorías de mis productos y subcategorías, ya que el contenido de demostración de WooCommerce no las incluye. He usado una imagen de uno de los productos para cada categoría o subcategoría, como puedes ver en la captura de pantalla:

Product categories screen in WordPress admin with category images added

Ahora vamos a echar un vistazo a como WooCommerce muestra las categorías de producto y productos en las páginas de archivo.

Si no lo has hecho ya, ve a WooCommerce > Ajustes, selecciona Productos y elige la opción Mostrar. En las opciones Visualización de la página de la tiendaVisualización de categoría por defecto, selecciona Mostrar categorías y productos.

WooCommerce product display settings screen

Haz click en el botón Guardar los cambios para guardar tus ajustes y visita la página de la tienda. La mía tiene este aspecto:

The main shop page without any changes

Como ocurre, ya que tengo tres categorías de productos y mis imágenes de categoría son del mismo tamaño que mis imágenes de producto, se ve muy bien. Pero aquí tenemos uno de los archivos de la categoría de producto:

The Music category archive page without any changes

Debido a que esta categoría tiene dos subcategorías, el primer producto se muestra junto a el en una cuadrícula de tres elementos. Yo quiero hacer que mis categorías y subcategorías destaquen más y que simplemente se muestren separadas de la lista de productos. Vamos a hacerlo.

Identificar el Código que Usa WooCommerce para Mostrar Categorías y productos en Archivos

El primer paso es identificar cómo WooCommerce muestra las categorías y subcategorías. Así que vamos a profundizar en el código fuente de WooCommerce para encontrar la función que nos interesa.

El archivo que WooCommerce utiliza para mostrar páginas de archivo es archivo-product.php, que se encuentra en el directorio templates.

Dentro de ese archivo, puede encontrar este código, que muestra las categorías y productos:

Así que hay una función woocommerce_product_subcategories() que muestra las categorías o subcategorías antes de ejecutar el bucle de salida de los productos.

La función es conectable, loque significa que podríamos reemplazarla en nuestro tema. Lamentablemente eso no funciona bastante bien como WooCommerce tiene un estilo integrado para borrar artículos, que aparecerían al principio de una fila con la opción predeterminada.

Para que en vez de eso, no se muestren las categorías y subcategorías en nuestras páginas de archivo, para que se muestren sólo los productos. Vamos a crear una nueva función que muestre las categorías o subcategorías de productos, y engancharla a la acción woocommerce_before_shop_loop, asegurándonos de que usamos una prioridad alta para que se lance después de las funciones que ya están enganchadas a la acción.

Nota: Debido a WooCommerce agrega claros a cada listado de productos de terceros, nosotros no podemos usar la función de woocommerce_product_subcategories() o una versión editada de la misma para mostrar las categorías. Esto es porque borrará la tercero, sexta (y así sucesivamente) categoría o producto en la lista, incluso cuando utilizamos esta función para mostrar categorías por separado. Podríamos intentar reemplazar eso, pero es más sencillo escribir nuestra propia función.

Así que vamos a crear un plugin que haga eso.

Crear el Plugin

En tu directorio wp-content/plugins, crear una nueva carpeta y asígnale un nombre único. Llamo a la mía tutsplus-separate-products-categories-in-archives. Dentro, crea un nuevo fichero con un nombre único. Yo estoy usando el mismo nombre: tutsplus-separate-products-categories-in-archives.php.

Abre tu archivo y añade este código:

Puede editar los detalles de autor ya que este plugin lo estás escribiendo tu. Guardar el archivo y activa el plugin mediante el administrador de WordPress.

Escribir Nuestra Función

Ahora vamos a escribir la función. Pero antes de empezar, desactiva el listado de categorías en las pantallas de administración. Ve a WooCommerce > Ajustes, selecciona la pestaña Productos y la opción Mostrar. Selecciona Visualizar productos en las opciones Visualización de la página de la tiendaVisualización de categoría por defecto. Guardar los cambios.

La página de la tienda ahora se verá algo como esto:

The main shop page with just products displayed

En el archivo de tu plugin, añade esto:

Ahora añade este código dentro de la función:

Echemos un vistazo a lo que hace esa función:

  • Identifica el objeto consultado actual y lo define como $parentid
  • Utiliza get_terms() para identificar términos con el artículo consultado actualmente como su padre. Si esta es la página principal de la tienda, devolverá a categorías de nivel superior; Si se trata de un archivo de categoría, devolverán subcategorías.
  • A continuación comprueba si hay cualquier término, antes de abrir un bucle foreach y un elemento ul.
  • Para cada término, crea un elemento li y luego muestra la imagen de la categoría con woocommerce_subcatgeory_thumbnail(), seguido del nombre de categoría en un enlace a su archivo.

Ahora guarda el archivo y actualiza la página principal de la tienda. Mina se parece a esto:

Main shop page - categories are separate but too big and with list styling bullets etc

Se muestran las categorías, pero necesitan algo de estilo. Vamos a hacerlo.

Dar Estilo al Listado de Categoría

Para agregar estilo, necesitamos una hoja de estilo dentro de nuestro plugin, que tendremos que inyectar.

En la carpeta de tu plugin, crea una carpeta llamada css y dentro de esta, creamos un archivo llamado style.css.

Ahora, en el archivo de tu plugin, agrega esto encima de la función que ya has creado:

Este encola correctamente la hoja de estilos que acabas de crear.

Ahora abre tu hoja de estilo y agregua el código siguiente. WooCommerce utiliza estilo mobile first, por lo que es lo que también vamos a utilizar.

He copiado el ancho exacto y los márgenes del estilo utilizado por WooCommerce.

Ahora revise la página principal de tu tienda de nuevo. Aquí está mía:

The main shop page Categories are above products and styled consistently in a grid

Aquí está el archivo de la categoría Música:

The Music archive Two subcategories are above the 3 wide grid of products

Y aquí está como se ve en pantallas de menor tamaño:

The categories on narrower screens full width not in a grid

Resumen

Las categorías de producto son una gran característica de WooCommerce, pero la manera en que se muestran no siempre es la ideal. En este tutorial, has aprendido cómo crear un plugin que muestra las categorías o subcategorías por separado de la lista de productos, y luego has dado estilo a tus listados de categoría.

Podrías utilizar este código para generar una lista de categorías o subcategorías en otras partes de la página (por ejemplo debajo de los productos), enganchando la función  a un gancho de acción diferente dentro del archivo de plantilla de WooCommerce.

Si actualmente tienes una tienda online que quieres extender o si estás buscando plugins adicionales para estudiar cómo se relacionan con WooCommerce, no dudes en ver qué plugins están disponibles en la Tienda de Envato.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.