En resumen: Cómo personalizar la página de tu tienda WooCommerce
La página de la tienda WooCommerce es el archivo de productos de tu tienda. Como está creada a partir de un archivo de plantilla, no puedes editarla como una página normal, pero puedes rediseñarla por completo con la herramienta adecuada.
- Qué es: el listado principal de productos de tu tienda, generado a partir de la plantilla archive-product.php de WooCommerce
- Método 1: SeedProd: creador de arrastrar y soltar con bloques de WooCommerce, más de 300 plantillas y control total del diseño (sin código)
- Método 2: Editor de WordPress: opción integrada que utiliza el Editor del Sitio (temas de bloques) o el Personalizador de WooCommerce (temas clásicos)
- Usa SeedProd para: diseños personalizados, banners, secciones destacadas y diseños de tiendas WooCommerce que coincidan con tu marca
- Usa el Editor de WordPress para: ajustes rápidos de visualización como el orden de clasificación, productos por fila o cambios de columna
Cuando configuré mi primera tienda WooCommerce, estaba emocionado por empezar a vender, pero pronto me di cuenta de que la página de tienda predeterminada se sentía simple y no coincidía en absoluto con mi marca.
Si estás en la misma situación, no te preocupes. WooCommerce es la forma más popular de añadir funcionalidad de comercio electrónico a WordPress, y hay maneras fáciles de hacer que el diseño de tu tienda WooCommerce destaque sin escribir una sola línea de código.
Puedes personalizar tu página de tienda WooCommerce utilizando un creador de arrastrar y soltar como SeedProd (sin necesidad de código) o el Editor de WordPress integrado. Ambos métodos tardan menos de 30 minutos y no requieren un desarrollador.
Estos son los métodos exactos que utilicé para convertir mi página de tienda predeterminada en algo más limpio, atractivo y mucho mejor para convertir visitantes en compradores.
¿Qué es la página de tienda de WooCommerce?
La página de tienda de WooCommerce es la página de archivo de productos predeterminada que muestra todos los productos de tu tienda. Cuando instalas WooCommerce, crea automáticamente esta página utilizando la configuración de diseño de tu tema.
Piensa en ella como el catálogo principal o el escaparate de tu tienda. Es donde los clientes suelen navegar antes de hacer clic en las páginas de producto específicas.
Por defecto, la página de tienda extrae contenido de tus listados de productos y muestra:
- Imágenes de productos
- Títulos y descripciones cortas
- Precios
- Categorías y etiquetas de productos
- Valoraciones y reseñas (si están habilitadas)
Se genera dinámicamente utilizando tu tema de WordPress y los archivos de plantilla de WooCommerce, y se puede personalizar para que coincida con tu marca y mejore las conversiones.
Una página de tienda bien diseñada ayuda a los visitantes a encontrar rápidamente lo que buscan, reduce la fricción en el proceso de compra y aumenta las ventas.
Editar la página de tienda de WooCommerce directamente en el editor de WordPress no funcionará como podrías esperar. La página de tienda se genera a partir de un archivo de plantilla llamado archive-product.php, que WooCommerce utiliza para mostrar tu archivo de productos dinámicamente mediante ganchos PHP y shortcodes.
Por eso, al hacer clic en “Editar página” en la página de la tienda, no obtienes control sobre la plantilla de la página de la tienda de WooCommerce ni sobre la cuadrícula de productos. Para personalizarla, necesitas un plugin como SeedProd, que reemplaza la plantilla con tu propio diseño, o las opciones integradas de Personalizador de WooCommerce o Editor de sitio.
¿Por qué personalizar la página de la tienda de WooCommerce?
Imagina entrar en una tienda física donde todos los productos están esparcidos al azar en los estantes. Sin letreros, sin categorías, sin artículos destacados. Probablemente saldrías rápido.
Eso es exactamente lo que experimentan muchos compradores cuando llegan a una página de tienda de WooCommerce predeterminada. Una cuadrícula de productos simple sin contexto ni dirección conduce a altas tasas de rebote y oportunidades de venta perdidas.
Personalizar tu página de tienda te ayuda a:
- Mejorar la experiencia del usuario (UX) haciendo que sea más fácil para los clientes encontrar lo que quieren
- Aumentar las conversiones destacando los más vendidos, las ofertas o los productos de alto margen
- Mejorar el SEO añadiendo contenido rico en palabras clave y marcado schema
- Reducir las tasas de rebote ofreciendo mejor navegación y jerarquía visual
- Generar confianza en la marca con testimonios, reseñas o contenido generado por el usuario
Un diseño de tienda de WooCommerce bien optimizado es una parte crítica para convertir visitantes en compradores. Si todavía estás construyendo tu tienda desde cero, esta guía sobre cómo configurar una tienda online en WordPress es un buen punto de partida.
Cómo personalizar la página de la tienda de WooCommerce en WordPress
Hay varias formas de personalizar tu página de tienda de WooCommerce en WordPress. Aquí tienes un resumen rápido de tus opciones antes de profundizar.
| M extasciitildeetodo | Mejor para | ¿Se requiere código? |
|---|---|---|
| SeedProd | Control total del diseño, diseños personalizados, banners, secciones destacadas, tienda WooCommerce que coincide con la marca | No |
| Editor de WordPress (Editor de sitio / Personalizador) | Cambios rápidos de diseño, orden de clasificación de productos, columnas, no se necesita plugin adicional | No |
| Código personalizado | Modificaciones avanzadas más allá de lo que ofrecen las herramientas | Sí (se recomienda desarrollador) |
Método 1: Usar SeedProd para personalizar la página de la tienda de WooCommerce
Usaremos SeedProd para crear una tienda de WooCommerce personalizada para el primer método.
SeedProd es el mejor creador de sitios web de arrastrar y soltar para WordPress, con más de 1 millón de usuarios. Te permite crear temas personalizados de WordPress, páginas de destino de alta conversión y diseños de sitios web responsivos sin código.
En pruebas de rendimiento, SeedProd cargó en 556 ms en comparación con los 1882 ms de Elementor, con la mitad de las solicitudes HTTP. Eso lo convierte en una opción sólida para cualquier tienda de WooCommerce personalizada donde la velocidad de la página sea importante.
Este plugin también te permite crear tiendas online completas con su integración de WooCommerce. Puedes personalizar tu página de tienda, páginas de productos, carrito de compras, pago y más con solo unos pocos clics.
SeedProd viene con más de 300 temas y plantillas profesionales. A partir de ahí, puedes personalizar el diseño de tu tienda WooCommerce con bloques de contenido y secciones fáciles de usar.
Sigue estos pasos para personalizar tu página de tienda WooCommerce con SeedProd.
Paso 1. Instalar el constructor de sitios web SeedProd
El primer paso es descargar una copia del plugin constructor de sitios web SeedProd.
Nota: SeedProd ofrece una versión gratuita para crear páginas de destino sencillas. Sin embargo, utilizaremos el plan SeedProd Elite para las funciones de WooCommerce que necesitamos.
A continuación, deberás instalar SeedProd en tu sitio web de WordPress. Puedes seguir estas instrucciones para instalar un plugin de WordPress si necesitas ayuda.
Después de instalar y activar SeedProd, ve a SeedProd » Ajustes e introduce tu clave de licencia del plugin.
Puedes encontrar tu clave de licencia iniciando sesión en el sitio web de SeedProd y copiándola de la sección 'Descargas'.
Introduce tu clave de licencia y haz clic en el botón Verificar clave antes de pasar al siguiente paso.
Paso 2. Crea un tema personalizado de WooCommerce
Utilizaremos la función de constructor de temas de SeedProd para personalizar tu página de tienda WooCommerce. Anulará tu tema de WordPress existente, reemplazándolo con tus personalizaciones.
Puedes encontrarlo yendo a SeedProd » Theme Builder desde tu panel de WordPress.
Hay 2 formas de crear tu tema de comercio electrónico con SeedProd:
- Crear cada parte (plantilla) de tu tema individualmente
- Crear todas las plantillas de tu tema con una plantilla de tema de WordPress prefabricada
Utilizaremos la segunda opción para este tutorial porque crea automáticamente todas las partes de tu sitio web WooCommerce.
Haz clic en el botón Temas en la parte superior de tu pantalla para lanzar la galería de plantillas de temas de SeedProd. Puedes elegir entre muchos temas, incluidos diseños para tiendas en línea.
Para este tutorial, usaremos el tema 'Furniture Store'.
Para importar el tema, pasa el ratón por encima de la miniatura y haz clic en el icono de la marca de verificación.
Como puedes ver en la captura de pantalla a continuación, SeedProd creará automáticamente todas las plantillas para tu tema, incluyendo:
- Navegación de encabezado
- Archivos de productos
- Página de Producto
- Página de Tienda
- Página Individual
- Publicación Individual
- Índice del blog, Archivos, Búsqueda
- Página de inicio
- Barra lateral
- Pie de página
Puedes personalizar cada plantilla con el constructor de arrastrar y soltar de SeedProd. Te mostraremos cómo personalizar la plantilla de la página de la tienda en el paso 3.
Paso 3. Personalizar la página de la tienda de WooCommerce
Para personalizar tu página de tienda WooCommerce con SeedProd, pasa el ratón por encima de la plantilla 'Página de tienda' y haz clic en el enlace Editar diseño.
Después de hacer clic en el enlace, la plantilla de tu página de tienda se abrirá en el constructor visual de páginas de arrastrar y soltar de SeedProd.
A la izquierda tienes bloques y secciones que puedes añadir a tu página. Puedes ver una vista previa de cómo queda tu página en tiempo real a la derecha.
Tu página de tienda mostrará una lista de todos tus productos por defecto. Puedes cambiar eso añadiendo nuevos diseños, bloques de contenido y secciones.
Digamos que desea agregar un banner desplazable que muestre una oferta o promoción. En ese caso, puede arrastrar el bloque Carrusel de imágenes y cargar imágenes de banner personalizadas.
Luego puede personalizar su carrusel en la configuración del bloque cambiando a un tema oscuro o claro, reproduciendo automáticamente el control deslizante y mostrando los subtítulos de las imágenes.
¿Qué pasa si desea destacar sus productos destacados o sus productos más vendidos? Para hacerlo, agregue una nueva sección a su página, luego desplácese hacia abajo hasta el panel de bloques de WooCommerce y arrastre el bloque Productos más vendidos a su página.
Este bloque mostrará sus productos más vendidos en una cuadrícula uniforme.
Puede hacer que esta nueva sección de página destaque más dándole un color de fondo personalizado.
Luego, en la Configuración avanzada del bloque Productos más vendidos, puede cambiar el color, la tipografía y los botones añadir al carrito.
También puede mostrar productos por categoría con el bloque WooCommerce de SeedProd. Para hacerlo, arrastre el bloque Cuadrículas de productos, cambie el ‘Tipo de consulta’ a Consulta personalizada y haga clic en la opción Seleccionar por categoría.
Desde allí, puede elegir qué categorías incluir en la cuadrícula de productos.
Otros bloques que puede agregar a su página de tienda incluyen:
- Testimonios para aumentar la confianza y la credibilidad
- Temporizadores de cuenta atrás para crear urgencia en su oferta
- Acordeón para mostrar preguntas frecuentes
- Incrustaciones de Facebook o Twitter para mostrar contenido generado por el usuario
Incluso puede cambiar fácilmente el título de su página de tienda de WooCommerce.
Cuando esté satisfecho con su página de tienda, haga clic en el botón verde Guardar en la esquina superior derecha de su pantalla.
Ahora puede seguir el mismo proceso para personalizar las otras partes de su tienda WooCommerce. Haga clic en ‘Editar diseño’ en cualquiera de las plantillas de su tema y personalice el diseño y el estilo para que se adapten a su marca.
Paso 4. Publicar tu página de tienda personalizada
Cuando su sitio de WooCommerce tenga el aspecto que desea, es hora de publicarlo. Para hacerlo, vaya a SeedProd » Theme Builder y en la esquina superior derecha, active el interruptor ‘Habilitar tema de SeedProd’ en la posición ‘Sí’.
Ahora puede previsualizar su página de tienda de WooCommerce en vivo en su sitio web.
Método 2: Personalizar la página de tienda de WooCommerce usando el editor de WordPress
Si prefiere no usar un constructor de terceros, WordPress y WooCommerce incluyen herramientas integradas para ajustar el diseño de su tienda. Qué opción utilice depende de su tema de comercio electrónico activo.
Usando el Editor de sitio (Temas de bloques)
Si su sitio utiliza un tema de bloques (como Twenty Twenty-Four o Twenty Twenty-Five), puede editar la plantilla de la página de tienda de WooCommerce directamente en el Editor del sitio.
Vaya a Apariencia » Editor desde su panel de WordPress. Abra la lista de Plantillas y busque la plantilla Catálogo de productos (algunos temas la etiquetan como Tienda). Haga clic en ella para abrir el editor de plantillas.
Desde allí, puedes añadir, eliminar o reorganizar bloques para cambiar el diseño de tu tienda WooCommerce. Cuando hayas terminado, haz clic en Guardar.
Usando el Personalizador clásico (Temas clásicos)
Si tu sitio utiliza un tema clásico, WooCommerce añade ajustes de visualización directamente al Personalizador de WordPress.
Ve a Apariencia » Personalizar desde tu panel de WordPress. Luego haz clic en WooCommerce » Catálogo de productos para ver las opciones de personalización.
Haz clic en el menú desplegable 'Mostrar página de tienda' y elige un diseño.
Por ejemplo, elige 'Mostrar categorías' para mostrar solo tus categorías de productos en la página de la tienda.
O elige 'Mostrar productos' para mostrar solo productos.
También puedes mostrar primero tus categorías de productos, y luego una cuadrícula de productos con la opción 'Mostrar categorías y productos'.
Además, puedes mostrar productos por:
- Popularidad
- Valoración media
- Más recientes
- Precio
También puedes elegir cuántos productos por fila y filas mostrar en cada página.
Aquí tienes una vista previa de una página de tienda estilizada usando el Personalizador de WooCommerce.
Preguntas frecuentes: Personalizar la página de la tienda de WooCommerce
¿Por qué no puedo editar mi página de tienda WooCommerce directamente en WordPress?
La página de tienda de WooCommerce se genera a partir de un archivo de plantilla llamado archive-product.php, no se almacena como contenido de página normal. Hacer clic en "Editar página" te da acceso al objeto de página, pero la cuadrícula de productos y el diseño provienen del sistema de plantillas PHP de WooCommerce, no del editor de bloques. Para cambiar el diseño, necesitas una herramienta que anule la plantilla, como SeedProd, o las opciones integradas del Personalizador y el Editor del Sitio.
¿Cómo cambio qué productos se muestran en la página de tienda de WooCommerce?
Puedes controlar la visibilidad de los productos desde la configuración individual de cada producto en WordPress. Establece un producto como "Destacado" para resaltarlo, ajusta su estado de publicación para mostrarlo u ocultarlo, o usa categorías y etiquetas de productos para organizar lo que aparece. El Personalizador de WooCommerce también te permite cambiar el orden de clasificación predeterminado (popularidad, valoración media, más recientes, precio) en Apariencia » Personalizar » WooCommerce » Catálogo de productos.
¿Cómo se llama el archivo de plantilla de la página de tienda de WooCommerce?
La página de tienda de WooCommerce utiliza el archivo de plantilla archive-product.php. Puedes encontrarlo en la carpeta del plugin de WooCommerce en woocommerce/templates/. Para personalizarlo con código, cópialo a la carpeta woocommerce/ de tu tema y modifícalo allí. Esto evita que tus cambios se sobrescriban en las actualizaciones del plugin.
¿Cómo añado un banner o una sección destacada a mi página de tienda WooCommerce?
La forma más fácil es usar el constructor de arrastrar y soltar de SeedProd. Abre la plantilla de tu página de tienda en SeedProd, luego arrastra un bloque de Carrusel de imágenes encima de la cuadrícula de productos para crear un banner deslizante. Para una sección de productos destacados, añade una nueva sección y suelta el bloque de Productos más vendidos o Productos destacados. Puedes estilizar cada sección de forma independiente con fondos, colores y tipografía personalizados.
¿Cuál es la diferencia entre la página de tienda de WooCommerce y las páginas de producto?
La página de la tienda (también llamada archivo de producto) es una página de listado que muestra todos tus productos en una cuadrícula. Las páginas de producto son páginas individuales para cada artículo, que muestran descripciones detalladas, imágenes, precio y el botón Añadir al carrito. Los clientes suelen llegar primero a la página de la tienda, navegan y luego hacen clic en las páginas de producto individuales. Ambas se pueden personalizar con SeedProd.
Espero que este artículo te haya ayudado a aprender a personalizar tu página de tienda de WooCommerce.
SeedProd te da control total sobre el diseño de tu tienda WooCommerce sin tocar una línea de código. El constructor de arrastrar y soltar lo hace sencillo, incluso si nunca antes has personalizado una tienda WooCommerce.
¿Listo para aumentar tus ventas de WooCommerce?
También te puede interesar esta guía sobre cómo configurar el seguimiento de conversiones de WooCommerce mientras estás aquí. O esta sobre los mejores plugins de afiliados 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.
