Een WooCommerce externe link in een nieuw tabblad openen

Wil je direct een mail ontvangen wanneer nieuwe snippets zijn toegevoegd?

Vul dan onderstaand formulier in en je krijgt direct na het toevoegen van nieuwe snippets een email. Zo blijf je altijd bij!

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;
}

Codesnippet verbeteren

Het doel van deze code snippet is een probleem op te lossen in een specifieke situatie. Daarom zie je regelmatig voorbeelden waar je specifiek tekst moet aanpassen om te krijgen wat je wilt. 

Wil jij leren hoe je complete plugins zelf kunt programmeren inclusief ‘admin’ schermen voor het instellen en de output in de gewenste taal, dan is misschien de cursus ‘Introductiecursus Plugins Programmeren‘ iets voor jou. 

Wil je als ‘full stack’ WordPress programmeur aan de gang gaan, dan biedt WordXPression ook een compleet traject ‘WordPress Developer‘ aan. Dit is een traject wat deels online, deels klassikaal wordt gegeven.

WordPress Developer worden?

Wil je leren hoe je zelf plugins, thema's, shortcodes, widgets, Gutenberg blocks en meer kan maken?
Schrijf je dan in voor de cursus WordPress Developer.

Meer snippets

Een 'Niet op voorraad' knop in WooCommerce
Hoe voorkom je teleurstelling bij je klant wanneer hij zijn favoriete product bij jou vindt, zonder dat...
Op Woensdag alle pizza's voor 7 euro! (WooCommerce)
Een leuke uitdaging. Een klant wilde een aanpassing op WooCommerce om op specifieke weekdagen andere...
jQuery Migrate verwijderen voor meer snelheid
Voor de meeste WordPress websites is jQuery Migrate al heel lang niet meer nodig. Je kan enigszins de...
Prijzen verbergen voor niet ingelogde gebruikers
Hoe verberg je de WooCommerce prijzen voor niet ingelogde gebruikers?
De WordPress 'admin bar' ook daadwerkelijk alleen voor admins
Zelf vind ik de WordPress ‘admin bar’ heel handig om snel toegang te krijgen tot verschillende...
WooCommerce SKU verbergen
Hoe verberg je de SKU in WooCommerce, wanneer je die niet gebruikt?

Veiligheid voor alles!

Met betrekking tot de code die je hier aantreft een aantal waarschuwingen, voordat je deze code snippets toepast op je eigen website.

  1. Voer de code nooit direct uit op je eigen website, maar probeer deze eerst op een staging omgeving of een locale kopie van je website. 
  2. Voor je de geteste code installeert op je website, maak eerst een back up van je website.
  3. Zorg altijd voor alle zekerheid, dat je voor je een aanpassing live zet, je ook de FTP gegevens van je website bij de hand hebt.  
 
Voel je je onvoldoende vertrouwd met het toepassen van een dergelijke code snippet, bedenk dat je dit ook door een professional kan laten doen. De WordXPression support strippenkaart is een voordelige manier om dit soort aanpassingen te laten doen.
Heeft dit artikel je geholpen je probleem op te lossen?
Deel het met je vrienden via je favoriete social media.

Heb je vragen bij, of opmerkingen over deze code snippet, stel deze bij de commentaren hieronder.

Geef een reactie

Je e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Word je website de baas. Neem vandaag nog contact op!

Contact Informatie

WordXPression 

Aardoliestraat 14-I
7553GT Hengelo

085-8001964 (van 9:00 tot 17:00 van ma-vr)
Let op, gewijzigd telefoonnummer

KVK : 75580152 

Social media
Stuur een bericht

Introductiecursus Plugins Programmeren

wordpress coding Can use php code as background in html

Ontdek de wereld van WordPress Plugin ontwikkeling met WordXPression's introductiecursus