商品タイプに基づいてWooCommerceの[カートに追加]ボタンの横にあるカスタムボタン

Question

メインショップページと[商品タイプ]に基づいてWooCommerceの[カートに追加]ボタンの横にカスタムボタン "デモを表示"単一の製品ページ。

私は、これは、手順やった：

は、テーマファイルheader.phpにコードを追加します。

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

は "TCカスタムJavaScript" プラグインを使用して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>'); 
}); 

それが仕事です、メインのショップページと単一の製品ページに表示されているカスタムボタン「デモの表示」。

私はいくつかの問題を抱えていますが、「デモの表示」ボタンのリンクは「シングルプロダクト」ページのみで、ショップメインページの「デモの表示」ボタンは同じURLへのリンクです。私のコードは間違っていますか？

私の質問は、カテゴリのみに表示されるような、特定の製品タイプにのみ表示される「デモの表示」ボタン（メインショップページと単一の製品ページの両方に）を追加する方法ですか？？最後に、上記の方法のようにheader.phpファイルを編集せずにデモリンクを追加する方法はありますか？テーマが更新された場合、私はただheader.phpファイルリセットを予期しています。

Answer 1

私はそれを行う別の方法を使用しています：WooCommerceフック。

あなたがそれらを消去することができますので、あなたは、にもうjQueryのスクリプトともあなたのheader.phpのファイルにあるJavaScriptを必要としません。 echoed文字列に連結値のみを取得するためにget_field()の代わりに、the_field（Deepti chipdeyのおかげで）使用

。

あなたのアクティブな子テーマやテーマのフォルダにあなたのfunction.phpファイルにこのコードスニペットを貼り付けます。私はお店のページでカートに入れるボタンを表示するために使用されるフックを対象としている

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

単一の製品ページで、デモを表示すると、その後に優先度を下げる購入ボタンが表示されます。何らかの理由で

Answer 2

変更

get_field('url_demo'); 

Answer 3

へ

the_field('url_demo'); 

をLoicTheAztecさんanswerは私のためにそれをしませんでした。彼らの旅の誰かを助け

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

希望を：ここで

は働いていたものです。