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

debugcn 发表于 Dev

这个单词

我想根据产品类型在主商店页面和单个产品页面上的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>');
});

工作正常，在主商店页面和单个产品页面上显示了“自定义”按钮“查看演示”。

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

我的问题是，如何添加仅针对特殊产品类型显示的“查看演示”按钮（在主要商店页面和单个产品页面上），例如仅显示在主题类别上？最后，还有其他方法可以header.php像上面的方法一样在不编辑文件的情况下添加演示链接吗？我只是预计header.php如果主题更新，文件将重置。

LoicTheAztec

我正在使用另一种方法：WooCommerce hooks。

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

我的目标是用于在商店页面和单个产品页面上显示“添加到购物车”按钮的挂钩，以在其后显示“查看演示”按钮，购买会降低优先级。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。