Cómo agregar productos relacionados con WooCommerce: 3 métodos

¿Está buscando formas de mejorar las conversiones de sus productos? Agregar una sección de productos relacionados personalizados para su tienda en línea puede ser una excelente manera de llevar a sus clientes a comprar más de sus artículos. Para ayudarlo a hacer esto, le traemos nuestra guía sobre cómo agregar productos relacionados con WooCommerce.

Mostrar productos similares puede ser una excelente manera de mejorar sus conversiones. Si presenta a sus clientes la gama correcta de productos, seguramente mejorará sus ventas. Pero antes de pasar al proceso de hacerlo, veamos brevemente por qué necesita la sección de productos relacionados.

¿Por qué usar secciones de productos relacionados en WooCommerce?

La venta cruzada es una parte importante para mejorar sus tasas de conversión. Al brindar opciones para que los clientes compren productos similares, puede alentarlos a considerar comprar más productos por el valor agregado. Del mismo modo, también puede usar ventas cruzadas para promocionar productos que ve que se compran juntos. Si puede realizar un buen seguimiento de sus compras, siempre puede optar por agregar productos específicos a su lista de ventas cruzadas para obtener más ganancias.

Este método en sí es muy prominente en los negocios en línea a gran escala. Por ejemplo, en Amazon, puede verlos ofreciendo ventas cruzadas utilizando secciones etiquetadas como " Comprados juntos con frecuencia" , " los clientes también compraron" o " productos de marcas similares".

Entonces, si desea aumentar sus ventas , le recomendamos que agregue y personalice su sección de Productos relacionados con WooCommerce. Ahora que tiene una idea de su importancia, veamos cómo podemos agregarlos a su sitio web de comercio electrónico.

Cómo agregar productos relacionados con WooCommerce

De forma predeterminada, WooCommerce te permite personalizar tres tipos diferentes de productos relacionados. Estas opciones son:

• Up-Sells : Productos que se muestran al visualizar la página del producto.
• Ventas cruzadas : productos que se muestran al ver la página del carrito.
• Productos relacionados: productos que se muestran automáticamente en la página del producto según las etiquetas y categorías del producto.

Si bien puede agregar manualmente qué productos mostrar en las ventas adicionales y cruzadas para cada WooCommerce, solo puede configurar secciones de productos relacionados configurando sus etiquetas y categorías correctamente.

En total, hay 3 formas principales de agregar productos relacionados en WooCommerce. Ellos son:

• Desde el panel de control de WooCommerce
• Usando un complemento
• Programáticamente

Nota: asegúrese de haber instalado uno de los temas de WooCommerce compatibles y configure WooCommerce correctamente en su sitio web para evitar problemas innecesarios en el proceso.

Configurar productos relacionados con WooCommerce en el panel de control de WooCommerce

Para configurar sus ventas adicionales y cruzadas para un producto específico, vaya a Productos > Todos los productos desde su panel de administración de WordPress. Luego, haga clic en el botón Editar de cualquier producto específico al que le gustaría agregar ventas adicionales y ventas cruzadas.

A continuación, desplácese hacia abajo y, en Datos del producto, haga clic en Productos vinculados. Ahora, continúe y enumere todos los productos que le gustaría que se muestren como productos relacionados para el producto en particular. Pueden incluir tanto up-sells como cross-sells.

Finalmente, actualice el producto.

Cuando obtenga una vista previa del producto en particular en su sitio web, podrá ver los productos vinculados en la parte frontal de su sitio web.

Del mismo modo, también podrá ver los productos relacionados con la venta cruzada cuando obtenga una vista previa de la página del carrito.

Sin embargo, los productos relacionados con WooCommerce son bastante diferentes de la sección " Te puede gustar" que te brindan las ventas cruzadas y adicionales. De forma predeterminada, WooCommerce selecciona aleatoriamente los productos que se mostrarán en las secciones "Te puede gustar" utilizando las etiquetas y categorías. Esta opción no se puede configurar con las opciones predeterminadas de WooCommerce.

Solo puede personalizar estos productos relacionados mediante el uso de complementos de productos relacionados con WooCommerce o mediante programación utilizando WooCommerce Hooks.

Discutiremos más a fondo cómo hacer ambos en esta guía. Entonces, si desea aprender cómo personalizar más sus productos relacionados con WooCommerce, le recomendamos que siga leyendo. Comencemos con el método del complemento, ya que es más fácil de usar para principiantes.

Cómo agregar productos relacionados con WooCommerce usando un complemento

El uso de un complemento es una de las formas más fáciles de agregar y personalizar los productos relacionados. Estos complementos están diseñados específicamente para ayudarlo a elegir manualmente qué productos agregar a sus secciones de productos relacionados con WooCommerce.

Hay una serie de complementos disponibles en WordPress con varias características. Algunos de ellos le permiten agregar secciones relacionadas personalizables que puede agregar a cualquier parte de su sitio web. Mientras que otros trabajan brindándole controles deslizantes y pancartas destacados totalmente personalizables.

Por supuesto, la opción de elegir su complemento depende de usted. Pero para la demostración de hoy, usaremos el complemento Productos relacionados personalizados para WooCommerce de Scott Nelle. Este complemento funciona con el método simple de permitirle especificar productos para agregar a los productos relacionados de cualquier producto que desee.

Pero para comenzar a usar el complemento, primero debe instalarlo y activarlo.

1. Instalar y activar el complemento

Abra su panel de administración de WP y haga clic en Complementos> Agregar nuevo para comenzar. Luego, use la barra de búsqueda en la parte superior derecha para buscar productos relacionados personalizados para WooCommerce . A continuación, haga clic en Instalar ahora en la pestaña del complemento y luego actívelo después de que se complete la instalación. Ahora, debe terminar de activar e instalar el complemento.

Si desea utilizar un complemento que no está incluido en el repositorio de WordPress, deberá instalarlo manualmente. Tenemos una guía detallada para instalar un WordPress manualmente si necesitas más información al respecto.

2. Agregue productos relacionados a través de la página del producto

El complemento en sí funciona al permitirle agregar una sección de productos relacionados a cada producto específico. Puede hacerlo abriendo cualquiera de sus productos WooCommerce y especificándolo en Datos del producto. Si no agrega productos a la sección de productos relacionados, el complemento recurre al comportamiento predeterminado de WooCommerce de elegir al azar productos relacionados con WooCommerce usando etiquetas.

Entonces, abra Productos> Todos los productos desde su Panel de administración de WP una vez más y haga clic en Editar para el producto que desea agregar los productos relacionados. Este es el mismo que el enfoque anterior del panel de control de WooCommerce.

Nuevamente, desplácese hacia abajo en Datos del producto y haga clic en Productos vinculados . Ahora, debería ver un nuevo campo llamado Productos relacionados . Ahora todo lo que tiene que hacer es escribir manualmente los nombres del producto que desea agregar como producto relacionado para el producto específico.

Actualiza el producto y podrás ver los cambios en la página de tu producto:

Agregue productos relacionados con WooCommerce mediante programación

Alternativamente, si no desea utilizar un complemento de WooCommerce para administrar y personalizar productos relacionados con WooCommerce, también puede optar por agregarlos mediante un fragmento de código. Para esto, debe agregar algunas líneas de códigos al archivo functions.php de su tema. Sin embargo, este método puede ser aplicable para usted solo si tiene una comprensión básica de la programación.

Le recomendamos que cree un tema secundario y haga una copia de seguridad de su sitio web de WordPress para hacerlo. Esto asegura que sus cambios se guarden incluso si actualiza su tema de WordPress. Si necesita ayuda, incluso puede usar uno de los mejores complementos de temas secundarios para WordPress para crear uno.

Una vez que haya cambiado a su tema secundario, puede acceder a su archivo functions.php haciendo clic en Apariencia > Editor de temas. Luego, haga clic en Funciones de tema o en el archivo functions.php . Esto abrirá el archivo en el editor de temas.

Luego, puede usar el siguiente fragmento de código y pegarlo en el editor.

 add_filter('woocommerce_related_products', 'QuadLayers_related_products_by_same_title', 9999, 3); 

function QuadLayers_related_products_by_same_title ($publicaciones_relacionadas, $product_id, $args) {
$producto = wc_get_product ($product_id);
$titulo = $producto->get_name();
$publicaciones_relacionadas = get_posts(array(
'post_type' => 'producto',
'post_status' => 'publicar',
'título' => $título,
'campos' => 'identificadores',
'publicaciones_por_página' => -1,
'excluir' => matriz ($ producto_id),
));
devolver $publicaciones_relacionadas;
} 

El fragmento de código funciona simplemente ofreciéndole productos relacionados con el mismo título. De esta manera, si tiene productos idénticos con los mismos nombres, se agregarán a su sección de productos relacionados con WooCommerce. Actualice su archivo functions.php haciendo clic en Actualizar archivo y debería haber terminado.

Créditos al autor original del código aquí.

Cómo eliminar productos relacionados con WooCommerce

Además, también puede optar por eliminar la sección de productos relacionados con WooCommerce de su sitio web utilizando el mismo método que el anterior. Puede optar por eliminar todos los productos relacionados por completo o solo para productos específicos.

1. Eliminar todos los productos relacionados

Para eliminar toda la sección de productos relacionados de cada página de producto, simplemente abra el archivo functions.php de su tema secundario y pegue el siguiente fragmento de código.

 remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20); 

Por fin. actualizar el archivo. Esto debería eliminar la sección de productos relacionados por completo de todos sus productos de WooCommerce.

Créditos al autor del código aquí.

2. Eliminar productos relacionados solo para productos específicos

También puede usar fragmentos de código para eliminar la sección de productos relacionados solo para productos específicos en su sitio web si es necesario. El siguiente código simplemente agregará una opción para ocultarlo en todos sus productos.

Primero, sigamos adelante y peguemos esto en el archivo functions.php de su tema de la misma manera que antes.

 add_action('woocommerce_product_options_general_product_data', 'QuadLayers_add_related_checkbox_products');

función QuadLayers_add_related_checkbox_products() { 
woocommerce_wp_checkbox(matriz( 
'id' => 'ocultar_relacionado', 
'clase' => '', 
'label' => 'Ocultar productos relacionados'
) 
); 
}

// -----------------------------------------
// 2. Guardar la casilla de verificación en el campo personalizado

add_action('save_post_product', 'QuadLayers_save_related_checkbox_products');

función QuadLayers_save_related_checkbox_products ($ producto_id) {
global $pagenow, $typenow;
if ( 'post.php' !== $pagenow || 'producto' !== $typenow ) return;
if (definido('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if ( isset ($_POST['hide_related'] ) ) {
update_post_meta( $product_id, 'hide_related', $_POST['hide_related'] );
} else delete_post_meta ($product_id, 'hide_related');
}

// -----------------------------------------
// 3. Ocultar productos relacionados en la página de un solo producto

add_action('woocommerce_after_single_product_summary', 'QuadLayers_hide_related_checkbox_products', 1);

función QuadLayers_hide_related_checkbox_products() {
$producto global;
if ( ! vacío ( get_post_meta( $producto->get_id(), 'hide_related', true ) ) ) {
remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
}
} 

Luego, ve a Productos > Todos los productos desde tu panel de WordPress una vez más y haz clic en Editar para el producto en el que deseas ocultar los productos relacionados. Cuando se desplace por Datos del producto como en los enfoques anteriores, haga clic en la pestaña General .

Debería ver una nueva opción Ocultar productos relacionados . Habilite esta opción para ocultar los productos relacionados de la página del producto en particular.

Créditos al autor del código aquí.

Cómo personalizar el número y las columnas de productos relacionados

Además, también puede personalizar su sección de productos relacionados configurando la cantidad de productos que se muestran, así como las filas y columnas en su sitio web.

Para esto, también usaremos ganchos de WooCommerce y funciones personalizadas en nuestro archivo functions.php . Continúe y abra el archivo usando su editor de temas una vez más y pegue este fragmento de código:

 add_filter('woocommerce_output_related_products_args', 'QuadLayers_change_number_related_products', 9999);

función QuadLayers_change_number_related_products ($args) {
$args['posts_per_page'] = 4; // # de productos relacionados
$argumentos['columnas'] = 4; // # de columnas por fila
devuelve $argumentos;
} 

Este código simplemente funciona configurando su sección de productos relacionados con WooCommerce en 4 columnas y 4 filas. Siempre puede cambiar este valor usando $args['posts_per_page'] = 4 y $args['columns'] = 4.

Además, también puede configurar esta sección utilizando códigos CSS adicionales. Se pueden usar para cambiar el diseño y la alineación de las columnas y filas para que la sección se ajuste mejor a su sitio web. Puede usar el siguiente fragmento de CSS para ello.

 @media (ancho mínimo: 768 px) {
.site-main .related.products ul.products li.product {
ancho: 22%;
flotador izquierdo;
margen derecho: 4%;
}

Simplemente péguelo debajo de su CSS adicional en su personalizador de temas . Puede acceder a él haciendo clic en Apariencia> Personalizar desde su panel de WordPress. Esto abrirá el personalizador de temas.

Luego, haga clic en la pestaña CSS adicional y pegue el script CSS aquí. Puede ajustar la alineación de los productos relacionados según las necesidades de su sitio web. Finalmente, haga clic en Publicar cuando haya terminado.

Créditos al autor del código aquí.

Conclusión

Y eso termina nuestra guía para agregar productos relacionados con WooCommerce. Es una de las mejores maneras de mejorar las ventas de su sitio web de comercio electrónico. Pero con esta guía, debería poder agregarlos, personalizarlos o incluso eliminarlos si lo desea.

Para resumir, puede agregar los productos relacionados en WooCommerce de 3 formas:

• Desde el panel de control de WooCommerce
• Usando un complemento
• Programáticamente

Además, incluso hemos incluido algunos pasos más útiles para personalizar estos productos relacionados. Incluyen eliminarlos de las páginas de productos y modificar la cantidad de productos relacionados y sus columnas. Esperamos que también te sean útiles cuando añadas los productos relacionados. Puede encontrar aún más información en nuestro tutorial detallado para personalizar productos relacionados con WooCommerce.

Si desea obtener más información sobre cómo personalizar otras secciones y páginas de WooCommerce, considere consultar algunos de nuestros otros artículos como:

• Cómo agregar una imagen al producto en WooCommerce
• Personalizar los mensajes de error de pago de WooCommerce
• Cómo personalizar las plantillas de WooCommerce

Háganos saber si pudo personalizar y administrar sus secciones de productos relacionados con WooCommerce utilizando nuestro artículo. Si hubo algún problema, háganoslo saber en la sección de comentarios. Haremos todo lo posible para ayudarte tanto como podamos.