Een WooCommerce externe link in een nieuw tabblad openen

Wanneer je in je WooCommerce webshop (ook) affiliate producten aanbiedt, dan wil je eigenlijk niet dat bij het klikken op de knop het product in dezelfde tab wordt geladen. Op die manier verdwijnt de bezoeker immers van je site.

De functie op een single product page

Het onderstaande stukje code lost dat probleem voor je op. Een link naar een extern product zal in een nieuwe tab worden geoppend.

<?php
add_filter( 'woocommerce_loop_add_to_cart_args', 'wxp_open_in_new_tab', 10, 2 );

function woocommerce_external_add_to_cart() {
   global $product;
   if ( ! $product->add_to_cart_url() ) return;
   echo '<p><a href="' . $product->add_to_cart_url() . '" class="single_add_to_cart_button button alt" target="_blank">' . $product->single_add_to_cart_text() . '</a></p>';
}

Belangrijk

Bovenstaande code kan alleen in de functions.php van je child theme geplaatst worden. Wanneer je deze functie ergens anders plaats, dan zal je een foutmelding krijgen ‘Cannot redeclare function woocommerce_external_add_to_cart’.

Dit is namelijk een ’template functie’.

Het is te vergelijken met een ‘pluggable‘ functie. WooCommerce zal eerst je thema laden en na het laden van het thema zal WooCommerce een aantal functies die niet door het thema zijn gedefinieerd als ‘default’ functies laden.

Door binnen het thema zelf dit te definiëren, voorkom je dat WooCommerce deze default functie laadt. Wanneer je dit elders definieert is het thema al geladen en de functie gedefinieerd.

Zelfde functie, maar nu in een productoverzicht

Voor een product overzicht (je ‘Winkel’ pagina, of een andere archiefpagina) werkt het iets anders.

Hier is het namelijk geen ’thema’ functie, maar werkt het gewoon volgens de standaard WordPress hooks.

<?function wxp_open_in_new_tab($args, $product) 
{
    if( $product->is_type('external') ) {
        // Inject target="_blank" into the attributes array
        $args['attributes']['target'] = '_blank';
    }    
 
    return $args;
}