En otras entrada he hablado ya de diferentes tipos de productos que maneja WooCommerce, como los productos variables o los productos agrupados. Siguiendo la serie hoy vamos a ver algunas cosas sobre los productos externos o afiliados en WooCommerce.
Y no sólo voy a hablar de qué son o como crearlos (lo cual es bastante sencillo) sino que veremos algunos trucos útiles para mejorar su visualización y el manejo de este tipo de productos en una tienda, especialmente en tiendas de afiliado, que es para lo que están pensados los productos externos.
Tabla de contenidos
Qué son los productos externos o afiliados
Y por empezar por lo más básico, vamos a ver qué son los productos externos o afiliados de WooCommerce. Aunque tampoco hay que tener una bola de cristal para adivinarlo, basta con el propio nombre.
Los productos externos o afiliados son productos que ofrecemos en nuestra tienda pero que no vendemos nosotros directamente, sino un comercio externo a nosotros (de ahí lo de externo).
¿Y por qué iba yo a vender productos de otro comercio en mi tienda? Bueno, pues porque eso se hace a cambio de una comisión, y de ahí lo de productos afiliados (ya que se utiliza el marketing de afiliación).
Produtos externos o afiliados en WooCommerce
En lo que a WooCommerce respecta, la cosa es bastante sencilla. Básicamente el producto se crea como cualquier otro producto, pero a la hora de indicar los datos del producto seleccionamos en el desplegable Producto externo/afiliado.
Esto provoca algunos cambios en la caja de datos del producto, como puedes ver en la imagen:
Para empezar, vemos que hay un nuevo campo en el que introducir la URL del producto que, como su propio nombre indica, sirve para poner la dirección en la que se encuentra el producto externo.
Evidementemente si estamos haciendo marketing de afiliación ahí tendremos que poner nuestro enlace de afiliado, de forma que la plataforma nos asigne la comisión por las ventas que se realicen.
Además, como el botón Añadir al carrito dirigirá al visitante fuera de nuestra web, en este caso WooCommerce nos permite elegir el texto del botón. Ya sabes que si quieres cambiar el texto de este botón para cualquiera de los otros tipos de producto puedes usar el plugin del repositorio de WordPress Add to Cart Button Custom Text, desarrollado y mantenido por mí mismo.
Por lo demás, un producto externo/afiliado tiene otras características precisamente por ser este tipo de producto:
- Puede tener atributos, pero no usados para variaciones (puesto que en ese caso sería un producto variable).
- No tiene gestión de inventario (ya que no es un producto de nuestro comercio), y al designar el producto como externo todas las opciones de la pestaña Inventario desaparecen, a excepción del SKU.
Hacer que un producto externo se abra en una nueva pestaña
Como decía antes, cuando un usuario pincha sobre el botón Añadir al carrito en un producto externo/afiliado es dirigido a la URL correspondiente que hayamos establecido como la del producto en cuestión, es decir, abandona nuestra web.
Sin embargo hay una pega, y es que no lo hace en una nueva pestaña del navegador, sino en la misma por la que estaba navegando, por lo que posiblemente cuando el visitante pinche ese botón lo habremos perdido, y quizá lo que nos interese es que no pierda de vista nuestra web.
Bien, vamos a ver qué opciones tenemos para cambiar esto.
Modificar el código de WooCommerce
La primera de ellas es modificar el código para que al pulsar este botón en un producto externo, el enlace se abra en una nueva pestaña. Esto es bastante sencillo, sólo tienes que ir al archivo /wp-content/plugins/woocommerce/templates/single-product/add-to-cart/external.php y realizar una pequeña modificación.
Si lo abres (con cualquier editor de texto plano) verás que tiene muy poquito contenido, y la mayor parte es comentado (es decir, entre los símbolos /* y */). Sólo tienes que buscar la línea:
<a href=”<?php echo esc_url( $product_url ); ?>” rel=”nofollow” class=”single_add_to_cart_button button alt”><?php echo esc_html( $button_text ); ?></a>
y sustituirla por:
<a target=”_blank” href=”<?php echo esc_url( $product_url ); ?>” rel=”nofollow” class=”single_add_to_cart_button button alt”><?php echo esc_html( $button_text ); ?></a>
Desde este momento cuando el visitante pulse el botón Añadir al carrito irá al producto externo, pero en una nueva pestaña. Sin embargo no basta con hacer eso, ya que si lo dejas así cuando se actualice WooCommerce perderás los cambios que has realizado, ya que la nueva versión sobreescribirá tu archivo modificado.
Lo que tienes que hacer es ir a la carpeta de la plantilla que estás utilizando y crear una carpeta llamada woocommerce (si no existe ya), y dentro de ella la misma ruta al archivo que has modificado, es decir, /wp-content/themes/tu-plantilla/woocommerce/templates/single-product/add-to-cart/.
Y una vez creada, copiar dentro de este directorio el archivo external.php que has modificado. En lo sucesivo no se sobreescribirá con las actualizaciones, y el botón Añadir al carrito de los productos externos/afiliados se abrirá siempre en una nueva pestaña.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
Mediante un plugin
Como alternativa tienes el plugin WooCommerce Improved External Products, que te permite hacerlo a través de una pantalla de opciones en Ajustes > Improved External Products.
Al instalarlo se activa esta pantalla de opciones que te permite seleccionar si quieres que los productos externos se abran en la misma pestaña o en una pestaña nueva. Incluso te ofrece una plantilla por si quieres personalizar el código del botón para añadirle estilos propios.
Vídeo: usando Improved External Products para abrir los productos externos en una nueva pestaña
Disimular los enlaces de afiliados
La segunda petición que más me encuentro en relación a este tipo de productos es la de ofuscar el enlace de afiliado. No se trata de engañar al visitante (que ni gana ni pierde con un enlace de afiliación) sino disimular esos enlaces que a menudo son kilométricos y llenos de parámetros.
Esa solución también nos la ofrece un plugin, esta vez Pretty Link Lite, que nos añade una nueva sección en la parte inferior del menú de administración en la que puedes añadir y gestionar tus enlaces de afiliado.
Lo que hace este plugin es permitirte establecer direcciones del tipo http://www.tudominiochulo.com/loquequieras/producto, y Pretty Link Lite realiza una redirección hacia el enlace de afiliado que tú hayas establecido.
Es muy sencillo, sólo tienes que ir a Pretty Link > Add New Link, y verás los siguientes campos:
- Target URL, donde tienes que poner tu enlace de afiliado (es la URL a la que finalmente será dirigido el visitante).
- Pretty Link, que es el enlace “bonito” que vas a crear. Obligatoriamente empieza por tu dominio, pero después puedes crearlo libremente (no puede terminar en “/”).
- Title, donde puedes poner un nombre al enlace. Es sólo para tu referencia, para que después puedas buscar y localizar fácilmente el enlace que necesites entre todos los que vayas creando.
Aún tiene algunas otras opciones, algunas de ellas muy útiles, como crear el enlace como nofollow, llevar estadísticas del enlace (cuántas veces se visita), etcétera.
Conclusión
Pues parecía que no, pero ya ves que había algunas cosas interesantes que decir sobre los productos externos/afiliados de WooCommerce. ¡Y más cosas que me he dejado en el tintero!
Y si tienes alguna duda, comentario o pregunta, sobre esto o sobre cualquier otro tema relacionado con WordPress o con WooCommerce, me tienes a tu disposición tanto en los comentarios como a través del formulario de contacto.
Hola amigo enrique estuve probando y con la nueva version no me funciona si podrias ayudarme te lo agradesco
Hola Dennis. Y ¿qué es exactamente lo que no te funciona?
Hola Enrique e visto tus videos y me gustan mucho pero tengo un problema, no se donde se encuentra el archivo: /wp-content/plugins/woocommerce/templates/single-product/add-to-cart/external.php, Estoy usando el tema Storefront me puedes ayudar por favor
Hola Johan
Sólo tienes que acceder mediante FTP o a través del gestor de archivos de tu hosting, está localizado siguiendo esa misma ruta: wp-content/plugins… etcétera
Un saludo
Hola Enrique, no me funciona ninguna de las dos formas, a que crees que se deba?. ya que estoy haciendo los productos como “producto exterior/afiliado” pero no pasa nada, el boton me pasa al producto de amazon pero en la misma pestaña, no en una nueva. Y sabes como hacero que la foto o el titulo del producto, me lleve también a una nueva pestaña donde este el producto. Ya que no encuentro solución a mi problema.
Hola César
Entiendo que el plugin, por alguna razón, pueda fallar. Sin embargo la primera forma (modificar el template) funciona en el 100% de los casos porque simplemente estás modificando el HTML con el que se imprime el botón.
Un saludo.
Hola Enrique. He seguido las instrucciones para modificar el HTML tal y como explicas. El problema es que se me abre una nueva ventana pero me da un error 404, no la página de Amazon. ¿Tienes idea de a qué puede ser debido? Gracias de antemano. Saludos.
Hola Maria José
Si sólo te ocurre en un producto, revisa el enlace de afiliado, habrás cometido algún error al ponerlo. Si te ocurre con todos el error está sin duda en los cambios que has hecho a la plantilla, revisa que no te falten unas comillas o algo así.
Un saludo.
Hola Enrrique, me ha servido un montón tu post.
Tengo una pregunta, crees que sea posible lograr que la imagen del producto afiliado también dirija a la URL del producto afiliado.
¿cómo puedo lograr esto?
Hola Claudia
Claro que se puede hacer, aunque no conozco ningún plugin que lo haga, así que habría que o programarlo o modificar el template, ambas cosas exigen usar PHP.
Un saludo.
Hola Claudia, tengo la misma duda que tuviste tu hace unos meses. ¿Pudiste encontrar la formula para hacerlo?
Muchas gracias!
Gloria
Hola Enrique. Me gustan mucho tus tutoriales, son geniales. Con este es la primera vez que me dedico a comentar.
En los productos afiliados/externos se me da el caso de tener que poner más botones en una sola ficha de producto.
El ejemplo concreto es un cd. Ese disco estaría a la venta en varias tiendas. Y rizando el rizo. ¿Puede ser un producto variable y externo a la vez? En el ejemplo, un disco disponible en cd, vinilo o digital. Cada variación con sus distintos enlaces externos.
He encontrado un plugin que lo hace, el “Product Retailers”, pero quería conocer tu opinión sobre él u otras alternativas que propongas.
Gracias
Hola Diego
No, no es posible que un producto sea de dos tipos a la vez. Necesitarás efectivamente un plugin para lo que quieres hacer.
Un saludo.
Saludos me gustaria saber si tienes alguna opcion para llevar un registro de los usuarios que dan click o compran con el enlace extero! saludos
Hola Rafnix
Sí, puedes configurar los enlaces con Pretty Links y usar estos como enlaces externos. Pretty Links lleva registro de cuántas veces se ha usado el enlace.
Un saludo.
Hola buenas noches ,que lineas hay que colocar para que la foto y la descripción al hacer click vaya a la web de afiliado.gracias
Hola Enrique,
he intentado cambiar el código como indicas, pero parece que en la nueva versión de Woocommerce el código del archivo external.php ha cambiado, por lo que no es posible modificar la línea que dices. El plugin tampoco me funciona, supongo que es por usar Elementor. ¿Puedes decirme cómo puedo conseguirlo?, muchas gracias
Hola buen dia, yo trabajo con puros productos externos o de afiliado, tengo una preguna hay alguna forma de ocultar el carriro de woocommerce, ya que no me hace, como dije solo trabajo con productos de afiliados.
Hola German
En principio bastaría con no poner la página del carrito en el menú y, si quieres, puedes además redirigirla a la de tienda.
Un saludo
Uffff, gracias por ayudarme, eres el mejor.
No encontraba este tema en ningún sitio, y en tu artículo esta perfectamente explicado. Muchas gracias
Hola Enrique,
Sería posible eliminar la ficha de cada producto ?? De manera que cuando el usuario pinche en el producto, no vaya a la ficha de producto, sino directamente al enlace externo! Quiero saltarme ese paso de ficha de producto..
Quedo pendiente!
Muchas gracias por tu información!
Hola, Enrique, sera posible que el producto externo tenga un (#) ya que mi sitio web, utiliza los productos externos para mostrar un código de descuento.
Muchas Gracias.
Buenas noches
Estoy publicando productos externo afiliados pero no se visualizan en la página correspondiente, he creado el acceso directo y cuando me devuelve la secuencia de códigos la copio y la pega en la página correspondiente por categoría pero no lo veo…es extraño porque solo he conseguido que se vea 1 de ellos pero el resto de otra página categoría no se ve ninguno de los tres.
Para evitar hacerlo en manual conoces algún plugin para dar de alta los Productos Amazon de manera rápida y segura.
Muchas gracias de antemano
Hola David
Hay varios plugins para ello, como WooZone o AAWP.
Un saludo
Buenas Enrique
Mi pregunta ya la han hecho pero no sé si hay respuesta o solución! Ojalá puedas hacer tu magia!
El archivo de woocommerce ha cambiado y ya no aparece la línea de código que has mencionado
Aparece lo siguiente:
do_action( ‘woocommerce_before_add_to_cart_form’ ); ?>
<form class="cart" action="” method=”get”>
Hay alguna forma de hacerlo directamente en este archivo? Se que en el functions.php hay una forma pero me rompe la ficha de producto, funciona pero hay elementos pegados y otros desaparecen (como el botón de wishlist)
Muchas gracias pro tu ayuda
Tengo una tienda en en woocommerce en la que cada producto va a un link externo diferente. Qué debo hacer para que en el botón de comprar o añadir al carrito pueda tener ese link externo y que me abra en una ventana nueva.
Gracias