Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para ayudarte a hacer crecer tu negocio

Cómo personalizar fácilmente tu página de tienda WooCommerce

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.

Escrito por: avatar del autor Stacey Corrin
avatar del autor Stacey Corrin
Stacey Corrin es una especialista certificada en marketing de contenidos y b uevoacute;squeda con maacute;s de 15 anilde;os de experiencia escribiendo sobre WordPress, SEO y marketing digital. Gestiona el contenido de SeedProd y RafflePress, cubriendo herramientas y estrategias que ella misma utiliza y prueba activamente.
    
Revisado por: avatar del revisor Turner John
avatar del revisor Turner John
John Turner es el cofundador de SeedProd. Tiene más de 20 años de experiencia en negocios y desarrollo, y sus plugins han sido descargados más de 25 millones de veces.

En resumen: Cómo personalizar la página de tu tienda WooCommerce

Tu página de tienda de WooCommerce es un archivo de productos creado a partir de un archivo de plantilla, por lo que no puedes editarla como una página normal. Estos métodos funcionan en su lugar.

  1. Qué es: el listado principal de productos de tu tienda, generado a partir de la plantilla archive-product.php de WooCommerce
  2. Método 1: SeedProd – Constructor de arrastrar y soltar con bloques de WooCommerce y control total del diseño, sin código
  3. Método 2: Editor de WordPress – El Editor del Sitio en temas de bloques, Personalizador de WooCommerce en los clásicos
  4. Título de la página de tienda – Renómbralo, cambia su título SEO con AIOSEO, restílalo u ocúltalo
  5. Páginas de categoría – Todas provienen de una plantilla de Archivos de Productos que personalizas una vez
  6. Galería de productos – Añade imágenes de galería en el editor de productos, luego muéstralas con el bloque Galería de Imágenes de Producto de SeedProd

La primera tienda de WooCommerce que configuré para un cliente tenía una página de tienda que se sentía simple y no coincidía en absoluto con su marca.

Si te encuentras en la misma situación, no te preocupes. WooCommerce es la forma más popular de añadir comercio electrónico a WordPress, y puedes personalizar tu página de tienda de WooCommerce sin escribir una sola línea de código.

Te mostraré cómo rediseñar toda la página con un constructor de arrastrar y soltar o el editor integrado de WordPress. Después de eso, pasaremos al título de la página de tienda, tus páginas de categoría de productos y galerías de productos.

¿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.

Piénsalo como el catálogo principal o el escaparate de tu tienda. Es donde los clientes suelen navegar antes de hacer clic en páginas de productos 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)

WordPress la genera dinámicamente a partir de tu tema y los archivos de plantilla de WooCommerce.

Página de tienda WooCommerce predeterminada que muestra un diseño de cuadrícula de productos simple

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, categorías ni 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 extasciitildeetodoMejor para¿Se requiere código?
SeedProdControl total del diseño, diseños personalizados, banners, secciones destacadas, tienda WooCommerce que coincide con la marcaNo
Editor de WordPress (Editor de sitio / Personalizador)Cambios rápidos de diseño, orden de clasificación de productos, columnas, no se necesita plugin adicionalNo
AIOSEOCambiar el título SEO de la página de tienda que aparece en los resultados de búsquedaNo
Código personalizadoModificaciones avanzadas más allá de lo que ofrecen las herramientasSí (se recomienda desarrollador)

Método 1: Usar SeedProd para personalizar la página de la tienda de WooCommerce

Para el primer método, usaré SeedProd para construir una tienda WooCommerce completamente personalizada.

Creador de sitios web de WordPress arrastrar y soltar de SeedProd

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.

Cuando medí la velocidad de la página con GTmetrix, SeedProd cargó en 556 ms en comparación con los 1.882 ms de Elementor, con la mitad de las solicitudes HTTP. Eso lo convierte en una opción sólida para cualquier tienda 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 producto, carrito de compra, pago y más en 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.

Límite de la versión gratuita: La versión gratuita de SeedProd crea páginas de destino sencillas. Los bloques de WooCommerce de este tutorial vienen con el plan SeedProd Elite.

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.

Página de configuración de SeedProd que muestra el campo de clave de licencia

Puedes encontrar tu clave de licencia iniciando sesión en el sitio web de SeedProd y copiándola de la sección 'Descargas'.

Encuentra tu clave de licencia de SeedProd

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

El Theme Builder de SeedProd es lo que personaliza tu página de tienda de WooCommerce. Anula tu tema de WordPress existente, reemplazándolo con tu propio diseño.

Puedes encontrarlo yendo a SeedProd » Theme Builder desde tu panel de WordPress.

Panel de control del generador de temas de SeedProd

Hay 2 formas de crear tu tema de comercio electrónico con SeedProd:

  1. Crear cada parte (plantilla) de tu tema individualmente
  2. 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.

Galería de plantillas de temas de SeedProd con diseños de tiendas WooCommerce

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.

Selección de temas de SeedProd para WooCommerce con plantilla de tienda de muebles

Como puedes ver en la captura de pantalla a continuación, SeedProd creará automáticamente todas las plantillas para tu tema, incluyendo:

Plantillas de temas de SeedProd para WooCommerce creadas automáticamente en el Theme Builder

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.

Enlace Editar diseño de SeedProd para la plantilla de página de tienda de WooCommerce

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.

Constructor de arrastrar y soltar de SeedProd que muestra una vista previa de la página de tienda de WooCommerce

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.

Bloque de carrusel de imágenes de SeedProd añadido a la página de tienda de WooCommerce

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.

Panel de configuración del bloque de carrusel de imágenes de SeedProd

¿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.

Bloque de productos más vendidos de SeedProd en la página de tienda de WooCommerce

Este bloque mostrará sus productos más vendidos en una cuadrícula uniforme.

Productos más vendidos de WooCommerce mostrados 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.

Configuración de sección de SeedProd que muestra la opción de 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.

Panel de configuración avanzada de cuadrícula de productos de SeedProd para WooCommerce

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.

Cuadrícula de productos de SeedProd configurada con consulta personalizada para categoría de WooCommerce

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 puedes cambiar el título de tu página de tienda de WooCommerce, lo que cubriré más adelante en esta guía.

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.

Botón verde Guardar de SeedProd para publicar los cambios de la página de la tienda WooCommerce

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í’.

Conmutador de activación de SeedProd Theme Builder para activar el tema personalizado de WordPress

Ahora puede previsualizar su página de tienda de WooCommerce en vivo en su sitio web.

Vista previa en vivo de SeedProd de la página de la tienda WooCommerce personalizada

Método 2: Personalizar la página de tienda de WooCommerce usando el editor de WordPress

Si prefieres no usar un constructor de terceros, WordPress y WooCommerce incluyen herramientas integradas para ajustar el diseño de tu tienda. La opción que uses depende de tu 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.

Editando la plantilla de catálogo de productos de WooCommerce en el editor del sitio

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.

Añadiendo y reorganizando bloques en la plantilla de catálogo de productos en el editor de bloques de WordPress

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.

Panel de configuración de visualización del catálogo de productos del personalizador de WooCommerce

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'.

Página de la tienda WooCommerce que muestra categorías de productos y cuadrícula de productos

También puedes ordenar los productos por:

También puedes elegir cuántos productos por fila y filas mostrar en cada página.

Configuración de productos por fila y filas por página del personalizador de WooCommerce

Aquí tienes una vista previa de una página de tienda estilizada usando el Personalizador de WooCommerce.

Vista previa de la página de la tienda de WooCommerce del personalizador después de la personalización

Cómo cambiar el título de la página de tienda en WooCommerce

WooCommerce nombra tu página de tienda como 'Tienda' al instalarla, y muchos propietarios de tiendas nunca la tocan. Un título más descriptivo, como 'Creaciones Artesanales' para una tienda de artesanía, indica a los visitantes lo que vendes antes de que empiecen a navegar.

También puede ayudar a tu SEO. Los motores de búsqueda utilizan los títulos para entender de qué trata una página, por lo que un título con una palabra clave relevante le da a tu tienda una mejor oportunidad de clasificarse.

El método correcto depende de qué título quieras cambiar: el de la página en sí, o el de los resultados de búsqueda. Aquí están los cuatro.

Renombrar la Página de Tienda en WordPress

La solución más rápida es renombrar la página Tienda como cualquier otra página de WordPress. Ve a Páginas en tu panel de WordPress, busca tu página de tienda (normalmente listada como 'Tienda - Página de Tienda') y haz clic en Editar.

Encontrar la página de tienda de WooCommerce en la lista de Páginas de WordPress

Borra el título antiguo en la parte superior del editor, escribe el nuevo y haz clic en Actualizar.

Cambiar el título de la página de tienda en el editor de WordPress

Esto cambia el título en todas partes: en la página, en la pestaña del navegador, en los resultados de búsqueda y en cualquier miga de pan o menú de navegación que liste la página.

Cambiar el Título SEO de la Página de Tienda con AIOSEO

A veces quieres que el título en la página se mantenga mientras que el de los resultados de búsqueda vende. Ese título de listado de búsqueda es el título SEO, y es lo que la gente ve en Google antes de visitar tu tienda.

Título predeterminado de la página de tienda de WooCommerce en los resultados de búsqueda de Google

Para cambiarlo, uso All in One SEO (AIOSEO), el mejor plugin SEO de WordPress con más de 3 millones de usuarios. La versión gratuita maneja títulos de página personalizados, y la versión Pro añade soporte SEO completo para WooCommerce.

Una vez configurado el plugin, abre tu página de tienda en el editor de WordPress y desplázate hacia abajo hasta el cuadro Ajustes de AIOSEO.

Cambiar el título SEO de la página de tienda de WooCommerce en los ajustes de AIOSEO

Introduce tu título personalizado en el campo Título de la Página, o usa Smart Tags para crear uno automáticamente. Luego haz clic en Actualizar, y los motores de búsqueda mostrarán el nuevo título la próxima vez que rastreen tu página.

Cambiar el Título de la Página de Tienda en SeedProd

Si creaste tu página de tienda con SeedProd en el Método 1, el título es un bloque como todo lo demás. Ve a SeedProd » Theme Builder y haz clic en 'Editar Diseño' en la plantilla de tu página de tienda.

Haz clic en el título en el editor visual y escribe el tuyo nuevo. Desde el mismo panel, puedes ajustar su tamaño, nivel de encabezado, alineación y visibilidad en móviles.

Editar el título de la página de tienda de WooCommerce en el editor visual de SeedProd

Para cambiar el color y las fuentes del título, haz clic en la pestaña Avanzado y utiliza las opciones de estilo de apuntar y hacer clic.

Opciones de estilo avanzadas para el título de la página de tienda de WooCommerce en SeedProd

Cuando estés contento con el resultado, haz clic en Guardar.

Cómo Ocultar el Título de la Página de Tienda

A veces, el mejor título es no tener título, como cuando un banner personalizado o una imagen principal hablan por sí solos. Puedes ocultar el título de la página de la tienda con un pequeño fragmento de CSS.

Ve a Apariencia » Personalizar desde tu panel de WordPress y haz clic en CSS adicional.

Ocultar el título de la página de tienda en WooCommerce con CSS adicional

En el cuadro de texto, introduce el siguiente código y haz clic en Publicar:

.woocommerce-products-header {
   display: none;
}

Para recuperar el título más tarde, elimina el código y vuelve a publicar. También puedes añadir el fragmento con WPCode, el mejor plugin de fragmentos de código de WordPress, para que puedas activarlo y desactivarlo con un solo clic.

Ocultar no es eliminar: este CSS solo oculta el título en el front-end. El encabezado permanece en el HTML de tu página, por lo que los motores de búsqueda aún pueden leerlo.

Cómo Cambiar la Página de Tienda Predeterminada en WooCommerce

WooCommerce también te permite cambiar completamente qué página actúa como tu página de tienda. Esto es útil si has creado una página personalizada que prefieres usar como puerta de entrada a tu tienda.

Ve a WooCommerce » Ajustes y abre la pestaña Productos. En el encabezado 'Páginas de la tienda', selecciona cualquier página del menú desplegable 'Página de la tienda' y haz clic en Guardar cambios.

WooCommerce ahora utiliza esa página como tu archivo de productos. La página de la tienda también puede actuar como base para los permalinks de tus productos, así que comprueba tus URL de productos después de cambiarla.

Cómo personalizar las páginas de categorías de productos en WooCommerce

Tu página de tienda no es la única en la que aterrizan los compradores. Los motores de búsqueda a menudo envían a las personas directamente a una página de categoría de producto en su lugar, porque coincide mejor con una búsqueda específica como 'bicicletas de carretera' que con un escaparate general.

La mayoría de las tiendas dejan esas páginas como simples cuadrículas de productos. Personalizar tus páginas de categoría con un encabezado, banner y diseño adecuados ayuda a que se clasifiquen para las palabras clave que buscan tus compradores, y les da una razón para quedarse una vez que llegan.

Agrega primero las categorías de productos

Si aún no has organizado tus productos en categorías, empieza por ahí. Ve a Productos » Categorías desde tu panel de WordPress.

Añadir categorías de productos en WooCommerce desde el menú Productos

Dale a cada categoría un nombre, slug, descripción y miniatura. WooCommerce crea automáticamente una página para cada categoría, y esas son las páginas que personalizarás a continuación.

Personaliza tu plantilla de página de categoría en SeedProd

Cada página de categoría en tu tienda proviene de una única plantilla de tema llamada Archivos de Producto. Personalízala una vez y todas tus páginas de categoría se actualizarán para coincidir.

Si construiste tu tienda con SeedProd en el Método 1, esta plantilla ya forma parte de tu tema de WooCommerce. Ve a SeedProd » Theme Builder, pasa el ratón sobre la plantilla 'Archivos de Producto' y haz clic en Editar Diseño.

Enlace Editar diseño en la plantilla Archivos de producto en el Theme Builder de SeedProd

La plantilla se abre en el mismo editor de arrastrar y soltar que usaste para tu página de tienda. Encontrarás dos bloques ya colocados: Título del Archivo y Productos del Archivo.

Plantilla Archivos de producto abierta en el editor de arrastrar y soltar de SeedProd

El bloque Título del Archivo muestra automáticamente el encabezado correcto para cada categoría. Si un comprador abre tu categoría 'Bicicletas Negras', el encabezado dice 'Categoría: Bicicletas Negras' sin que tengas que hacer nada.

Bloque Título del archivo de SeedProd mostrando un encabezado de categoría dinámico

El bloque Productos del Archivo hace lo mismo para tus productos, mostrando una cuadrícula filtrada a la categoría que el comprador esté viendo.

Bloque Productos del archivo de SeedProd mostrando una cuadrícula de productos de categoría filtrada

Haz clic en cualquiera de los bloques para darle estilo en el panel de configuración de la izquierda. Puedes cambiar el tamaño, la alineación y el nivel de encabezado del título, y luego ajustar las fuentes, colores y espaciado en la pestaña Avanzado.

Ajustes avanzados de estilo para el bloque Título del archivo de SeedProd

Desde allí, puedes rediseñar todo el diseño con cualquiera de los bloques y secciones de SeedProd. Arrastra un bloque de Imagen para añadir un banner de categoría que promocione tu última oferta, o suelta el bloque de Testimonios junto a tus productos para que los compradores vean reseñas reales de clientes mientras navegan.

Aquí, moví los bloques de archivo a una columna ancha y añadí testimonios en la estrecha al lado.

Diseño de página de categoría de WooCommerce personalizado con testimonios junto a la cuadrícula de productos

Cuando estés satisfecho con el diseño de tu página de categoría, haz clic en Guardar. Si tu tema de SeedProd ya está habilitado desde el Método 1, los cambios se publican en cada página de categoría de inmediato.

Página de categoría de producto personalizada terminada en WooCommerce creada con SeedProd

¿Quieres mostrar también enlaces de categorías en la propia página de la tienda? Configura el bloque Cuadrículas de Producto en una consulta personalizada como en el Método 1, Paso 3, o activa 'Mostrar categorías' en la configuración del Catálogo de Productos.

Tu página de tienda tiene un trabajo: conseguir que los compradores hagan clic en un producto. La página del producto tiene que cerrar la venta, y una sola foto rara vez lo consigue.

He trabajado en tiendas de WooCommerce donde todo parecía pulido excepto las páginas de producto. Tenían una imagen, quizás dos, sin nada que mostrara diferentes ángulos, colores o detalles.

La adición de una galería de imágenes de productos cambió eso rápidamente. Los clientes permanecieron en la página por más tiempo, hicieron menos preguntas y pudieron inspeccionar los productos de la manera en que lo harían en una tienda real.

WooCommerce incluye una galería de productos básica de serie. Aquí te explicamos cómo configurarla y luego personalizar su apariencia con el mismo tema de SeedProd que creaste en el Método 1.

Primero, dale a tus productos algunas fotos adicionales para mostrar. Ve a Productos » Todos los productos en tu panel de WordPress, busca el producto que deseas actualizar y haz clic en Editar.

Editar un producto de WooCommerce

En el editor de productos, busca el panel 'Galería de productos' en el lado derecho. Haz clic en el enlace Añadir imágenes de la galería de productos.

Añadir imágenes a la galería de productos

Esto abre la Biblioteca de medios de WordPress, donde puedes subir fotos nuevas o elegir las existentes. Mantén presionada la tecla Shift para seleccionar varias imágenes a la vez, luego haz clic en Añadir a la galería.

Añadir imágenes a la galería de productos

Ahora verás la imagen principal de tu producto con las miniaturas de la galería debajo. Haz clic en Actualizar para guardar el producto.

Galería de productos de WooCommerce

Eso es todo con el contenido de la galería. Cómo se muestra (el diseño, el zoom y la ventana emergente) depende de la plantilla de tu página de producto, que es donde entra SeedProd.

Si creaste tu tienda con SeedProd en el Método 1, ya tienes una plantilla de Página de Producto. Controla cómo se ve cada página de producto individual.

Ve a SeedProd » Theme Builder, pasa el ratón sobre la plantilla 'Página de Producto' y haz clic en Editar diseño.

Editar la página de producto individual con SeedProd

La plantilla se abre en el mismo editor de arrastrar y soltar que usaste para la página de tu tienda.

Constructor de páginas de productos de SeedProd

La mayoría de las plantillas usan el bloque Imagen destacada del producto por defecto, que muestra una foto por producto. Para mostrar tu galería completa en su lugar, pasa el ratón sobre ese bloque hasta que veas un borde naranja, luego haz clic en el icono de la papelera para eliminarlo.

Eliminar el bloque de imagen destacada del producto

Ahora busca el bloque Imágenes de la galería de productos en el panel izquierdo y arrástralo al espacio que despejaste. Extrae cada imagen de la galería directamente de WooCommerce, por lo que el bloque se mantiene actualizado cuando cambias las fotos de un producto.

Añadir bloque de imagen de galería de productos en SeedProd

Haz clic en el bloque de la galería para abrir su configuración. La opción de zoom de imagen permite a los compradores magnificar una foto al pasar el ratón sobre ella, y puedes ajustar la posición, el tamaño y los colores del botón de zoom.

Personalizaciones de zoom de la galería de imágenes de productos

También puedes estilizar los bordes de la imagen principal y las miniaturas, y la pestaña Avanzado añade controles de espaciado, visibilidad del dispositivo y animación.

Ajustes de borde de la galería de imágenes de productos

Cuando estés satisfecho con el diseño, haz clic en Guardar. Si tu tema de SeedProd ya está habilitado desde el Método 1, el cambio se aplica de inmediato.

Aquí tienes la galería de productos terminada en acción, con un carrusel interactivo y una vista de ventana emergente a pantalla completa:

Ejemplo de galería de imágenes de productos de WooCommerce con SeedProd

Los vídeos de productos también funcionan: puedes arrastrar el bloque de Vídeo de SeedProd a la misma plantilla para incrustar un clip de YouTube o Vimeo debajo de tu galería. Para una galería completa de vídeos de productos, el plugin YouTube Feed de Smash Balloon puede mostrar demostraciones y reseñas de clientes en un solo lugar.

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.

¿Puedo personalizar cada página de categoría de producto de WooCommerce de forma diferente?

Sí. Los bloques dinámicos como Título del archivo y Productos del archivo se adaptan automáticamente a cada categoría, por lo que cada página muestra su propio encabezado y productos. Para diferencias mayores, como un banner único para una categoría, puedes usar las condiciones de visualización de SeedProd para controlar qué plantillas se aplican dónde.

¿Las páginas de categorías personalizadas de WooCommerce ayudan al SEO?

Pueden ayudar. Las páginas de categorías se dirigen a palabras clave de compra más amplias que los productos individuales, y la mayoría de las tiendas las dejan casi vacías, por lo que un pequeño esfuerzo vale mucho. Agrega una descripción corta de la categoría rica en palabras clave, un encabezado claro e imágenes de calidad. Un plugin de SEO como AIOSEO también puede establecer un título SEO y una meta descripción personalizados para cada página de categoría.

¿Puedo incluir palabras clave en el título de mi página de tienda de WooCommerce?

Sí, y puede ayudar a tu SEO. Los motores de búsqueda utilizan el título para entender qué vende tu tienda, por lo que un título como "Joyería hecha a mano" funciona mejor que un simple "Tienda". Sin embargo, mantenlo natural. Escribe el título para tus clientes primero y asegúrate de que representa claramente lo que vendes.

¿Por qué sigue apareciendo el título antiguo de la página de mi tienda en los resultados de búsqueda?

Los motores de búsqueda no actualizan su índice en el momento en que cambias un título. Pueden pasar días o incluso semanas hasta que el nuevo título de la página de la tienda aparezca en los resultados. Para acelerar las cosas, solicita un nuevo rastreo de la página en Google Search Console, y luego dale tiempo a Google para que se ponga al día.

¿Cómo cambio la imagen predeterminada del producto en WooCommerce?

La imagen de producto predeterminada es la imagen destacada del producto. Para cambiarla, edita el producto, haz clic en la foto actual en el panel ‘Imagen de producto’ y elige una nueva de la Biblioteca de medios. Esta imagen aparece en la cuadrícula de tu página de tienda y como la primera imagen de tu galería de productos.

¿Puedo agregar una galería de imágenes de productos en WooCommerce sin un plugin?

Sí. El panel ‘Galería de productos’ en el editor de productos está integrado en WooCommerce, y la mayoría de los temas muestran las imágenes adicionales con miniaturas. El comportamiento del zoom, la ventana emergente y el control deslizante dependen del tema. Una herramienta como SeedProd te da control sobre eso sin necesidad de código.

No necesitas un desarrollador ni una sola línea de código para personalizar tu página de tienda de WooCommerce.

SeedProd se encarga del rediseño completo de tus páginas de tienda y categorías, el editor de WordPress cubre ajustes rápidos de visualización, y renombrar u ocultar el título de la tienda lleva unos pocos clics.

Puedes empezar a personalizar tu página de tienda ahora mismo.

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 cómo crear una página de carrito de WooCommerce personalizada.

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTubeXFacebook para obtener más consejos y contenido útil para hacer crecer tu negocio.

avatar del autor
Stacey Corrin Especialista en marketing de contenidos
Stacey Corrin es una especialista certificada en marketing de contenidos y b uevoacute;squeda con maacute;s de 15 anilde;os de experiencia escribiendo sobre WordPress, SEO y marketing digital. Gestiona el contenido de SeedProd y RafflePress, cubriendo herramientas y estrategias que ella misma utiliza y prueba activamente.

Descargo de responsabilidad: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Solo recomendamos productos que creemos que aportarán valor a nuestros lectores.

Administra este sitio de WordPress chateando con ChatGPT o Claude. Plugin gratuito. Pruébalo gratis