基于产品类型的 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

帮助，我怎样才能将它放在添加到购物车按钮上方？

定位在这里