Cómo mostrar productos destacados de WooCommerce (+ productos relacionados) 

En una tienda de WooCommerce que administraba, solía dejar que el diseño predeterminado decidiera lo que veían los compradores. Los clientes se iban sin explorar nada más allá del producto en el que aterrizaban.

Dos pequeños cambios solucionaron eso: productos destacados de WooCommerce para poner los mejores artículos donde la gente realmente mira, y productos relacionados para sugerir una siguiente compra sensata. Juntos, condujeron a más clics y pedidos más grandes.

En esta guía, te mostraré 3 formas de mostrar productos destacados, luego cómo configurar y personalizar productos relacionados, ventas adicionales y ventas cruzadas.

¿Qué son los Productos Destacados de WooCommerce?

Un producto destacado es uno que marcas manualmente en WooCommerce para resaltarlo. Una vez que configuras un producto como “Destacado”, puedes mostrarlo en secciones especiales de tu sitio, separado de tu catálogo habitual.

Los mejores productos para destacar suelen ser tus más vendidos, las novedades o los artículos de alto margen. Muchos propietarios de tiendas rotan los productos destacados por temporada, destacando el equipo de invierno en diciembre o los artículos de vuelta al cole en agosto.

Los productos destacados no son lo mismo que los productos relacionados. Tú eliges los productos destacados, mientras que WooCommerce elige los productos relacionados automáticamente basándose en categorías y etiquetas compartidas. Cubriré cómo configurar productos relacionados más adelante en esta guía.

Cómo Añadir Productos Destacados en WooCommerce

Antes de poder mostrar productos destacados, primero debes marcarlos en WooCommerce. Puedes hacerlo editando cualquier producto existente.

Ve a Productos » Todos los productos desde tu área de administración de WordPress. Luego, pasa el ratón sobre un producto y haz clic en la opción Editar.

A continuación, busca el panel “Publicar” en el lado derecho del editor de WordPress. Desde allí, haz clic en Editar junto al encabezado “Visibilidad en el catálogo”.

Haz clic en la casilla de verificación "Este es un producto destacado" y selecciona Aceptar. Luego haz clic en Actualizar para guardar tus cambios.

Repite este proceso para cada producto que desees establecer como destacado. Para agilizar las cosas, puedes hacer clic en la opción Edición rápida y encontrar la casilla “Producto destacado” en ese panel.

Alternativamente, puedes hacer clic en el icono de estrella junto a cada producto para destacarlo.

¿No estás seguro de qué artículos mostrar? Empieza con tus más vendidos u ofertas de temporada en tus páginas de producto.

Una vez que hayas marcado tus productos como destacados, aquí tienes tres formas de mostrarlos en tu tienda.

Método 1: Mostrar productos destacados de WooCommerce con SeedProd

Este primer método utiliza SeedProd para mostrar varios productos destacados en tu tienda a la vez.

SeedProd es uno de los mejores constructores de sitios web de WordPress, con más de 1 millón de usuarios. Puedes crear un tema de WordPress personalizado con su constructor de arrastrar y soltar, sin necesidad de código.

Para los propietarios de tiendas, la parte útil es la integración con WooCommerce. Puedes mostrar datos de productos en vivo en cualquier lugar de tu sitio, y las flexibles rejillas de productos facilitan la creación de diseños personalizados sin código.

Así es como se usa SeedProd para mostrar tus productos destacados de WooCommerce.

Paso 1. Instalar y Activar SeedProd

Comienza instalando y activando SeedProd en tu sitio de WordPress.

Puedes seguir esta guía sobre cómo instalar un plugin de WordPress si necesitas ayuda.

Después de activar SeedProd, ve a SeedProd » Ajustes e introduce tu clave de licencia de SeedProd.

Puedes encontrar la clave de licencia en la sección “Descargas” de tu panel de cuenta en el sitio web de SeedProd.

Después de introducir tu clave de licencia, haz clic en el botón Verificar Clave para almacenar la información de tu cuenta.

Paso 2. Crear un Tema de WooCommerce

A continuación, configura tu tienda de WooCommerce.

SeedProd te ofrece dos formas de hacerlo:

• Tema de WooCommerce preconstruido: importa una plantilla de tema de WooCommerce lista para usar, y SeedProd crea todas tus páginas de tienda automáticamente.
• Partes individuales del tema: crea cada parte de tu tienda una a una usando el botón Plantillas de tema.

Usaremos el tema precompilado para esta guía, ya que configura todo con un solo clic.

Para crear un nuevo tema de WooCommerce, ve a SeedProd » Theme Builder y haz clic en el botón Themes.

Esto abre la biblioteca de temas de SeedProd. Todos los temas son aptos para móviles y puedes editar el diseño en el constructor de arrastrar y soltar.

Pasa el ratón sobre cualquier diseño y haz clic en la marca de verificación para importarlo. Estamos usando el "Tema de inicio de WooCommerce" aquí.

Después de importar, verás todas las plantillas que componen tu sitio. Puedes editar cada una en el constructor de SeedProd, como personalizar la página de la Tienda.

Paso 3. Añadir la cuadrícula de productos destacados de WooCommerce

En este paso, editarás la página de la Tienda y añadirás una cuadrícula de productos que muestre solo tus productos destacados.

Busca la plantilla de la página de la Tienda en el constructor de temas y haz clic en Edit Design.

El constructor de páginas de SeedProd muestra bloques y secciones a la izquierda y una vista previa en vivo a la derecha.

Haz clic en cualquier elemento para editar su configuración.

Haz clic en un producto para abrir el panel de la cuadrícula de productos, donde puedes:

• Cambiar el número de columnas
• Mostrar productos por tipo o categoría para diseños de productos más enfocados
• Mostrar paginación
• Cambiar el orden de los productos

Puedes personalizar las fuentes, tamaños de fuente, colores, espaciado y más en la pestaña Avanzado.

Añadir contenido funciona de la misma manera. Arrastra un bloque desde el panel izquierdo y suéltalo en la página.

Desplázate hacia abajo hasta el panel de bloques de WooCommerce en la barra lateral izquierda. Luego, busca el bloque Productos destacados y arrástralo a tu página.

Haz clic en el bloque para abrir su configuración. Filtra tus productos por estado de Destacado automáticamente.

Todo lo que queda es personalizar la cuadrícula de productos según tus necesidades. Puedes hacer que los productos destacados destaquen cambiando el color de la etiqueta, el borde de la imagen o añadiendo un encabezado encima de la cuadrícula.

Cuando estés satisfecho con el diseño, haz clic en el botón verde Guardar.

Puedes repetir este proceso para personalizar el resto de tu tema, incluyendo:

• Archivos de productos
• Página de Producto
• Encabezado y Pie de Página
• Página del Blog
• Barra lateral
• Página de inicio

Paso 4. Publica tu tema de WooCommerce

Una vez que hayas terminado de configurar tus productos destacados, estarás listo para lanzar.

Para ello, ve a SeedProd » Theme Builder y activa el interruptor Enable SeedProd Theme a la posición "On".

¡Eso es todo! Ahora puedes previsualizar tu tienda y ver tus productos destacados en vivo.

Método 2: Usa el Bloque de Producto Destacado de WooCommerce

WooCommerce tiene un bloque integrado de Producto destacado que puedes añadir a cualquier página o publicación de tu tienda online. No se necesita ningún plugin adicional.

Tiene menos opciones que SeedProd, pero es rápido de configurar si solo necesitas una visualización básica.

Para usar este método, crea o edita una página y haz clic en el icono más (+) en el editor de bloques de WordPress para añadir un nuevo bloque. Luego, escribe “WooCommerce” en el campo de búsqueda y haz clic en el bloque Producto destacado.

A partir de ahí, elige un producto para mostrar y haz clic en Done.

Tu producto aparece en la página de inmediato.

La configuración del bloque te permite controlar:

• Descripción
• Precio
• Superposición
• Opacidad de la superposición

El bloque Producto destacado muestra un producto a la vez. Para una cuadrícula de varios artículos destacados, añade el bloque Colección de productos en su lugar y elige su colección “Productos destacados”, que filtra por estado de destacado por ti.

Haz clic en Publicar o Actualizar cuando hayas terminado. Luego, previsualiza tu página para ver los productos en directo.

Si tu tienda utiliza un tema clásico, puedes usar el mismo bloque para mostrar productos destacados en tu barra lateral de WooCommerce. Ve a Apariencia » Widgets, haz clic en el icono más en cualquier barra lateral y añade el bloque allí.

Guarda los cambios y visita cualquier página con esa barra lateral para ver el widget.

Método 3: Usar el Shortcode de Producto Destacado de WooCommerce

El tercer método utiliza un shortcode. Funciona en el editor clásico de WordPress, o si deseas añadir productos destacados directamente en una plantilla de tema de WordPress.

Edita o crea una página y pega este shortcode en el editor.

[featured_products]

Cuando previsualices la página, verás todos tus productos destacados en una cuadrícula.

Puedes controlar cuántos productos se muestran y cuántas columnas usar. Por ejemplo:

[featured_products limit="2" columns="2"]

También puedes filtrar por categoría usando category="slug", cambiar el orden de clasificación con orderby="date" o orderby="popularity", y establecer la dirección con order="ASC" o order="DESC".

La documentación actual de WooCommerce solo enumera [products visibility="featured"], que hace el mismo trabajo. Ambos shortcodes funcionan, pero la versión products es la documentada.

Prueba diferentes valores hasta que encuentres un diseño que funcione. Las opciones son limitadas en comparación con SeedProd, pero es la forma más rápida de mostrar productos destacados sin configuración.

Cómo configurar productos relacionados en WooCommerce (sin necesidad de plugin)

Los productos destacados ponen tus mejores artículos delante de los compradores. Los productos relacionados hacen el trabajo opuesto: sugieren lo que alguien podría querer a continuación, basándose en el producto que ya está viendo.

WooCommerce genera su sección de “Productos relacionados” automáticamente a partir de categorías y etiquetas compartidas, por lo que no puedes elegir manualmente esas sugerencias sin un plugin. Lo que sí puedes controlar son las ventas adicionales (upsells) y las ventas cruzadas (cross-sells), que configuras por producto.

Una venta adicional es una versión más cara del producto que alguien está viendo. Una venta cruzada es un producto que combina con el que está en su carrito, como un estuche sugerido junto a un teléfono.

Así es como se compara la configuración predeterminada con la personalización de sus productos relacionados con SeedProd:

Característica	WooCommerce predeterminado	Constructor SeedProd
Dificultad de configuración	Moderado (producto por producto)	Fácil (arrastrar y soltar)
Control de diseño	Limitado	Control visual completo
Opciones de ubicación	Solo página de producto	Producto, carrito o en cualquier lugar
Diseños personalizados	No soportado	Totalmente personalizable
Ventas adicionales y cruzadas	Sí	Sí
Vista previa móvil	No	Sí
¿Se requiere plugin?	No	Sí (SeedProd)

Empecemos con la ruta integrada.

Paso 1. Añadir productos vinculados en el editor de WooCommerce

Vaya a Productos » Todos los productos desde su administrador de WordPress y edite cualquier producto de WooCommerce. Dentro de las opciones del producto, desplácese hacia abajo hasta la sección Datos del producto y encuentre la pestaña Productos vinculados.

Paso 2. Elegir ventas adicionales y ventas cruzadas para cada producto

La sección Productos vinculados tiene 2 opciones: Ventas adicionales y Ventas cruzadas.

Empieza a escribir nombres de productos en el campo que desees utilizar y haz clic en los artículos correctos cuando aparezcan.

Paso 3. Previsualizar productos relacionados en la página del producto

Después de agregar ventas cruzadas o adicionales a sus productos de WooCommerce, desplácese hacia arriba en la página y haga clic en el botón Vista previa de los cambios. Verá los productos relacionados debajo de la descripción de su producto actual.

Este método no ofrece muchas opciones de personalización, pero es una forma rápida de empezar a vender más y a realizar ventas cruzadas. Si desea controlar dónde aparecen las sugerencias y cómo se ven, la siguiente sección cubre eso.

Cómo personalizar productos relacionados de WooCommerce con SeedProd

La sección predeterminada de productos relacionados solo se encuentra en sus páginas de producto, y no puede cambiar su apariencia. Con SeedProd, puede colocar recomendaciones de productos en su página de carrito, páginas de producto o en cualquier otro lugar, y darles estilo para que coincidan con su tienda.

Necesitará SeedProd instalado con un tema de WooCommerce importado para esto. Si aún no lo ha hecho, siga los pasos 1 y 2 del Método 1 primero.

Paso 1. Añadir Productos Relacionados a tu Diseño de Página de Carrito

La página del carrito es un lugar inteligente para las recomendaciones porque los compradores ya han decidido comprar. Para editar la suya, vaya al panel del Creador de temas, busque la plantilla del Carrito, pase el cursor sobre ella y haga clic en Editar diseño.

Su página de carrito de compras se abre en el mismo editor visual que usó anteriormente. Hacer clic en cualquier lugar de la vista previa le permite personalizar la configuración de ese bloque, como la tipografía del bloque del Carrito, los estilos de los botones y los colores de los campos.

Ahora desplácese hasta el encabezado Etiquetas de plantilla de WooCommerce en la barra lateral izquierda y encuentre el bloque Productos relacionados. Haga clic y arrastre el bloque a su vista previa de página.

Dentro de la configuración del bloque, puede ajustar las columnas y cambiar el número de productos relacionados. También puede ordenar los productos por fecha, popularidad, calificación, título y más.

En la pestaña de configuración Avanzada, puede ajustar el estilo de su bloque de productos relacionados, como la tipografía, los colores, los botones y las sombras de las imágenes.

Cuando estés contento con el aspecto de todo, haz clic en el botón Guardar en la esquina superior derecha de tu pantalla.

Paso 2. Mostrar Ofertas de Ventas Adicionales en Páginas de Producto Individuales

Para vender productos adicionales de WooCommerce, use el bloque Ventas adicionales de SeedProd. Extrae las ventas adicionales que vinculó en la configuración de su producto de WooCommerce anteriormente, así que configúrelas primero.

El bloque Ventas adicionales solo funciona en plantillas de página de producto único, así que regrese al panel del Creador de temas y edite su plantilla de Página de producto.

La plantilla que estamos utilizando ya presenta recomendaciones de productos. Así que eliminemos esos productos relacionados haciendo clic en el icono de la papelera, dejando espacio para las ventas adicionales.

A continuación, encuentre el bloque Ventas adicionales en la sección Etiquetas de plantilla de WooCommerce y arrástrelo a su página.

No verás una vista previa en vivo de este bloque, pero puedes personalizarlo como el bloque de productos relacionados. No olvides hacer clic en Guardar cuando hayas terminado.

Paso 3. Publicar y Previsualizar tus Productos Relacionados

Si tu tema de SeedProd aún no está activo, activa el interruptor Activar tema de SeedProd, de la misma manera que lo hiciste en el Método 1. Luego, previsualiza tus páginas de producto y carrito para ver las recomendaciones.

Aquí tienes un ejemplo de productos relacionados en la página del carrito:

Y aquí tienes las ventas adicionales en la página del producto:

Si alguna vez quieres ocultar los productos relacionados, elimina el bloque de tu plantilla y vuelve a guardar.

Preguntas frecuentes sobre productos destacados y relacionados de WooCommerce

¿Cómo elimino el estado de destacado de un producto en WooCommerce?

Ve a Productos » Todos los Productos en tu panel de WordPress y haz clic en el icono de estrella junto al producto para desactivar el estado de destacado. También puedes usar Edición Rápida y desmarcar la casilla Producto Destacado, luego guardar. El producto ya no aparecerá en las visualizaciones de productos destacados ni en los shortcodes.

¿Cómo muestro solo productos destacados en mi página de tienda de WooCommerce?

La forma más fácil es usar SeedProd para personalizar tu página de tienda de WooCommerce y agregar un bloque de Productos Destacados que se filtra automáticamente por estado destacado. Si prefieres el bucle de productos predeterminado, necesitarás un plugin o un fragmento de código que filtre los productos por la marca de destacado.

¿Puedo limitar cuántos productos destacados se muestran?

Sí. Con el método de shortcode, agrega limit="4" para establecer el número: [featured_products limit="4"]. Con el bloque de cuadrícula de productos de SeedProd, estableces el recuento de productos directamente en el panel de configuración del bloque, sin necesidad de código.

¿Los productos destacados de WooCommerce aparecen automáticamente en mi página de inicio?

No. Marcar un producto como destacado solo le otorga ese estado en WooCommerce. Aún necesitas añadir un bloque, shortcode o widget a una página para que se muestren. La mayoría de los propietarios de tiendas añaden productos destacados a su página de tienda o página de inicio manualmente utilizando uno de los tres métodos de esta guía.

¿Cuál es la diferencia entre ventas adicionales (upsells) y ventas cruzadas (cross-sells) en WooCommerce?

Las ventas adicionales son versiones de mayor precio o mejoradas del producto actual y se muestran en la página del producto individual. Las ventas encadenadas son productos complementarios que aparecen en la página del carrito durante el proceso de pago. Puedes añadir ambos en la sección Productos vinculados al editar un producto.

¿Hay un límite para los productos relacionados en WooCommerce?

No hay un límite estricto, pero es mejor mantenerlo entre 3 y 5 artículos. Demasiados pueden abrumar a los compradores y desordenar la página. Con herramientas como SeedProd, puedes elegir exactamente cuántos productos relacionados mostrar y dónde mostrarlos.

Más Formas de Personalizar WooCommerce

¿Quieres hacer más con tu tienda de WooCommerce?

Aquí tienes algunas guías que pueden ayudarte:

• Cómo Personalizar la Pestaña de Información Adicional de WooCommerce
• ¿Cómo personalizar tu página de carrito de WooCommerce?
• Cómo añadir valoraciones de estrellas a las páginas de productos de WooCommerce
• Cómo mostrar categorías y etiquetas de productos en WooCommerce
• Cómo obtener y mostrar descripciones de productos en WooCommerce
• Cómo añadir botones personalizados de Añadir al carrito en WooCommerce
• Cómo crear una página de agradecimiento de WooCommerce (fácilmente)
• Cómo solucionar que la vista del carrito de WooCommerce no funcione
• Cómo ocultar productos sin stock en WooCommerce

Ahora sabes cómo mostrar productos destacados de tres maneras y cómo colocar productos relacionados, ventas adicionales y ventas cruzadas exactamente donde los compradores los verán. Elige el método que se adapte a tu tienda.

¿Listo para darle un aspecto personalizado a tus recomendaciones de productos? No necesitas tocar ni una línea de código. Obtén SeedProd y empieza a diseñar tu tienda hoy mismo.

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