Question

我想添加一个自定义按钮＆＃34;查看演示＆＃34;旁边＆＃34;添加到购物车＆＃34; WooCommerce的按钮基于产品类型，在主要商店页面和单个产品页面上。

我已经完成了这个步骤：

将代码添加到主题文件header.php：

<script>var url_demo = "<?php echo the_field('url_demo'); ?>"</script>

使用＆＃34; TC Custom JavaScript＆＃34;添加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;显示在主店页面和单个产品页面上。

但我现在遇到了一些问题，＆＃34;查看演示＆＃34;按钮链接仅在单个产品页面上正确，而在商店主页上则是＆＃34;查看演示＆＃34;按钮，链接到相同的网址。我的代码上面错了吗？

我的问题是，如何添加＆＃34;查看演示＆＃34;按钮（主店铺页面和单个产品页面上）仅显示特定产品类型，例如仅显示在类别主题上？最后，有没有其他方法来添加演示链接而不像上面的方法那样编辑header.php文件？如果主题更新，我只是期待header.php文件重置。

Answer 1

我正在使用另一种方式： WooCommerce挂钩。

您不再需要 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

更改

the_field('url_demo');

到

 get_field('url_demo');

Answer 3

出于某种原因，LoicTheAztec的answer没有为我做这件事。

这是有效的：

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

希望能帮助某人旅行。

根据产品类型，WooCommerce的“添加到购物车”按钮旁边的自定义按钮

3 个答案: