When I tried to change how my WooCommerce category pages looked, I ran into a wall. I wanted to move things around, add some images, and make the layout feel more like the rest of my site, but there was no easy way to do it.
WooCommerce gives you a default category page layout, but it’s not built for customization. You can’t just drag in blocks or add your own style unless you’re comfortable editing theme files, and I’m not.
In this guide, I’ll show you how to customize and edit a product category page in WooCommerce, from adjusting the layout to designing your own custom WooCommerce category template, no code needed.
What you’ll learn:
- How to create a custom WooCommerce category layout
- Which template to edit for category-specific changes
- Tips for adding banners, testimonials, and more
- Two ways to display product categories on your shop page
¿Por qué personalizar las páginas de categorías de productos de WooCommerce?
Hay varias razones para personalizar las páginas de categorías de WooCommerce:
- Aumente las ventas: Alrededor del 70% de las ventas proceden de las páginas de categorías, lo que significa que contribuyen directamente al éxito de su negocio. Crear páginas de categorías personalizadas y adaptadas a las necesidades de los compradores puede aumentar las tasas de conversión.
- Mejorar el SEO: Optimizar las páginas de categorías puede ayudarle a mejorar su posicionamiento en los resultados de búsqueda. Dado que muchas tiendas online tienen un contenido mínimo en las páginas de categorías, es una oportunidad ideal para optimizar las categorías y subcategorías de productos en función de las palabras clave que busca su público.
- Captar la atención: Los motores de búsqueda suelen llevar a los usuarios a páginas de categorías de productos más que a páginas de tiendas porque se centran en resultados específicos. Puedes personalizar esas páginas con contenido generado por los usuarios, mejores imágenes de los productos y reseñas para llamar la atención y convencer a los compradores de que pasen por caja.
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 y aumentar tus ventas.
Antes de mostrarte cómo personalizar tus páginas de categorías, veamos cómo añadirlas a tu tienda 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. Vaya a Productos " Categorías desde el panel de control de WordPress y verá varios campos de entrada.
Puede añadir tantas categorías como desee, pero recuerde introducir la siguiente información para facilitar la visualización de los datos de la categoría en las páginas de productos:
- Nombre
- Categoría slug
- Categoría de padres
- Descripción
- Tipo de pantalla
- Miniaturas
Después de añadir categorías a tu tienda online, estás listo para crear y personalizar tus páginas de categorías.
En primer lugar, le mostraremos cómo crear una página de categoría de producto personalizada en WooCommerce utilizando SeedProd. Después, compartiremos varias formas de mostrar categorías de productos en WooCommerce.
How to Customize and Edit Product Category Pages in WooCommerce
While WooCommerce gives you several ways to show category pages, it doesn’t give you much control over the actual layout or design. If you want to edit your product category page layout in WooCommerce, my top suggestion is to use a visual builder like SeedProd.
SeedProd es el mejor creador 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 totalmente compatible con WooCommerce, lo que le permite crear tiendas en línea completas con su sencillo constructor de arrastrar y soltar.
Siga los siguientes pasos para crear páginas de categorías personalizadas con SeedProd.
Paso 1. Instalar y activar SeedProd Website Builder
El primer paso es descargar el creador de sitios web SeedProd.
Nota: Hay una versión gratuita de SeedProd disponible, pero vamos a utilizar el plan SeedProd Elite para las características de WooCommerce.
A continuación, instale y active el archivo .zip del plugin en su sitio web 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, vaya a SeedProd " Configuración y pegue su clave de licencia.
Puede encontrar su clave de licencia accediendo al sitio web de SeedProd y copiándola desde la pestaña Descargas.
Haga clic en el botón Verificar clave; entonces estará listo para configurar sus páginas de categorías personalizadas de WooCommerce.
Paso 2. Crear un tema WooCommerce Crear un tema WooCommerce
SeedProd is a flexible WooCommerce category page builder that lets you create a fully custom WooCommerce category layout in two ways:
- Theme Builder - El Theme Builder anula su tema actual y le permite personalizar cada parte de su sitio web con su editor visual.
- Landing Page Builder - El Landing Page Builder te permite mantener 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 hacer todas las páginas automáticamente para una tienda WooCommerce.
Para configurar su tema WooCommerce, vaya a SeedProd " Theme Builder.
Normalmente, verás una lista de las plantillas que componen tu tema en esta página. Por ahora, sólo verás la plantilla CSS Global.
Lo mejor de SeedProd es que viene con más de 150 páginas de destino y plantillas temáticas adaptables a dispositivos móviles. De esta manera, no tendrás que empezar desde cero con el diseño de tu sitio web WooCommerce.
Haga clic en el botón Temas para ver una lista de las plantillas de temas WordPress actuales de SeedProd. Periódicamente se añaden más plantillas a esta lista, muchas de ellas adaptadas a tiendas online.
Por ejemplo, el tema Tienda de bicicletas sería adecuado para tiendas que venden bicicletas y accesorios para ciclistas.
Para elegir un tema, sitúese sobre él y haga clic en el icono de la marca de verificación.
Después de importar su tema, SeedProd hará todas las partes de la demo del tema. En nuestro caso, 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 tienda personalizable.
- Página única: una página individual para el contenido, como su información de contacto o acerca de.
- Blog Index, Archives, Search: una página para mostrar las entradas de tu blog, los resultados de búsqueda y los archivos de entradas.
- Página de inicio: la página principal de su sitio web.
- Barra lateral: una zona preparada para widgets que puedes personalizar.
- Pie de página: un lugar para enlaces personalizados, contenido e información de copyright.
- Cabecera: un espacio para su logotipo y los menús de navegación.
Nota: A menudo nos referimos a las partes individuales de un tema como "plantillas".
Al hacer clic en cada plantilla temática, se abrirá en el editor de arrastrar y soltar de SeedProd, donde podrá personalizar el contenido y el diseño.
Una plantilla temática fundamental para este tutorial es el Archivo de productos. Cuando los usuarios hagan clic en una categoría de la tienda, verán el Archivo de productos de esa categoría.
Es esa plantilla la que tendrás que abrir para personalizar tus páginas de categoría de producto de WooCommerce. Pasa el ratón por encima de la plantilla y haz clic en el enlace Editar diseño para abrirla en el editor visual.
Paso 3. Personalice su plantilla de página de categoría de producto
Cuando abras las plantillas de archivos de productos, verás un diseño de 2 columnas. A la izquierda hay bloques y secciones que puedes añadir a tu página. A la derecha hay una vista previa en vivo de tu diseño.
Ya debería haber 2 bloques en su página:
- Título del archivo
- Archivo de productos
The Archive Title block helps you show the correct heading for each category automatically. It’s a simple way to personalize your WooCommerce product category design without editing template files.
Por ejemplo, si haces clic en la categoría "bicicleta negra" de tu tienda, la página que verás tendrá el encabezado "Categoría: Bicicletas negras". El encabezado cambiará automáticamente en función de la categoría en la que haga clic.
Del mismo modo, el bloque de Archivo de Productos es una de las Etiquetas de Plantilla WooCommerce de SeedProd. Este bloque mostrará una cuadrícula de productos en esa categoría específica.
Siguiendo con nuestro ejemplo anterior, si hace clic en la categoría "bicicleta negra", verá una tabla de productos que sólo muestra bicicletas negras.
Personalizar ambos bloques es fácil. Basta con hacer clic en cualquiera de los bloques y ajustar el estilo en el panel de configuración de la izquierda.
Por ejemplo, puede cambiar el tamaño, la alineación y el nivel de encabezamiento del título del archivo. Luego, en la pestaña Avanzado, puedes ajustar las fuentes, el color, el espaciado, las sombras y mucho más.
En el panel de configuración de Productos de archivo, puede cambiar las columnas, la paginación, la consulta, el recuento de artículos, etc. También puede cambiar el estilo en la pestaña Avanzado.
Además, es muy fácil cambiar todo el diseño de su página de categoría de producto con cualquiera de los bloques y secciones de SeedProd.
Por ejemplo, puedes arrastrar el bloque de imágenes y añadir una imagen de banner llamativa. A continuación, puedes vincularla a una venta o promoción en curso.
También puede añadir testimonios de clientes anteriores para convencer a los compradores de que sus 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 ancha y estrecha. A continuación, utilizamos el bloque Testimonios en la columna más pequeña.
Las posibilidades son prácticamente infinitas.
Cuando estés contento con tu página de categorías, recuerda hacer clic en el botón Guardar en la esquina superior derecha. A continuación, puedes seguir adelante y personalizar el resto de tu tema WooCommerce de la misma manera.
Paso 4. Publique su tema WooCommerce
Cuando esté listo para activar su nuevo diseño, diríjase a la página SeedProd " Theme Builder . A continuación, en la esquina superior derecha, haga clic en el conmutador Habilitar tema SeedProd hasta que esté en la posición "on".
Ahora puede previsualizar cualquier página de categoría de producto para ver sus personalizaciones.
How to Display Product Categories on Your WooCommerce Shop Page
Ahora que ya sabes cómo personalizar las páginas de categorías de productos en WooCommerce, te explicamos cómo mostrarlas en la página de tu tienda.
Mostrar categorías de productos en la página de la tienda con SeedProd
Si desea mostrar las categorías de productos en la página de su tienda WooCommerce con SeedProd , vaya a SeedProd " Theme Builder y abra la plantilla Shop Page.
A partir de ahí, abra la configuración del bloque Rejilla de productos y cambie el Tipo de consulta a Consulta personalizada. Bajo el encabezado Atributo de consulta, haz clic en "Seleccionar por categoría". A continuación, en el cuadro de categorías, haga clic en las categorías que desea mostrar en la página.
Nota: Puede seleccionar varias categorías manteniendo pulsado command en mac o ctrl en windows.
Haga clic en Guardar para almacenar los cambios.
Mostrar categorías de productos en la página de la tienda con WooCommerce
Para mostrar las categorías de productos en la página de su tienda con la configuración predeterminada de WooCommerce, vaya a Apariencia " Personalizar " WooCommerce " Catálogo de productos.
A continuación, en el apartado "Visualización de la página de la tienda", elija la opción "Mostrar categorías".
Preguntas frecuentes
More Ways to Customize WooCommerce
Customizing product category pages is just one of the many ways to tweak your store. For more WooCommerce customizations, please see the following guides:
- How to Customize the WooCommerce Additional Information Tab
- Cómo añadir el botón Ver carrito en WooCommerce
- Cómo cambiar el título de la página de la tienda en WooCommerce
- Cómo crear una impresionante galería de imágenes de productos en WooCommerce
- Cómo añadir estrellas a las páginas de productos de WooCommerce
- How to Display Related Products in WooCommerce
- Cómo mostrar categorías de productos y etiquetas en WooCommerce
- Cómo obtener y mostrar descripciones de productos en WooCommerce
- Cómo mostrar productos destacados en WooCommerce
- Cómo Arreglar WooCommerce Ver Cesta No Funciona
- How to Hide Out of Stock Products in WooCommerce
¡Eso es!
Esperamos que este artículo te haya ayudado a aprender cómo personalizar páginas de categorías de productos en WooCommerce.
Puede que también te guste esta guía sobre cómo acelerar tu tienda WooCommerce.
Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.
También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.
