La miglior soluzione per risolvere il problema dei collegamenti per coloro che usano WooCommerce per vendere prodotti affiliati o di terze parti.
WooCommerce è il plugin e/o estensione usata su tutti i siti costruiti con WordPress e che permette in modo veramente molto semplice di creare un store online, così da poter vendere prodotti in piena autonomia.
Questo sistema è nato per offrire una serie di strumenti capace di aiutare il venditore in ogni sua parte, dall’impostare le informazioni basi, ai prodotti, pagamenti, ecc. Normalmente viene usato da tutti coloro che hanno prodotti da vendere in loco, quindi di cui sono in possesso e che hanno la possibilità di gestire direttamente, con tanto di carrello, profilo utente, spedizione e molto altro.
Il problema nasce quando l’ecommerce che vogliamo creare ospita prodotti affiliati, di terze parti e non gestiti da noi. In parole povere noi offriamo solo una vetrina per un prodotto che fisicamente non è in nostro possesso ma che semplicemente vogliamo vendere e guadagnare tramite programmi di affiliazione.
Un problema comune affrontato dagli utenti di WooCommerce è che il collegamento associato al pulsanti: Aggiungi al carrello, Acquista prodotto o Acquista ora, si aprono nella stessa scheda o finestra del browser. Questo diventa un problema perché nel momento in cui si clicca su uno di quei bottone per acquistare il prodotti, il visitatore viene rimandato al sito del rivenditore andando però a sostituirsi al nostro.
Il risultato è che la frequenza di rimbalzo di una pagina cambia (numero di volte in cui un utente ha lasciato la pagina o il sito web) e una frequenza di rimbalzo elevata influisce negativamente sul posizionamento della pagina e quindi è considerata negativa per la SEO.
Per poter ovviare a questo fastidioso problema, ci sono due soluzioni. Una più semplice e che comporta l’installazione dell’ennesimo plugin sul nostro WordPress, mentre la seconda prevede l’uso di uno script d’aggiugere alla pagina functions.php del nostro tema.
Soluzione tramite Script
Questa è la soluzione che preferisco perchè evita l’installazione di plugin che vanno ad appesantire il sito e tutta la piattaforma di WordPress. Il procedimento è abbastanza semplice, ma se non siete smanettoni o non avete idea di come sia strutturato un sito in WordPress, mi raccomando chiedete sempre supporto, perchè è veramente molto facile commettere errori e creare problemi se non sapete dover metter mani.
Se il vostro sito è strutturato nella maniera corretta dovreste avere ed utilizzare il tema nella variante Child, caso contrario lavorerete direttamente sul tema principale (non ci sono alternative). In entrambi i casi prima di fare qualsiasi modifica al file functions.php, fate sempre una copia da poter ripristinare in caso di problemi.
Per prima cosa dobbiamo andare a cercare il nostro file “functions.php” che normalmente si trova in un percorso molto simile a questo:
vostro dominio > public_html > wp-content > themes > tema che state usando
Il percorso varia in base all’hosting usato, ma generalmente sono tutti abbastanza simili, quindi dovreste potervi ritrovare senza grossi problemi. Nel mio caso, l’hosting che utilizzo è Siteground.
Una volta aperto il file functions.php non modificate nulla, ma semplicemente subito sotto a tutte le scritte già presenti dovrete aggiungere il seguente script:
// This will take care of the Buy Product button below the external product on the Shop page.
add_filter( 'woocommerce_loop_add_to_cart_link', 'ts_external_add_product_link' , 10, 2 );
// Remove the default WooCommerce external product Buy Product button on the individual Product page.
remove_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
// Add the open in a new browser tab WooCommerce external product Buy Product button.
add_action( 'woocommerce_external_add_to_cart', 'ts_external_add_to_cart', 30 );
function ts_external_add_product_link( $link ) {
global $product;
if ( $product->is_type( 'external' ) ) {
$link = sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s" target="_blank">%s</a>',
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->id ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : 'button product_type_external' ),
esc_html( $product->add_to_cart_text() )
);
}
return $link;
}
function ts_external_add_to_cart() {
global $product;
if ( ! $product->add_to_cart_url() ) {
return;
}
$product_url = $product->add_to_cart_url();
$button_text = $product->single_add_to_cart_text();
/**
* The code below outputs the edited button with target="_blank" added to the html markup.
*/
do_action( 'woocommerce_before_add_to_cart_button' ); ?>
<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>
<?php do_action( 'woocommerce_after_add_to_cart_button' );
}Con questo script, entrambi gli hook woocommerce_loop_add_to_cart_link e woocommerce_external_add_to_cart sono stati utilizzati rispettivamente per le pagine del negozio e dei prodotti. La differenza tra add_filter () e add_action () è che mentre il primo viene utilizzato per modificare i valori delle variabili nella funzione esistente, il secondo (add_action ()) viene utilizzato per sostituire il codice nella funzione.
La funzione remove_action () aiuta a svincolare la funzione predefinita associata all’hook woocommerce_external_add_to_cart. Ciò è necessario perché la funzione predefinita esegue il rendering del pulsante Acquista prodotto e se questa funzione predefinita non viene sganciata, il pulsante verrà visualizzato due volte nella pagina Prodotto, e si aprirà il collegamento nella stessa scheda (come definito dalla funzione predefinita) e l’altro pulsante (reso dalla nostra funzione ts_external_add_to_cart) aprirà il collegamento in una nuova scheda.
Entrambi i pulsanti (nella pagina del negozio e nella pagina del prodotto) apriranno ora il prodotto in una nuova scheda del browser, assicurando così che l’utente possa tornare al sito ogni volta che lo desidera, cambiando scheda o finestra.
Soluzione tramite Plugin
Questa è sicuramente la soluzione più pratica se non volete metter mani a script o file php del sito. Esiste infatti un plugin per WordPress studiato per svolgere la funzione di cui abbiamo bisogno. Basta installare WooCommerce External Product New Tab ed attivarlo per poter aprire tutti i link di WooCommerce in una nuova finestra.
