WooCommerceの "カートに追加"ボタンの隣にカスタムボタンを追加

Question

私はWooCommerceの "カートに追加"ボタンの横にカスタムボタンを追加します。

たとえば、私のWooCommerce製品はウェブサイトのテーマの一部です。顧客には[デモの表示]ボタンを押してデモページを表示できるように、[カートに追加]ボタンの横に[デモの表示] "彼らは"カートに追加 "ボタンを押すことを決定する前に。デモページも新しいウィンドウで開きます。

私は "TCカスタム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="http://pink-demo.akunikah.com/" target="_blank">View Demo</a>'); 
}); 

それが仕事です。これらのコードは、ショップのホームページと単一商品ページの[カートに入れる]ボタンの横にある[デモの表示]を作成します。

問題は、すべての製品に同じビューボタンリンクがあるため、[デモの表示]ボタンのリンクはすべての製品で同じです。

私が望むのは、それぞれの製品には独自の「デモの表示」リンクがあります。私は各テーマ製品のカスタムフィールドを追加するACFプラグインを使用しようとしました。私のコードは次のようになりました：

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="<?php the_field('url_demo'); ?>" target="_blank">View Demo</a>'); 
}); 

これはうまくいきません。 「デモの表示」ボタンが消えて消えます。

誰でも問題を解決できますか？ [デモの表示]ボタンをクリックすると、カスタムフィールドに定義された製品デモページに基づいて、別のページへのリンクが表示されます。

Answer 1

あなたはecho PHP関数を使用する必要があります：href="<?php echo the_field('url_demo'); ?>"。

それとも、のようなheader.php何かで追加することができます。

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

、その後、あなたのjQueryのスクリプトを更新：

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