Cómo mostrar las categorías de productos en la página de tu tienda WooCommerce

Navegar por las configuraciones de WooCommerce puede ser desalentador tanto para los usuarios nuevos como para los experimentados. Esta completa guía proporciona instrucciones claras, paso a paso, sobre cómo mostrar categorías de productos en la página de tu tienda en WooCommerce. Al desmitificar estos procesos, el artículo garantiza que cada propietario de una tienda WooCommerce pueda mejorar la funcionalidad de su sitio y la experiencia del usuario de forma eficaz.

PREGUNTAS FRECUENTES

Configurar tus categorías

En WooCommerce, organizar tus productos en categorías es un paso esencial para ayudar a tus clientes a navegar por tu tienda. Las categorías actúan como una jerarquía para estructurar tu tienda y agrupar artículos similares. Al igual que los capítulos de un libro, las categorías facilitan la búsqueda de productos en función de su tipo. Empezarás creando una categoría Padre, que sirve como un grupo amplio: piensa en ella como un capítulo principal. Debajo de ésta, puedes añadir Subcategorías para desglosar aún más los productos. Esta sección te guía para añadir nuevas categorías a tu tienda y realizar ajustes en las existentes.

Añadir nuevas categorías de productos

Cuando gestiones las categorías, ve a Productos > Categorías, donde verás las opciones para Añadir una nueva categoría o personalizar las existentes.

Para añadir una nueva categoría de productos en WooCommerce:

1. Navega hasta Productos > Categorías en tu panel de WordPress.
2. En la sección Añadir nueva categoría:

• Nombre: Introduce un nombre para tu categoría.
• Slug: Introduce una versión URL amigable del nombre (opcional).
• Padre: Si procede, elige una categoría padre para crear una jerarquía.
• Descripción: Escribe una breve descripción de tu categoría.
• Tipo de pantalla: Selecciona el tipo de visualización para esta categoría. Esto determina lo que se muestra en la página de destino de la categoría.
• Miniatura: Sube una imagen que represente esta categoría.

Utilizando el tipo Mostrar, controlas la visibilidad de tus productos en la página de categoría. Puedes mostrar sólo productos, subcategorías o una combinación de ambos.

Después de rellenar los datos, haz clic en el botón Añadir nueva categoría para guardar tu nueva categoría.

Editar categorías existentes

Para editar una categoría de producto existente:

1. Ve a Productos > Categorías desde tu panel de control de WordPress.
2. Verás una lista de categorías. Pasa el ratón por encima de la categoría que quieras editar y haz clic en Editar.
   
3. Desde aquí, puedes cambiar los de la categoría:

• Nombre
• Babosa
• Padres
• Descripción
• Tipo de pantalla
• La miniatura asociada

Asegúrate de pulsar el botón Actualizar para aplicar los cambios.

Cómo mostrar las categorías de productos en la página de la tienda en WooCommerce

Al configurar tu tienda, mostrar categorías de productos en la página de la tienda en WooCommerce mejora la navegación del usuario y el descubrimiento de productos. Veamos los distintos métodos para mostrar las categorías de productos en la página de tu tienda.

Usar la configuración de WooCommerce

Para utilizar la configuración de WooCommerce para mostrar las categorías en la página de tu tienda, empieza por iniciar sesión en el panel de control de WordPress:

1. Navega hasta Apariencia > Personalizar.
   
2. En el menú Personalizador, haz clic en WooCommerce y luego selecciona Catálogo de productos.
3. Aquí, encuentra la opción de visualización de la página Tienda. Haz clic en el menú desplegable y podrás elegir entre:

• Mostrar productos
• Mostrar categorías
• Mostrar categorías y productos

Selecciona la opción de visualización deseada para la página de tu tienda. Este método predeterminado es sencillo y no requiere ningún conocimiento de codificación.

Personalizar la página de tu tienda

Para tener más control sobre el diseño y la forma de mostrar las categorías en la página de tu tienda, puedes optar por crear una nueva página que puedes editar en el editor de bloques. Este método te permite mostrar tus productos y categorías de productos de forma similar a la página predeterminada de la tienda de WooCommerce.

1. Ve a Páginas en tu panel de control y selecciona Añadir nueva.
2. Diseña la página de tu tienda utilizando el editor que proporciona tu tema. Puedes utilizar bloques o un constructor de páginas si tu tema lo admite. Diferentes bloques de producto, filtros y códigos cortos de WooCommerce pueden ayudarte a añadir otros detalles del producto a la página.
   
3. Inserta el bloque Productos por categoría o Categorías de productos .
   
4. Cuando estés satisfecho con tu diseño, Publica la página y utilízala como una página de tienda.

Personalizar con shortcodes

Además de los bloques incorporados, también puedes personalizar la página de tu tienda utilizando los códigos cortos de WooCommerce para mostrar categorías específicas:

1. Edita la página en la que quieres que aparezcan las categorías o crea una nueva página para mostrar los productos, como la página de una tienda.
2. Añade un bloque Shortcode para insertar el shortcode [product_categories] en tu página.
   
3. Puedes adaptar el shortcode utilizando atributos como:

• número: para establecer un límite en el número de categorías mostradas.
• columnas: para fijar el número de columnas.
• orderby: para ordenar las categorías por un atributo específico como el nombre o el slug.
• orden: para establecer la dirección del orden, ascendente o descendente.
• ids: para mostrar IDs de categorías concretas.
• padre: para mostrar sólo las categorías de una determinada categoría padre.
• hide_empty: para ocultar las categorías sin productos.
• slug: para mostrar las categorías por su slug.

Por ejemplo:

[product_categories number="12" columns="4" orderby="name" order="ASC"]

Este shortcode muestra hasta doce categorías en cuatro columnas, con las categorías ordenadas por nombre en orden ascendente.

Looking to sell online?

Create your custom online store in minutes with 10Web AI Ecommerce Website Builder and take your business online.

Generate Your Store

Opciones avanzadas de visualización de categorías

También puedes mostrar categorías de productos en la página de tu tienda WooCommerce utilizando widgets, plugins, temas o código personalizado.

Modificar con widgets

Puedes aprovechar Widgets para mostrar categorías de productos en la página de tu tienda. Por ejemplo, el Widget Categorías de productos te permite colocar una lista o un desplegable de categorías en la barra lateral de tu tienda. Para añadirlo, ve a Apariencia > Widgets y arrastra el Widget Categorías de productos a la barra lateral o área de widgets deseada.

Aquí puedes elegir mostrar el recuento de productos por categoría u ocultar las categorías vacías.

Utilizar plugins para funciones adicionales

Numerosos plugins y temas de WooCommerce ofrecen funciones ampliadas para mostrar las categorías en la página de la tienda. Estos plugins pueden crear diseños más dinámicos, como cuadrículas o sliders, y a menudo incluyen funciones como el filtrado AJAX para ayudar a los clientes a encontrar las categorías más rápidamente. Explora el mercado de WooCommerce o los directorios de plugins de WordPress para encontrar las opciones adecuadas para mostrar las categorías exactamente como quieres.

Personalizar con código

Si te sientes cómodo creando un tema hijo y modificando los archivos del tema, puedes añadir un shortcode personalizado o modificar los ganchos de WooCommerce para ajustar cómo y dónde aparecen las categorías. Recuerda que este enfoque es mejor para quienes tienen conocimientos de codificación, ya que un código incorrecto puede alterar la funcionalidad de tu sitio. Antes de empezar a hacer cambios en los archivos de tu sitio, es mejor hacer una copia de seguridad.

Método 1: Modificar archive-product.php

Si tu tema hijo aún no tiene un archivo archive-product.php, puedes crearlo copiándolo del directorio de plantillas de WooCommerce en la carpeta del plugin de WooCommerce (woocommerce/templates/) al directorio de tu tema hijo, manteniendo la estructura de directorios.

He aquí un ejemplo básico de cómo podrías modificar este archivo:

1. Copiar archive-product.php: Copia este archivo de wp-content/plugins/woocommerce/templates/archive-product.php a wp-content/themes/your-child-theme/woocommerce/archive-product.php.
2. Edita el archivo para incluir las categorías de productos: Puedes añadir el siguiente fragmento en la parte superior del archivo o donde quieras que aparezcan las categorías:

   <?php
   echo '<div class="product-categories">';
   echo do_shortcode('[product_categories number="0" parent="0"]');
   echo '</div>';
   ?>

   Utiliza el shortcode [product_categories] para mostrar todas las categorías de productos de nivel superior. Puedes ajustar el atributo number para limitar el número de categorías mostradas, o eliminarlo para mostrar todas las categorías.

Método 2: Utiliza los ganchos de WooCommerce en functions.php

Este método no requiere anular los archivos de plantilla y suele ser más seguro para futuras actualizaciones de WooCommerce. Añade el siguiente fragmento al archivo functions.php de tu tema hijo:

add_action('woocommerce_before_shop_loop', 'display_product_categories', 15);

function display_product_categories() {
    if (is_shop() || is_product_category()) {
        echo do_shortcode('[product_categories number="0" parent="0"]');
    }
}

Esta función se conecta a woocommerce_before_shop_loop, que se ejecuta antes de que se muestren los productos en la página de la tienda. Comprueba si la página actual es la tienda o una página de categorías de productos, y si es así, muestra las categorías de productos.

Elegir dónde insertar:

• Para modificar el archivo de plantilla (archive-product.php): Este método te permite controlar con precisión dónde aparecerán las categorías en relación con otros elementos de la página.
• Para utilizar el archivo functions.php: Este método es generalmente más seguro, ya que mantiene los cambios independientes de la estructura de la plantilla de WooCommerce, que puede cambiar con las actualizaciones.

Estas modificaciones deberían ayudarte a mostrar eficazmente las categorías de productos en la página de tu tienda WooCommerce. Si necesitas más personalización, puede que tengas que ajustar los atributos del shortcode o añadir estilos adicionales para adaptarlos al diseño de tu sitio.

Mejorar la disposición visual

Al personalizar tu tienda WooCommerce, una presentación visualmente atractiva de las categorías de productos puede tener un impacto significativo en la participación de los usuarios y en las ventas.

Añadir imágenes de categoría

Para que tus categorías de productos destaquen, es imprescindible añadir imágenes de categoría. Esta es una forma sencilla pero eficaz de guiar a los clientes a través de las ofertas de tu tienda, como ropa, camisetas, pantalones y accesorios. Ve a Productos > Categorías en tu panel de WordPress. Aquí puedes editar cada Categoría para subir una Miniatura, asegurando la coherencia visual y el atractivo en la página de inicio de tu tienda.

Personalizar la apariencia con las opciones del tema

El aspecto del diseño de la página de tu tienda depende en gran medida de tu tema activo. Temas como Astra ofrecen ricas capacidades de personalización específicas para tiendas WooCommerce.

Si vas a Apariencia > Personalizar, puedes acceder a las opciones del tema para modificar la plantilla de tu página de inicio y el diseño general. Aquí puedes ajustar la forma en que se muestran las categorías de tus productos en la página de tu tienda sin eclipsar los productos individuales.

Optimización para motores de búsqueda y conversiones

Al configurar tu tienda WooCommerce, asegurarse de que tu sitio funciona correctamente y de que las categorías de productos son compatibles con el SEO es clave para aumentar la visibilidad y las conversiones. WooCommerce te permite añadir descripciones de producto enriquecidas para tus categorías. Esto no sólo es útil desde la perspectiva del comprador, sino también desde el punto de vista del SEO. Asegúrate de que estas descripciones sean ricas en palabras clave e informativas, ya que aparecen junto con la categoría de producto en la página de la tienda. Esto puede influir tanto en las clasificaciones de búsqueda como en las decisiones de los clientes. Para la navegación, es importante tener en cuenta cómo los clientes y los rastreadores de búsqueda encontrarán los productos dentro de tu tienda. Crear un menú lógico con etiquetas de categoría claras puede mejorar la experiencia del usuario y la rastreabilidad del sitio. Utiliza migas de pan para facilitar la navegación y reforzar la estructura de tu sitio para los motores de búsqueda.

Asegúrate de que tus categorías más populares -o las que están a la venta- estén resaltadas. La popularidad y las ventas impulsan las conversiones, por lo que hacerlas fácilmente accesibles puede beneficiar a tu tienda. Por último, ¡no olvides los análisis! Revisa regularmente qué categorías funcionan bien en términos de resultados de búsqueda y conversiones. Utiliza estos datos para ajustar tu estrategia SEO para tus categorías de productos de WooCommerce.

Solución de problemas comunes

Al configurar tu sitio WooCommerce para mostrar las categorías de productos en la página de la tienda, es posible que te encuentres con algunos problemas. A continuación te explicamos cómo identificar y resolver algunos de los problemas más comunes.

Problemas de visualización de categorías

Si tus categorías de productos no aparecen como esperas en la página de tu tienda, asegúrate primero de que los ajustes de visualización están correctamente configurados. Ve a Apariencia > Personalizar > WooCommerce y selecciona Catálogo de productos. Si tus categorías de productos no aparecen como esperabas en la página de tu tienda, asegúrate primero de que los ajustes de visualización están configurados correctamente. Ve a Apariencia > Personalizar > WooCommerce y selecciona Catálogo de productos. Deberías ver la opción de visualización de la página de la tienda.

Asegúrate de que tienes seleccionado el método de visualización deseado, ya sea Mostrar productos, Mostrar categorías o Mostrar categorías y productos. En algunos casos, después de configurar las categorías, éstas siguen sin aparecer debido a problemas de caché. Borra la caché de tu sitio web desde el panel de control de tu alojamiento y desde el navegador para ver si se resuelve el problema. Además, comprueba la integridad del código en el archivo functions.php de tu tema, si has añadido algún código relacionado con la visualización de categorías.

Conflictos con temas y plugins

En ocasiones, el problema no reside en el propio WooCommerce, sino que se debe a conflictos con otros temas o plugins. Para solucionar conflictos de temas, prueba a cambiar a un tema predeterminado de WordPress, como Twenty Twenty-One, y comprueba si se resuelve el problema de visualización de categorías. Para los conflictos de plugins, ve a Plugins y desactiva todos los plugins excepto WooCommerce. Si las categorías se muestran correctamente, reactiva los demás plugins uno a uno hasta que encuentres al culpable. Una vez identificado, puedes buscar un plugin alternativo o ponerte en contacto con el desarrollador del plugin para que lo solucione. También es importante mantener WooCommerce, tu tema y tus plugins actualizados para evitar problemas de compatibilidad. Ve al Panel de control > Actualizaciones para buscar y aplicar las actualizaciones disponibles. Recuerda que, antes de realizar cualquier cambio, siempre es aconsejable hacer una copia de seguridad de tu sitio.

Conclusión

Saber cómo mostrar las categorías de productos en la página de tu tienda en WooCommerce puede ser esencial para impulsando tus ventas y mejorando la navegación de los clientes.

Ya sea mediante sencillos ajustes del panel de control, shortcodes o personalizaciones avanzadas, tienes las herramientas para ajustar el diseño y la funcionalidad de tu tienda. Sigue explorando diferentes configuraciones para descubrir qué funciona mejor para tu tienda. Buena suerte, ¡y disfruta creando una página de tienda WooCommerce atractiva!

Simplify WordPress with 10Web

Simplify WordPress with 10Web

Skip manual work with 10Web Managed WordPress Hosting.

Learn How