Cuando intenté cambiar el aspecto de mis páginas de categorías de WooCommerce, me encontré con un obstáculo. Quería reorganizar elementos, añadir algunas imágenes y hacer que el diseño se pareciera más al resto de mi sitio, pero no había una forma sencilla de hacerlo.
WooCommerce te proporciona un diseño de página de categoría predeterminado, pero no está diseñado para la personalización. No puedes simplemente arrastrar y soltar bloques o añadir tu propio estilo a menos que te sientas cómodo editando los archivos del tema, y yo no lo estoy.
En esta guía, te mostraré cómo personalizar y editar una página de categoría de producto en WooCommerce, desde ajustar el diseño hasta diseñar tu propia plantilla personalizada de categoría de WooCommerce, sin necesidad de código.
Lo que aprenderás:
- Cómo crear un diseño personalizado de categoría de WooCommerce
- Qué plantilla editar para cambios específicos de categoría
- Consejos para añadir banners, testimonios y más
- Dos formas de mostrar categorías de productos en la página de tu tienda
¿Por qué personalizar las páginas de categorías de productos de WooCommerce?
Hay varias razones para personalizar tus páginas de categorías de WooCommerce:
- Impulsa las ventas: Alrededor del 70% de las ventas provienen de las páginas de categorías, lo que significa que contribuyen directamente al éxito de tu negocio. Crear páginas de categorías personalizadas y adaptadas a las necesidades de los compradores puede generar altas tasas de conversión.
- Mejora el SEO: Optimizar las páginas de categorías puede ayudarte a mejorar tu posicionamiento en los resultados de búsqueda. Dado que muchas tiendas en línea tienen un contenido mínimo en las páginas de categorías, es una oportunidad ideal para optimizar categorías de productos y subcategorías para las palabras clave que tu audiencia está buscando.
- Capta la atención: Los motores de búsqueda a menudo dirigen a los usuarios a las páginas de categorías de productos más que a las páginas de la tienda, ya que se centran en resultados específicos. Puedes personalizar esas páginas con contenido generado por el usuario, mejores imágenes de productos y reseñas para captar la atención y convencer a los compradores de que echen un vistazo.
Al final, personalizar las páginas de categorías de productos en WooCommerce puede ayudarte a servir mejor a los compradores, mejorar el posicionamiento en los motores de búsqueda e impulsar tus ventas.
Antes de mostrarte cómo personalizar tus páginas de categorías, veamos cómo añadirlas a tu tienda de WooCommerce.
Cómo añadir categorías de productos en WooCommerce
Añadir páginas de categorías de productos en WooCommerce es bastante sencillo. Ve a Productos » Categorías desde tu panel de WordPress y verás varios campos de entrada.
Puedes añadir tantas categorías como quieras, pero recuerda introducir la siguiente información para facilitar la visualización de los datos de la categoría en las páginas de productos:
- Nombre
- Slug de la categoría
- Categoría padre
- Descripción
- Tipo de visualización
- Miniatura
Después de añadir categorías a tu tienda en línea, estarás listo para crear y personalizar tus páginas de categorías.
Primero, te mostraremos cómo crear una página de categoría de producto personalizada en WooCommerce usando SeedProd. Después, compartiremos varias formas de mostrar categorías de productos en WooCommerce.
Cómo personalizar y editar páginas de categorías de productos en WooCommerce
Si bien WooCommerce te ofrece varias formas de mostrar las páginas de categorías, no te da mucho control sobre el diseño o la estructura real. Si deseas editar el diseño de tu página de categoría de productos en WooCommerce, mi principal recomendación es usar un constructor visual como SeedProd.
SeedProd es el mejor constructor de sitios web para WordPress. Con más de 1 millón de instalaciones activas, es la forma más fácil de crear temas personalizados de WordPress, diseños y páginas de destino sin código.
También es rápido, ligero y es totalmente compatible con WooCommerce, lo que te permite crear tiendas en línea completas con su sencillo constructor de arrastrar y soltar.
Sigue los pasos a continuación para crear páginas de categoría personalizadas con SeedProd.
Paso 1. Instalar y Activar el Constructor de Sitios Web SeedProd
El primer paso es descargar el constructor de sitios web SeedProd.
Nota: Existe una versión gratuita de SeedProd, pero usaremos el plan SeedProd Elite para las funciones de WooCommerce.
A continuación, instala y activa el archivo .zip del plugin en tu sitio web de WordPress. Si necesitas ayuda con este paso, puedes seguir estas instrucciones sobre cómo instalar un plugin de WordPress.
Después de instalar y activar SeedProd, ve a SeedProd » Ajustes y pega tu clave de licencia.
Puedes encontrar tu clave de licencia iniciando sesión en el sitio web de SeedProd y copiándola de la pestaña Descargas.
Haz clic en el botón Verificar clave; luego, estarás listo para configurar tus páginas de categoría personalizadas de WooCommerce.
Paso 2. Crear un Tema de WooCommerce
SeedProd es un constructor flexible de páginas de categoría de WooCommerce que te permite crear un diseño de página de categoría de WooCommerce totalmente personalizado de dos maneras:
- Theme Builder – El Theme Builder anula tu tema actual y te permite personalizar cada parte de tu sitio web con su editor visual.
- Landing Page Builder – El Landing Page Builder te permite conservar tu tema actual y crear páginas de destino individuales que puedes personalizar con el editor de arrastrar y soltar.
Usaremos la opción Theme Builder para crear todas las páginas automáticamente para una tienda WooCommerce.
Para configurar tu tema de WooCommerce, ve a SeedProd » Theme Builder.
Normalmente, verás una lista de las plantillas que componen tu tema en esta página. Por ahora, solo verás la plantilla Global CSS.
Lo genial de SeedProd es que viene con más de 150 plantillas de páginas de destino y temas receptivas para móviles. De esa manera, no necesitarás empezar desde cero con el diseño de tu sitio web de WooCommerce.
Haz clic en el botón Temas para ver una lista de las plantillas de temas de WordPress actuales de SeedProd. Se añaden regularmente más plantillas a esta lista, muchas de las cuales están diseñadas para tiendas en línea.
Por ejemplo, el tema Bicycle Shop sería adecuado para tiendas que venden bicicletas y accesorios para bicicletas.
Para elegir un tema, pasa el ratón sobre él y haz clic en el icono de la marca de verificación.
Después de importar tu tema, SeedProd creará todas las partes de la demostración del tema. En nuestro caso, esto incluye las siguientes plantillas de tema:
- Archivos de productos: un archivo completo de todos los productos.
- Página de producto: un espacio para mostrar detalles sobre productos individuales.
- Página de tienda: una página de escaparate personalizable.
- Página individual: una página individual para contenido, como tu información de contacto o sobre nosotros.
- Índice del blog, Archivos, Búsqueda: una página para mostrar tus publicaciones de blog, resultados de búsqueda y archivos de publicaciones.
- Página de inicio: la página principal de tu sitio web.
- Barra lateral: un área lista para widgets que puedes personalizar.
- Pie de página: un lugar para enlaces personalizados, contenido e información de derechos de autor.
- Encabezado: un espacio para tu logotipo y menús de navegación.
Nota: A menudo nos referimos a partes individuales de un tema como "plantillas".
Al hacer clic en cada plantilla de tema, se abrirá en el editor de arrastrar y soltar de SeedProd, donde puedes personalizar el contenido y el diseño.
Una plantilla de tema fundamental para este tutorial es el Archivo de productos. Cuando los usuarios hagan clic en una categoría de tu tienda, verán el Archivo de productos para esa categoría de productos.
Es esa plantilla la que necesitarás abrir para personalizar tus páginas de categorías de productos de WooCommerce. Pasa el ratón sobre la plantilla y haz clic en el enlace Editar diseño para abrirla en el editor visual.
Paso 3. Personaliza la plantilla de tu página de categoría de productos
Cuando abras las plantillas de archivos de productos, verás un diseño de 2 columnas. A la izquierda están los bloques y secciones que puedes añadir a tu página. Luego, a la derecha, hay una vista previa en vivo de tu diseño.
Ya debería haber 2 bloques en tu página:
- Título del Archivo
- Archivar productos
El bloque Título del archivo te ayuda a mostrar automáticamente el encabezado correcto para cada categoría. Es una forma sencilla de personalizar el diseño de tu categoría de productos de WooCommerce sin editar archivos de plantilla.
Por ejemplo, si haces clic en la categoría "bicicleta negra" en tu tienda, la página que verás tendrá el encabezado: "Categoría: Bicicletas Negras". El encabezado cambiará automáticamente dependiendo de la categoría en la que hagas clic.
De manera similar, el bloque Productos del archivo es una de las Etiquetas de Plantilla de WooCommerce de SeedProd. Este bloque mostrará una cuadrícula de productos en esa categoría específica.
Para usar nuestro ejemplo anterior, si haces clic en la categoría "bicicleta negra", verás una cuadrícula de productos que solo muestra bicicletas negras.
Personalizar ambos bloques es fácil. Simplemente haz clic en cualquiera de los bloques y ajusta el estilo en el panel de configuración de la izquierda.
Por ejemplo, puedes cambiar el tamaño, la alineación y el nivel de encabezado del título del archivo. Luego, en la pestaña Avanzado, puedes ajustar las fuentes, el color, el espaciado, las sombras y más.
En el panel de configuración de Productos del archivo, puedes cambiar las columnas, la paginación, la consulta, el número de elementos y más. También puedes cambiar el estilo en la pestaña Avanzado.
Además, es muy fácil cambiar el diseño completo de tu página de categoría de productos con cualquiera de los bloques y secciones de SeedProd.
Por ejemplo, puedes arrastrar el bloque de imagen y añadir una imagen de banner llamativa. Luego puedes enlazarla a una oferta o promoción que estés ejecutando actualmente.
También puedes añadir testimonios de clientes anteriores para convencer a los compradores de que tus productos son la mejor opción.
En este ejemplo, arrastramos los bloques de título de archivo y productos a una sección de 2 columnas, una ancha y otra estrecha. Luego usamos el bloque de Testimonios en la columna más pequeña.
Las posibilidades son prácticamente infinitas.
Cuando estés satisfecho con tu página de categoría, recuerda hacer clic en el botón Guardar en la esquina superior derecha. Luego puedes continuar y personalizar el resto de tu tema de WooCommerce de la misma manera.
Paso 4. Publica tu tema de WooCommerce
Cuando estés listo para publicar tu nuevo diseño, dirígete a la página SeedProd » Theme Builder. Luego, en la esquina superior derecha, haz clic en el interruptor Habilitar tema SeedProd hasta que esté en la posición "activado".
Ahora puedes previsualizar cualquier página de categoría de producto para ver tus personalizaciones.
Cómo mostrar categorías de productos en tu página de tienda de WooCommerce
Ahora que sabes cómo personalizar las páginas de categorías de productos en WooCommerce, aquí te mostramos cómo mostrarlas en tu página de tienda.
Mostrar categorías de productos en la página de tienda con SeedProd
Si deseas mostrar categorías de productos en tu página de tienda de WooCommerce con SeedProd, ve a SeedProd » Theme Builder y abre la plantilla de la página de tienda.
Desde allí, abre la configuración del bloque de cuadrícula de productos y cambia el Tipo de consulta a Consulta personalizada. En el encabezado Atributo de consulta, haz clic en "Seleccionar por categoría". Luego, en el cuadro de categoría, haz clic en las categorías que deseas mostrar en la página.
Nota: Puedes seleccionar varias categorías manteniendo presionada la tecla comando en Mac o Ctrl en Windows.
Haz clic en Guardar para almacenar tus cambios.
Mostrar categorías de productos en la página de tienda con WooCommerce
Para mostrar categorías de productos en tu página de tienda con la configuración predeterminada de WooCommerce, ve a Apariencia » Personalizar » WooCommerce » Catálogo de productos.
Luego, en el encabezado "Visualización de la página de tienda", elige la opción "mostrar categorías".
Preguntas Frecuentes
Más Formas de Personalizar WooCommerce
La personalización de las páginas de categorías de productos es solo una de las muchas formas de ajustar tu tienda. Para más personalizaciones de WooCommerce, consulta las siguientes guías:
- Cómo Personalizar la Pestaña de Información Adicional de WooCommerce
- Cómo Añadir el Botón Ver Carrito en WooCommerce
- Cómo Cambiar el Título de la Página de Tienda en WooCommerce
- Cómo Crear una Impresionante Galería de Imágenes de Producto en WooCommerce
- Cómo añadir valoraciones de estrellas a las páginas de productos de WooCommerce
- Cómo mostrar productos relacionados en WooCommerce
- Cómo mostrar categorías y etiquetas de productos en WooCommerce
- Cómo obtener y mostrar descripciones de productos en WooCommerce
- Cómo mostrar productos destacados en WooCommerce
- Cómo solucionar que la vista del carrito de WooCommerce no funcione
- Cómo ocultar productos sin stock en WooCommerce
¡Eso es todo!
Esperamos que este artículo te haya ayudado a aprender cómo personalizar las páginas de categorías de productos en WooCommerce.
También te puede interesar esta guía sobre cómo acelerar tu tienda de WooCommerce.
¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.
