基於產品類型的 WooCommerce 的“添加到購物車”按鈕旁邊的自定義按鈕

Question

我想在主商店頁面和單個產品頁面上根據產品類型在 WooCommerce 的“添加到購物車”按鈕旁邊添加一個自定義按鈕“查看演示”。

我已經完成了以下步驟：

將代碼添加到主題文件header.php ：

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

使用“TC Custom 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 hooks 。

您不再需要jQuery 腳本以及位於header.php文件中的 javascript，因此您可以刪除它們。

使用get_field()而不是the_field （感謝Deepti chipdey ）只獲取echoed字符串中連接的值。

將此代碼片段粘貼到位於活動子主題或主題文件夾中的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

出於某種原因， LoicTheAztec的回答對我沒有幫助。

這是有效的：

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

希望對他們的旅程有所幫助。

Answer 3

改變

the_field('url_demo');

到

 get_field('url_demo');

Answer 4

幫助，我怎樣才能將它放在添加到購物車按鈕上方？

定位在這里