Cómo mostrar categorías y etiquetas de productos en WooCommerce

Publicado: 2022-04-18

¿Quieres aprender a mostrar categorías de productos en WooCommerce?

Mostrar categorías de productos en tu tienda WooCommerce ayuda a guiar a los usuarios a lo que buscan fácilmente. También puede ordenar su tienda, dándole una apariencia más fácil de usar.

Este artículo le mostrará cómo mostrar categorías y etiquetas de productos en WooCommerce.

Cómo agregar categorías y etiquetas a WooCommerce

Agregar categorías y etiquetas en WooCommerce es fácil. Puede agregar nuevas categorías y etiquetas cuando crea listados de productos o desde el panel de control de WooCommerce.

Agregar categoría de producto de WooCommerce

Siga estos pasos para agregar categorías o subcategorías de productos en WooCommerce:

Primero, vaya a Productos » Categorías desde su área de administración de WordPress. Desde allí, ingrese la información de la categoría de su producto.

Add woocommerce product category

Puedes incluir:

  • Nombre
  • Babosa
  • Categoría principal
  • Descripción
  • Tipo de visualización (productos/subcategorías/ambos)
  • Miniatura

Haga clic en el botón Agregar nueva categoría para agregar la lista de categorías a su lista.

Agregar etiquetas de productos de WooCommerce

Puede seguir estos pasos para agregar etiquetas de productos en WooCommerce:

Primero, vaya a Productos » Etiquetas desde su área de administración de WordPress. En la página siguiente, puede ingresar la siguiente información de la etiqueta:

  • Nombre
  • Babosa
  • Descripción
Add woocommerce product tags

Haga clic en el botón Agregar nueva etiqueta para agregar la etiqueta a su lista.

Cómo mostrar categorías de productos en WooCommerce

Después de aprender a agregar categorías de productos y etiquetas a WooCommerce, ¿cómo las muestra en su tienda en línea? Siga los métodos a continuación para mostrar las categorías y etiquetas de productos de WooCommerce en diferentes secciones de su tienda.

Tabla de contenido
  1. Cómo agregar categorías y etiquetas a WooCommerce
    • Agregar categoría de producto de WooCommerce
    • Agregar etiquetas de productos de WooCommerce
  2. Cómo mostrar categorías de productos en WooCommerce
    • Mostrar categorías de productos en la página de inicio
    • Mostrar categorías de productos en la página de la tienda con SeedProd
    • Mostrar categorías en la página de la tienda con WooCommerce
    • Mostrar subcategorías de WooCommerce en la página de la tienda
    • Mostrar categorías de productos de WooCommerce en la barra lateral
    • Mostrar categorías de productos en el menú

Mostrar categorías de productos en la página de inicio

Primero, veamos cómo mostrar la categoría de productos en su página de inicio de WooCommerce. WooCommerce no ofrece una manera fácil de mostrar categorías de productos en su página de inicio.

Las opciones actuales son:

  • Use un tema de WordPress compatible con WooCommerce que incluya secciones de la página de inicio de WooCommerce.
  • Edite su tema y agregue el código abreviado de categorías de productos de WooCommerce.

Ambas opciones implican mucho trabajo, por lo que recomendamos utilizar un creador de sitios web como SeedProd para personalizar su tienda WooCommerce.

SeedProd WordPress website builder

SeedProd es el mejor creador de sitios web para WordPress. Le permite crear sitios web completos de WooCommerce, páginas de destino y temas personalizados de WordPress sin código.

Puede elegir entre cientos de plantillas listas para usar y personalizarlas fácilmente en el generador de páginas de arrastrar y soltar. SeedProd ofrece muchos bloques y secciones para agregar contenido de WooCommerce a su sitio con unos pocos clics.

Siga estos pasos para usar SeedProd para agregar categorías de productos a su página de inicio.

Paso 1. Instalar y activar SeedProd

Para comenzar, descargue el complemento SeedProd e instálelo y actívelo en su sitio web de WordPress. Puede seguir esta guía sobre cómo instalar un complemento de WordPress si necesita ayuda.

Nota: necesitará un plan SeedProd Elite para acceder a las funciones de WooCommerce.

A continuación, vaya a SeedProd » Configuración , ingrese su clave de licencia y haga clic en Verificar clave . Al hacerlo, se desbloquearán las funciones del plan elegido.

enter your license key

Puede encontrar su clave de licencia en el área de su cuenta de SeedProd en la pestaña Descargas.

Find your SeedProd license key

Paso 2. Crea un tema personalizado de WooCommerce

El siguiente paso es crear un tema personalizado para su sitio de WooCommerce. Eso le permitirá personalizar cada parte de su sitio web con el poderoso editor visual de SeedProd.

Para ello, vaya a SeedProd » Theme Builder y haga clic en el botón Temas .

add a theme template

Verás una biblioteca de temas profesionales de WordPress en esta pantalla. Son una forma excelente de poner en marcha impresionantes sitios web sin contratar a un desarrollador, y no tendrá que empezar desde cero.

Simplemente pase el mouse sobre un tema que le guste y haga clic en el icono de marca de verificación.

choose a woocommerce theme

SeedProd creará automáticamente todas las diferentes plantillas para su tema y las listará en el panel de Theme Builder. Desde allí, puede personalizar cada plantilla en el editor visual.

woocommerce theme templates

Paso 3. Personaliza tu página de inicio de WooCommerce

Para mostrar categorías en su página de inicio de WooCommerce, deberá editar la plantilla de la página de inicio. Busque la plantilla en su lista y haga clic en el enlace "Editar diseño" para abrirla en el generador de páginas de SeedProd.

edit woocommerce homepage design

Personalizar tu página de inicio con SeedProd es muy fácil. Hay bloques y secciones a la izquierda y una vista previa en vivo a la derecha.

Customize WooCommerce homepage

Agregar un bloque de contenido a su página es tan simple como arrastrar y soltar. A continuación, puede hacer clic en cualquier elemento para editar su contenido y la configuración de estilo.

Hay 2 formas de mostrar categorías de productos en su página de inicio con SeedProd:

  1. Mostrar productos por categoría
  2. Agregue el widget de categoría de producto de WooCommerce

Para usar la primera solución, busque el bloque de cuadrícula de productos en la sección de bloques de WooCommerce. Luego arrastre el bloque a una sección o fila en su página de inicio.

SeedProd products grid block

Haga clic en la cuadrícula del producto para abrir el panel de configuración en el lado izquierdo. En ese panel, seleccione "Consulta personalizada" en el menú desplegable Tipo y habilite la opción "Seleccionar por categoría".

how to display product category in woocommerce

Puede elegir los productos de qué categoría mostrar en la cuadrícula. Puede seleccionar varias categorías manteniendo presionado el botón de cambio.

Ahora solo los productos de las categorías elegidas se mostrarán en su página de inicio.

Puede seguir pasos similares para generar solo los productos por etiqueta. Simplemente cambie la opción "Seleccionar por etiqueta" y elija qué etiquetas incluir entre las opciones.

WooCommerce display product tags

También puede usar widgets nativos de WooCommerce en el editor visual de SeedPod, incluido el widget de categorías de productos.

Para hacer eso, vaya a la sección de bloque Widgets y busque el widget "Categorías de productos". Luego, arrástrelo a su lugar en el diseño de su página de inicio.

WooCommerce product categories widget

Hacer clic en el widget le permite:

  • Elija un título de widget
  • Ordenar categorías por nombre
  • Mostrar como menú desplegable
  • Mostrar recuentos de productos
  • Mostrar jerarquía
  • Y más
Product categories widget settings

También puede controlar las opciones de estilo del widget en la pestaña Avanzado.

Paso 4. Personaliza el resto de tu tienda WooCommerce

Ahora puede pasar a editar las otras plantillas de su tema de WooCommerce.

Aquí hay algunas guías para ayudar:

  • Cómo personalizar tu encabezado de WordPress
  • Cómo crear una plantilla de publicación única personalizada
  • Cómo crear una página de pago personalizada de WooCommerce
  • Cómo agregar un carrito de compras a WordPress

También puede leer el resto de este artículo para aprender cómo mostrar categorías de productos en su barra lateral y menú de navegación.

Paso 5. Publica tu tema de WooCommerce

Cuando esté satisfecho con el aspecto de su tema, vaya a SeedProd » Theme Builder y, en la esquina superior derecha, gire el interruptor Habilitar tema de SeedProd a la posición "activado".

Enable seedprod theme

Ahora puede obtener una vista previa de su página de inicio para ver cómo se ve.

how to display product category in woocommerce homepage

Mostrar categorías de productos en la página de la tienda con SeedProd

Además de su página de inicio, puede usar SeedProd para mostrar categorías en su página de tienda de WooCommerce.

Para ello, vaya a SeedProd » Theme Builder y haga clic en Editar diseño en la plantilla "Página de la tienda".

edit woocommerce shop page

La página ahora se abrirá en el editor visual, donde puede personalizar el diseño de la página de su tienda. Siga los pasos del método anterior para mostrar sus productos por categoría.

display woocommerce product category on shop page

Alternativamente, puede crear una cuadrícula separada para cada categoría de producto. Por ejemplo, puede tener una rejilla para bebidas, otra para el cuidado del cabello, etc.

display product grid by category on woocommerce shop page

También puede usar el método anterior para mostrar sus categorías de productos en una lista o menú desplegable en su página de inicio.

Simplemente agregue una nueva columna a la página de su tienda y arrastre el widget "Categorías de productos".

Product category widget woocommerce shop page

Aquí hay un ejemplo de cómo se vería eso en tiempo real:

Display woocommerce product categories on shop page

Mostrar categorías en la página de la tienda con WooCommerce

Es posible que algunos propietarios de sitios web no deseen crear un nuevo tema para mostrar etiquetas y categorías de productos. En ese caso, puede usar la configuración de tienda predeterminada de WooCommerce para generar las categorías.

Dirígete a Apariencia » Personalizar, luego haz clic en WooCommerce y Categorías de productos.

Bajo el encabezado titulado "Visualización de la página de la tienda", seleccione Mostrar categorías.

Show categories shop page woocommerce

Mostrar subcategorías de WooCommerce en la página de la tienda

También puede usar la configuración predeterminada de WooCommerce para mostrar subcategorías en la página de la tienda.

Para hacerlo, vaya a Apariencia » Personalizar » WooCommerce » Catálogo de productos y, en el encabezado "Visualización de categoría", seleccione "Mostrar subcategorías" en el menú desplegable.

Show subcategories shop page woocommerce

Recuerde hacer clic en el botón Publicar para guardar los cambios.

Mostrar categorías de productos de WooCommerce en la barra lateral

Agregar categorías de productos a la barra lateral de su sitio web es una excelente manera de ayudar a los compradores a encontrar lo que necesitan rápidamente. Afortunadamente, SeedProd te permite agregar barras laterales personalizadas a WordPress fácilmente.

Para personalizar una barra lateral con SeedProd y mostrar sus categorías de productos, vaya a SeedProd » Theme Builder y abra la plantilla de la barra lateral.

edit sidebar template

Puede arrastrar sobre el bloque Product Grid y personalizar las opciones de visualización de consultas para mostrar productos de una categoría o etiqueta.

Show WooCommerce Product Categories in the Sidebar

Usamos 2 bloques de Product Grid para mostrar 2 categorías diferentes en la barra lateral de nuestro blog en este ejemplo.

Show WooCommerce Product Categories in the Sidebar

Mostrar categorías de productos en el menú

Agregar categorías de productos a su menú de WooCommerce es igual de fácil. Vaya a Apariencia » Menús, luego haga clic en la pestaña Opciones de pantalla en la esquina superior derecha.

WordPress menu screen options

En ese panel, haga clic en la casilla de verificación "Categorías de productos". Eso mostrará todas sus categorías de WooCommerce en la pantalla del menú.

A continuación, abra la pestaña "Categorías de productos", seleccione todas las categorías que desea agregar a su menú y haga clic en el botón Agregar al menú .

Add product categories to WooCommerce navigation menu

Luego puede arrastrarlos para cambiar su posición en el menú. Por ejemplo, puede anidarlos debajo de su página de la tienda para mostrar un menú desplegable de categorías.

Re-order woocommerce menu items

Recuerde guardar su menú antes de continuar.

Ahora puede visitar la página de inicio de su sitio web y ver las categorías de productos en su menú de navegación de WooCommerce.

Display product categories in woocommerce menu

¡Ahí tienes!

Esperamos que este artículo le haya ayudado a aprender a mostrar categorías de productos en WooCommerce, mostrar etiquetas de productos y personalizar las páginas de sus productos.

Si todavía está trabajando en su sitio, puede que le guste esta guía sobre cómo agregar una página próximamente a WooCommerce.

Gracias por leer. Síganos en YouTube, Twitter y Facebook para obtener más contenido útil para hacer crecer su negocio.