Últimas noticias de SeedProd

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

Cómo mostrar productos relacionados en WooCommerce paso a paso

Cómo mostrar productos relacionados en WooCommerce paso a paso 

Escrito por: avatar de autor Stacey Corrin
avatar de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: avatar del revisor Turner John
avatar del revisor Turner John
John Turner es el cofundador de SeedProd. Cuenta con más de 20 años de experiencia empresarial y de desarrollo y sus plugins se han descargado más de 25 millones de veces.

For a long time, I let WooCommerce handle related products on its own. I’d set up a few upsells or cross-sells and moved on. But I started noticing how often customers left without exploring anything else, especially when the suggestions didn’t match what they were really looking for.

I began testing different ways to display related products. I moved them higher on the page, added them to the cart, and used SeedProd to design layouts that actually made sense. Those small changes led to more clicks and bigger orders.

In this guide, I’ll show you how to display WooCommerce related products using both the built-in tools and a drag-and-drop visual builder, based on what’s worked best for me.

Quick Summary: How to Show Related Products in WooCommerce

CaracterísticaDefault WooCommerceSeedProd Builder
Setup DifficultyModerate (product-by-product)Easy (drag and drop)
Design ControlLimitadoFull visual control
Placement OptionsProduct page onlyProduct, cart, or anywhere
Custom LayoutsNot supportedFully customizable
Upsells & Cross-Sells
Vista previa para móvilesNo
Plugin Required?NoYes (SeedProd)

Dicho esto, veamos cómo mostrar productos relacionados en WooCommerce.

Si no quieres cambiar tu tema de WooCommerce o añadir un plugin de productos relacionados a tu sitio, los propietarios de tiendas pueden mostrar productos relacionados usando la configuración por defecto de WooCommerce.

Este método no ofrece muchas opciones de personalización, pero proporciona una forma sencilla de realizar ventas cruzadas y ventas adicionales de productos para aumentar el valor medio de pedido de las ventas de la tienda.

Step 1. Add Linked Products in the WooCommerce Editor

En primer lugar, vaya a Productos " Todos los productos desde el administrador de WordPress y edite cualquier producto de WooCommerce. Dentro de las opciones del producto, desplázate hasta la sección Datos del producto y busca la pestaña Productos vinculados.

Configuración de los productos vinculados de WooCommerce

La sección de Productos Vinculados tiene 2 opciones diferentes: Upsells y Cross-Sells. 

Recuerde que las ventas adicionales son artículos similares al producto original pero con un precio más elevado. Las ventas cruzadas son productos similares que los compradores pueden querer comprar además del producto principal.

Comience a escribir los nombres de los productos en el campo que desee utilizar y haga clic en los elementos correctos cuando aparezcan.

Añadir productos relacionados con WooCommerce

After adding cross-sells or upsells to your WooCommerce products, scroll up the page and click the Preview Changes button.

Verás los productos relacionados debajo de la descripción de tu producto actual.

Vista previa de productos relacionados con WooCommerce

Ahora, veamos cómo mostrar recomendaciones personalizadas de productos relacionados con SeedProd.

SeedProd Drag-and-drop WordPress website builder

SeedProd one of the best drag-and-drop website and page builder for WordPress. It lets you create and customize any part of your WordPress site visually and without code.

También puede utilizar SeedProd para personalizar su tienda WooCommerce. Con plantillas completas de sitios web de WooCommerce y potentes bloques de WordPress, puedes adaptar tu tienda online a tus necesidades específicas de diseño sin necesidad de contratar a un desarrollador.

Por ejemplo, puede crear páginas de categorías de productos personalizadas, configurar las descripciones de las características de los productos e incluso añadir un carro de menús a la navegación de su tienda.

Este método reemplazará tu tema actual de WooCommerce con un diseño personalizado. 

No requiere código, shortcodes, temas hijo, complementos o plugins de productos recomendados. Ni siquiera tendrá que editar su archivo functions.php. En su lugar, puede personalizar todo visualmente con cero complicaciones.

 Así que sigue los siguientes pasos para añadir fácilmente nuevos productos recomendados a WooCommerce con el Theme Builder de SeedProd.

Step 1. Install and Activate SeedProd With WooCommerce Support

Para empezar con este método, tendrá que obtener la versión Elite de SeedProd.

Viene con soporte completo para WooCommerce y todos los bloques y secciones que necesitarás para personalizar, hacer ventas cruzadas y upsell de productos en tu tienda.

Después de elegir su plan y crear su cuenta, diríjase a la pestaña Descargas de su cuenta SeedProd y descargue el plugin.

Encuentre su clave de licencia SeedProd

Mientras esté allí, copie la clave de licencia del producto, ya que la necesitará en breve.

Ahora ve a tu sitio web WordPress y sube el archivo .zip de SeedProd a tu tienda. Si necesitas ayuda con esto, puedes seguir estas instrucciones sobre cómo instalar y activar un plugin de WordPress.

Una vez que el plugin esté activo, vaya a SeedProd " Configuración, y pegue la clave de licencia que ha copiado hace un momento en el campo disponible.

introduzca su clave de licencia

Haga clic en el botón Verificar clave, y ya está listo para empezar a personalizar su sitio WooCommerce.

Step 2. Choose a WooCommerce Template Kit in SeedProd

A continuación, ve a SeedProd " Theme Builder desde tu panel de WordPress. Aquí es donde podrás personalizar cada parte de tu tema WooCommerce, pero primero, tendrás que elegir una plantilla.

elija un kit de sitio web seedprod

Para elegir una plantilla, haga clic en el botón Temas.

También puede seleccionar el filtro WooCommerce para ver sólo los kits de plantillas WooCommerce.

Kits de plantillas WooCommerce

Cuando encuentres un kit que te guste, pasa el ratón por encima y haz clic en el icono de la marca de verificación.

Elige un kit de plantilla WooCommerce

SeedProd importará todo el kit a su sitio WordPress, incluyendo páginas de productos, carros de compra, checkouts, archivos de productos y páginas de tienda. Usted puede ver todas estas partes de la plantilla en el tablero de instrumentos Theme Builder.

Partes temáticas de SeedProd

También encontrarás que SeedProd crea automáticamente páginas de contenido como cualquier página acerca de, contacto y servicio de la plantilla demo. Puedes encontrar esas páginas en el menú de páginas predeterminado de WordPress, donde puedes hacer clic para editarlas con el constructor de arrastrar y soltar de SeedProd. 

editar página con seedprod

Después de instalar tu plantilla, estás listo para empezar a añadir productos relacionados a tu tienda. Empecemos por mostrar los productos relacionados en la página del carrito.

Para editar la página del carrito, asegúrese de que está en el panel de control del Creador de temas, busque la plantilla Carrito, pase el ratón sobre ella y haga clic en el enlace Editar diseño.

editar diseño de página de carrito

La página de su cesta de la compra se abrirá ahora en el editor visual de SeedProd.

Cuando se abra la página de tu carrito, verás que tiene un diseño de 2 columnas con bloques y secciones de WordPress a la izquierda y una vista previa en vivo a la derecha.

Personalizar la página del carrito con SeedProd

Si haces clic en cualquier parte de la vista previa, podrás personalizar la configuración y las opciones de estilo de ese bloque con unos pocos clics. Por ejemplo, los ajustes del bloque Carrito te permiten cambiar la tipografía, los estilos de los botones, los colores de los campos, etc.

Configuración del bloque del carro SeedProd

Añadir productos relacionados a la página de su carrito es súper fácil con SeedProd.

Desplácese hasta el encabezado Etiquetas de plantilla de WooCommerce en la barra lateral izquierda y encuentre el bloque Productos relacionados. Ahora haz clic y arrastra el bloque a su lugar en la vista previa de tu página.

Bloque relacionado con productos WooCommerce

Dentro de la configuración del bloque, puede ajustar las columnas y cambiar el número de productos relacionados. También puede ordenar productos específicos eligiendo una opción en el menú desplegable:

  • Fecha
  • Identificación del producto
  • Menú Pedidos
  • Popularidad
  • Al azar
  • Clasificación
  • Título
Productos relacionados Ajustes del bloque

En la pestaña Configuración avanzada, puede ajustar el estilo de su bloque de productos relacionados. Por ejemplo, puedes cambiar la tipografía, los colores, los botones, las sombras de las imágenes, etc.

Configuración avanzada del bloqueo de productos relacionados

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

Guardar la página del carro de SeedProd

Ahora vamos a ver cómo up-sell productos en WooCommerce con SeedProd.

Step 4. Show Upsell Offers on Single Product Pages

Si quieres hacer up-sell de productos WooCommerce, puedes usar el bloque Upsell de SeedProd. Pero primero, tendrás que vincular los productos en la configuración de tu producto WooCommerce siguiendo los pasos del Método 1.

El bloque Upsell de SeedProd sólo funciona en plantillas de página de producto único, por lo que tendrá que volver al panel de control del Theme Builder y editar su plantilla de página de producto.

Editar el diseño de la página de producto

La plantilla que estamos utilizando ya incluye recomendaciones de productos. Así que vamos a eliminar los productos relacionados haciendo clic en el icono de la papelera.

Eliminar el bloque de productos relacionados

A continuación, busque el bloque Upsell en la sección WooCommerce Template Tags y arrástrelo a su página.

Bloque SeedProd Upsells

No verá una vista previa en vivo de este bloque, pero puede personalizarlo como el bloque de productos relacionados.

Continúa personalizando tu sitio WooCommerce hasta que estés contento de que tenga el aspecto que deseas. Y no olvides hacer clic en el botón Guardar para guardar tus cambios regularmente.

Step 5. Publish Your Theme and Make It Live

Cuando esté listo para hacer sus cambios en vivo en su sitio web, vaya a la página Theme Builder y encontrar el Habilitar Tema SeedProd. Gírelo a la posición "Sí", y sus cambios serán publicados.

activar el tema seedprod

Ahora puede previsualizar las páginas de productos individuales y las páginas de carritos para ver recomendaciones de productos similares.

He aquí un ejemplo de la página del carrito:

Productos relacionados con WooCommerce en la página del carrito de la compra

Y aquí están los ejemplos de upsell en la página del producto:

WooCommerce Upsell productos en la página de producto único

Si desea ocultar los productos relacionados, simplemente elimine la nueva sección de su página.

¡Ya está!

Frequently Asked Questions About Related Products in WooCommerce

¿Qué son los productos relacionados con WooCommerce?
Related products are suggestions WooCommerce shows on a product page to help customers discover other items they might want. These are usually based on shared categories or tags, but you can also set your own using the Linked Products tab.
¿Existe un límite de productos relacionados en WooCommerce?
There’s no strict limit, but it’s best to keep it to 3–5 items. Too many can overwhelm shoppers and clutter the page. With tools like SeedProd, you can choose exactly how many to show and where to display them.
What is the difference between upsells and cross-sells in WooCommerce?
Upsells are higher-end or upgraded versions of the current product. Cross-sells are related or complementary products you suggest during the checkout process. You can add both in the Linked Products section when editing a product.
Can I customize the related products section in WooCommerce?
Not with the default WooCommerce settings. You’d need a plugin or visual builder like SeedProd to change the layout, placement, and number of related products shown on your pages.

Showing related products in WooCommerce isn’t just about filling space on the page. It’s a simple way to help shoppers find more of what they want, and it can quietly boost your revenue in the process.

If you’re happy with the default setup, WooCommerce gives you what you need to get started. But if you want more control over how things look and where they appear, SeedProd makes it easy to customize everything without writing a single line of code.

Puede que también te gusten estos otros tutoriales y consejos de 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.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.