Abrir productos externos o afiliados en una nueva ventana en WooCommerce

abril 10, 2022

Hola, amigos de Piensa para Crear. 👋

Si tienes una tienda en WooCommerce donde vendes productos propios y también productos de afiliados (Amazon, Mercado Libre, hoteles, etc.), seguramente te has topado con este problema:

El botón de "Añadir al carrito" abre el enlace externo en la misma pestaña, lo que hace que el cliente salga de tu tienda y probablemente no vuelva.

La solución es simple: hacer que los enlaces externos se abran en una nueva pestaña. Así el cliente mantiene tu tienda abierta mientras revisa el producto afiliado.

Aquí te explico cómo hacerlo con un pequeño fragmento de código.

🧠 ¿Por qué deberías abrir los productos externos en nueva pestaña?

  • Mantienes al usuario en tu tienda: si el enlace se abre en la misma pestaña, el cliente se va y no vuelve.

  • Mejoras la experiencia de usuario: el cliente decide cuándo volver a tu tienda.

  • Aumentas conversiones: menos abandono de la pestaña principal.

  • Aplica a cualquier producto externo: no importa si es Amazon, AliExpress, un hotel o un enlace de afiliado propio.

¿Cuándo aplica? Cuando usas WooCommerce con productos de tipo "Producto externo/afiliado" (External/Affiliate Product) o cuando el botón del loop apunta a una URL externa.

🛠️ El código: abrir en nueva pestaña desde el loop y la página de producto

Este fragmento se coloca en el archivo functions.php de tu tema hijo (nunca en el tema padre, para no perder los cambios al actualizar).

php
function bbloomer_loop_add_cart_open_new_tab( $html, $product, $args ) {
    return sprintf(
        '<a href="%s" data-quantity="%s" class="%s" %s target="_blank">%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
        esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
        isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
        esc_html( $product->add_to_cart_text() )
    );
}
add_filter( 'woocommerce_loop_add_to_cart_link', 'bbloomer_loop_add_cart_open_new_tab', 10, 3 );

🔍 ¿Cómo funciona?

  1. Filtro woocommerce_loop_add_to_cart_link: intercepta el HTML del botón "Añadir al carrito" en el loop (la cuadrícula de productos) y en la página de producto.

  2. sprintf: reconstruye el enlace manteniendo todos los atributos originales.

  3. target="_blank": la clave. Hace que el enlace se abra en una nueva pestaña.

  4. esc_url, esc_attr, esc_html: mantienen el código seguro y sin vulnerabilidades XSS.

📌 ¿A qué botones afecta?

  • Botón "Añadir al carrito" en el loop de productos (categorías, tienda, búsquedas).

  • Botón en la página de producto individual (cuando es un producto externo/afiliado).

No afecta a los botones de productos simples o variables que van al carrito real de WooCommerce (esos siguen funcionando igual).

⚠️ Consideraciones importantes

1. No rompas tu tienda con un error en functions.php

Si pegas mal el código o lo pones en el lugar equivocado, puedes romper todo tu sitio con un error fatal de PHP. Antes de tocar nada:

  1. Haz un backup de tu sitio (archivos y base de datos).

  2. Usa un tema hijo o un plugin como Code Snippets para no editar functions.php directamente.

  3. Prueba primero en un entorno de staging si tu hosting lo ofrece.

2. Solo para productos externos

Si tienes productos propios y afiliados mezclados, este código abrirá todos los botones en nueva pestaña, incluso los de productos normales. Si quieres ser más fino y aplicarlo solo a productos externos, necesitas una condición adicional:

php
function bbloomer_loop_add_cart_open_new_tab( $html, $product, $args ) {
    // Solo aplicar a productos externos/afiliados
    if ( ! $product->is_type( 'external' ) ) {
        return $html;
    }

    return sprintf(
        '<a href="%s" data-quantity="%s" class="%s" %s target="_blank">%s</a>',
        esc_url( $product->add_to_cart_url() ),
        esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
        esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
        isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
        esc_html( $product->add_to_cart_text() )
    );
}
add_filter( 'woocommerce_loop_add_to_cart_link', 'bbloomer_loop_add_cart_open_new_tab', 10, 3 );

Con esta versión, solo los productos externos se abren en nueva pestaña. Los productos normales siguen funcionando como siempre.

3. Cómo cambiar el texto del botón

Si quieres que el botón diga "Ver oferta" o "Comprar en Amazon" en lugar de "Añadir al carrito", puedes hacerlo desde:

  • WooCommerce → Ajustes → Productos → Botón de añadir al carrito (si tu tema lo permite).

  • O filtrando el texto con otro fragmento:

php
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_external_button_text', 10, 2 );
function custom_external_button_text( $text, $product ) {
    if ( $product->is_type( 'external' ) ) {
        $text = 'Ver oferta';
    }
    return $text;
}

🎯 Conclusión: un cambio pequeño, gran impacto en conversión

Si vendes productos afiliados en WooCommerce, abrir los enlaces externos en una nueva pestaña no es un lujo, es una necesidad. Mantienes al cliente en tu tienda, mejoras la experiencia y aumentas las posibilidades de que compre o vuelva.

Con el código que te mostré, puedes lograrlo en minutos. Y si quieres ser más específico, la versión condicional solo afecta a los productos externos.

💬 ¿Necesitas ayuda para configurar tu tienda WooCommerce con productos afiliados?
En Piensa para Crear ofrecemos servicios de personalización de WooCommerce, integración de afiliados y optimización de tiendas online.
Contáctanos aquí y hablemos.

❓ Preguntas frecuentes

¿Este código funciona en cualquier tema?
Sí, siempre que uses WooCommerce. El filtro woocommerce_loop_add_to_cart_link es estándar en WooCommerce, no depende del tema.

¿Dónde pongo el código exactamente?
En el functions.php de tu tema hijo, o usa un plugin como Code Snippets para no tocar archivos.

¿Cómo sé si mi producto es de tipo "externo"?
En WooCommerce, al crear un producto, elige "Producto externo/afiliado" en el tipo de producto. Ahí se configura la URL de destino y el texto del botón.

¿Se puede aplicar solo a algunos productos externos?
Sí, con una condición adicional basada en la categoría del producto o en su ID. Si necesitas esa personalización, escríbenos.

¿Rompe el carrito de WooCommerce?
No. Los productos externos no van al carrito (no tienen precio). Los productos normales siguen funcionando con el carrito estándar.

📚 Recursos relacionados

Comentarios

Publicar un comentario

← Anterior Siguiente →