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

Question

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

我已经完成了这个步骤:

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

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

使用"TC Custom JavaScript"插件添加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>');
});

这是工作,主店铺页面和单个产品页面上显示的自定义按钮"查看演示".

但我现在遇到一些问题,"查看演示"按钮链接仅在单个产品页面上正确,而在商店主页面上的"查看演示"按钮,链接到相同的网址.我的代码上面错了吗？

我的问题是,如何添加"查看演示"按钮(主商店页面和单个产品页面),仅显示特定产品类型,例如仅显示类别主题？最后,有没有其他方法添加演示链接而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 );

我已经定位了用于在商店页面和单个产品页面中显示添加到购物车按钮的钩子,在它之后显示您的View演示按钮,购买降低优先级.