Si tenemos productos externos o afiliados en nuestra tienda online en WooCommerce, es posible que queramos que el botón de comprar, abra la página del proveedor original en una pestaña o ventana nueva del navegador de nuestro usuario, y no sobre nuestra misma web.
Tenemos dos formas de hacerlo:
1- Modificando la plantilla de WooCommerce
Tendremos que copiar el archivo que viene con el plugin de WooCommerce donde aparece el html del botón de comprar a nuestro theme o child theme:
- Archivo original: /wp-content/plugins/woocommerce/templates/single-product/add-to-cart/external.php
- Copia: /wp-content/themes/nuestro theme activo/woocommerce/single-product/add-to-cart/external.php
Deberemos editar el archivo copiado y en la etiqueta href del botón, añadir el atributo target=»_blank»:
<p class="cart"> <a href="<?php echo esc_url( $product_url ); ?>" rel="nofollow" class="single_add_to_cart_button button alt" target="_blank"><?php echo esc_html( $button_text ); ?></a> </p>
Guardamos y subimos los cambios.
2- Añadir una función para modificar el target mediante jQuery
Tendremos que editar nuestro archivo de functions.php o crear un code snippet y añadir la siguiente función:
function add_custom_target(){
?>
<script>
jQuery(window).load(function(){
jQuery('.single .cart a').attr('target','_blank');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_target');
La ventaja de este segundo método es que la función es independiente de las actualizaciones de las plantillas de WooCommerce (siempre y cuando no cambien los css del enlace de compra), pero yo prefiero el primer método por malas experiencias con jQuery, que es genial cuando funciona bien, pero da muchos dolores de cabeza cuando hay incompatibilidades o conflictos.
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
11 respuestas a «Abrir ‘Comprar’ en página nueva los productos externos / afiliados en WooCommerce»
|
a mi el primer método no me funciona
|
Hola Fred,
Ya están corregidos, se mostraban los símbolos < y > de forma incorrecta.
Saludos!
|
Son nofollow?
|
Hola Humberto!
De entrada sí, en el html de la plantilla está puesto el rel=»nofollow», pero si añades el atributo target como indico y te interesa cambiarlo puedes eliminarlo fácilmente.
Saludos!
|
Esta ruta no existe en el tema storefront: /wp-content/themes/storefront/woocommerce/single-product/add-to-cart/external.php
No existe ninguna carpeta llamada /woocommerce, y por tanto tampoco /sigle-product/add-to-cart/
|
Hola! No, no siempre existe esa ruta, si es tu caso tendrás que crear las carpetas para poner la copia del archivo a modificar dentro.
Saludos!
|
Hola Esther, en mi plantilla no me aparece a href sino así:
¿Dónde tengo que añadir el target blank?
Muchas gracias de antemano 🙂
|
Hola María,
No me aparece en el comentario el formato de href que indicas.
Si quieres, envíamelo directamente por email y miro si puedo ayudarte.
Saludos!
|
Muchas gracias por tu inestimable ayuda Esther, te he mandado un correo 🙂
Como verás no me aparece el código href en external.php
Saludos
|
Hola Esther, muchas gracias por tu tiempo. En mi caso me gustaría abrir en una nueva pestaña, un producto que tengo en mi tienda. Podrías ayudarme? de antemano mil gracias
|
Hola Francisco, si no se trata de un producto externo, puedes hacer lo mismo pero modificando el archivo simple.php en lugar del external.php (ojo, haciendo una copia en tu child theme como indica el artículo, nunca modificando el original)
Saludos!