javascript - 在 WooCommerce 的 "ADD TO CART"按钮旁边添加自定义按钮

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