Pulsante personalizzato accanto al pulsante "AGGIUNGI AL CARRELLO" di WooCommerce in base al tipo di prodotto

Question

Desidero aggiungere un pulsante personalizzato "Visualizza demo" accanto al pulsante "Aggiungi al carrello" di WooCommerce in base al tipo di prodotto, sia nella pagina principale del negozio che in pagina del singolo prodotto.

Ho fatto questa procedura:

code Aggiungi al file del tema header.php:

<script>var url_demo = "<?php echo the_field('url_demo'); ?>"</script> 

Aggiungi script jQuery tramite plug-in "TC personalizzato JavaScript":

jQuery(function($) { 
$('.add_to_cart_button, .single_add_to_cart_button').after(' <a class="button demo_button" style="padding-right: 0.75em;padding-left: 0.75em;margin-left: 8px; background-color: #0ebc30;" href="'+url_demo+'" target="_blank">View Demo</a>'); 
}); 

E 'un lavoro, il pulsante personalizzato "Visualizza demo" visualizzato nella pagina principale del negozio e nella pagina del singolo prodotto.

Ma ho qualche problema ora, la "Guarda la demo" legame unico tasto corretto a pagina singola del prodotto, mentre sulla pagina principale del negozio il pulsante "Guarda la demo", il link allo stesso URL. Il mio codice è sopra sbagliato?

Le mie domande sono, come aggiungere il pulsante "Visualizza Demo" (sia nella pagina principale del negozio che nella pagina del singolo prodotto) che viene visualizzato solo per tipo di prodotto spesifico, ad esempio solo sulla categoria Tema? Infine, c'è un altro modo per aggiungere il link demo senza modificare il file header.php come metodo precedente? Ho appena anticipato il reset del file header.php se il tema è stato aggiornato.

Answer 1

Sto usando un altro modo per farlo: Ganci WooCommerce.

Non è necessario più lo script jQuery e anche il javascript trova nel file header.php , in modo da poterli cancellare.

Utilizzando get_field() anziché the_field (grazie a Deepti chipdey) per ottenere soltanto il valore concatenato nella stringa echoed.

Incolla questo frammento di codice nella vostra function.php file che si trova nella cartella del tema bambino o tema attivo:

function wc_shop_demo_button() { 
    echo '<a class="button demo_button" style="padding-right: 0.75em;padding-left: 0.75em;margin-left: 8px; background-color: #0ebc30;" href="'.get_field("url_demo").'" target="_blank">View Demo</a>'; 
} 
add_action('woocommerce_after_shop_loop_item', 'wc_shop_demo_button', 20); 
add_action('woocommerce_after_add_to_cart_button', 'wc_shop_demo_button', 20); 

devo indirizzare i ganci utilizzati per visualizzare Aggiungi al carrello pulsante a pagina negozio e nelle pagine dei singoli prodotti, per visualizzare il tuo pulsante demo demo, abbassa la priorità.

Answer 2

Change

the_field('url_demo'); 

a

get_field('url_demo'); 

Answer 3

Per qualche ragione LoicTheAztec s' answer non ha fatto per me.

Ecco cosa ha funzionato:

function wc_shop_demo_button() { 
    echo '<a class="button demo_button" href="'.get_field("url_demo").'" target="_blank">View Demo</a>'; 
} 
add_action('woocommerce_after_add_to_cart_button', 'wc_shop_demo_button'); 

Speranza che aiuta qualcuno nel loro viaggio.