我想在WooCommerce的"添加到购物车"按钮旁边添加一个自定义按钮。
例如，我的WooCommerce产品是网站主题的一部分，我想在"添加到购物车"按钮旁边添加一个自定义按钮"查看演示"，这样客户可以在决定按下"添加到车"按钮之前，通过按下按钮"查看展示"来查看演示页面。演示页面也会在新窗口中打开。
我使用"TC自定义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>');
});
这不是工作。"查看演示"按钮消失了。
有人能帮我解决问题吗？如何在"添加到购物车"按钮旁边添加一个自定义的"查看演示"按钮，并根据自定义字段中定义的产品演示页面将"观看演示"按钮链接到不同的页面？
可能需要使用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>');
});