Question

我想在＆＃34;添加到购物车旁边添加一个自定义按钮＆＃34; WooCommerce的按钮。

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

我使用＆＃34; TC Custom JavaScript＆＃34;尝试了以下代码。插件：

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

它的工作。这些代码将创建＆＃34;查看演示＆＃34;旁边＆＃34;添加到购物车＆＃34;商店主页和单品页面上的按钮。

问题是，所有产品都具有相同的View Button Link，因此View Demo按钮的链接在所有产品上都是相同的。

我想要的是每个产品都有自己的＆＃34;查看演示＆＃34;链接。我尝试使用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>');
});

它不起作用。按钮＆＃34;查看演示＆＃34;消失并消失。

任何人都可以帮我解决问题吗？如何添加自定义＆＃34;查看演示＆＃34;按钮旁边的＆＃34;添加到购物车＆＃34;按钮，以及＆＃34;查看演示＆＃34;按钮链接到不同的页面，基于自定义字段中定义的产品演示页面？

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

在＆＃34;添加到购物车＆＃34;旁边添加自定义按钮WooCommerce的按钮

1 个答案: