在 WooCommerce 的“添加到购物车”按钮旁边添加自定义按钮

Question

我想在 WooCommerce 的“添加到购物车”按钮旁边添加一个自定义按钮。

例如我的 WooCommerce 产品是一些网站主题，我想在“添加到购物车”按钮旁边添加一个自定义按钮“查看演示”，以便客户可以通过按“查看演示”按钮查看演示页面在他们决定按下“加入购物车”按钮之前。演示页面也在新窗口中打开。

我已经使用“TC Custom 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>');
});