Benutzerdefinierte Schaltfläche neben "ADD TO CART" Schaltfläche von WooCommerce basierend auf Produkttyp

Question

Ich möchte eine benutzerdefinierte Schaltfläche "Demo anzeigen" neben "In den Warenkorb" Schaltfläche von WooCommerce basierend auf Produkttyp, sowohl auf Hauptgeschäft Seite und einzelne Produktseite.

Ich habe diesen Schritten:

Add Code Themendatei header.php:

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

hinzufügen Skript jQuery "TC Benutzerdefinierte JavaScript" Plugin:

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

Es ist Arbeit, Die Custom-Schaltfläche "Demo anzeigen" wird auf der Haupt-Shop-Seite und auf der einzelnen Produktseite angezeigt.

Aber ich habe jetzt ein Problem, der Link "Demo anzeigen" nur auf der Seite Einzelprodukt korrekt, während auf der Hauptseite des Shops die Schaltfläche "Demo anzeigen", Link zur selben URL. Ist mein Code falsch?

Meine Fragen sind, wie "View Demo" -Taste (sowohl auf Haupt-Shop-Seite und einzelne Produktseite) hinzufügen, die nur für spezifische Produkttyp zeigen, zum Beispiel nur in der Kategorie anzeigen Theme? Zuletzt, gibt es eine andere Möglichkeit, Demo-Link hinzuzufügen, ohne die header.php Datei wie obige Methode zu bearbeiten? Ich erwarte nur die header.php Datei zurückgesetzt, wenn das Thema aktualisiert.

Answer 1

Ich benutze einen anderen Weg, es zu tun: WooCommerce Haken.

Sie benötigen die jQuery-Skript nicht mehr und auch die in Ihrer header.php Datei befindet JavaScript aktivieren, damit Sie sie löschen.

Mit get_field() statt the_field (dank Deepti chipdey) nur den Wert in dem echoed Zeichenfolge verkettet zu erhalten.

Fügen Sie diesen Code-Schnipsel in Ihre function.php Datei in Ihrem aktiven Kind Thema oder Themen Ordner:

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

I Ziel haben die verwendet Haken den Warenkorb Taste auf Shop-Seite zum Anzeigen und in einzelnen Produktseiten, um Ihre Demo anzuzeigen Taste nach, kaufen Sie die Senkung der Priorität.

Answer 2

ändern

the_field('url_demo'); 

zu

get_field('url_demo'); 

Answer 3

Aus irgendeinem Grund LoicTheAztec ‚s answer tat es nicht für mich.

Hier ist, was funktioniert hat:

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'); 

Hoffnung, dass jemand auf ihrer Reise hilft.