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

Posted 2023-02-24

【中文标题】基于产品类型的 WooCommerce 的“添加到购物车”按钮旁边的自定义按钮

【英文标题】：Custom Button next to “ADD TO CART” button of WooCommerce based on Product Type

【发布时间】：2016-09-10 18:14:02

【问题描述】：

我想在主商店页面和单个产品页面上根据产品类型在 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 文件重置。

【问题讨论】：

能否提供您网站的链接？

当然，这里是link

很抱歉上次显示您对我的问题的回答。我已经删除了它。我已经实现了您的最后一个 UPDATED 2 答案，但我的网络出现故障并且无法访问，我不知道为什么。然后，我将 functions.php 重置为默认值，网络再次上线。现在，我只需使用get_field() 实现您的UPDATE，效果很好。一切顺利，就像我想要的一样。谢谢你的回答，我的问题解决了。

好的。你可以做到的。

哦，我使用了产品描述上的演示链接，因为我没有找到添加按钮旁边的添加到购物车的方法。由于现在可以完成，我将删除产品描述上的演示按钮。谢谢你记得我。

【参考方案1】：

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

您不再需要 jQuery 脚本以及位于 header.php 文件中的 javascript，因此您可以删除它们。

使用get_field() 而不是the_field（感谢Deepti chipdey）仅获取echoed 字符串中连接的值。

将此代码 sn-p 粘贴到位于活动子主题或主题文件夹中的 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 );

我已经瞄准了用于在商店页面和单个产品页面上显示 添加到购物车 按钮的钩子，在它之后显示您的 查看演示 按钮，购买降低优先级。

【讨论】：

我已经完成了这一步。但是看起来很奇怪，按钮的链接放在按钮外面，看看这个SS，还有这个single product page。并且按钮仍然显示在非“主题”产品类别上。我做错了吗？

【参考方案2】：

出于某种原因，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' );

希望对某人的旅程有所帮助。

【参考方案3】：

改变

the_field('url_demo');

到

 get_field('url_demo');

【讨论】：

这是 AFC 代码 the_field 默认会回显代码，但 get_filed 会在变量中为您提供值

这是 AFC 代码 the_field 默认回显字段值，但 get_filed 会在变量中为您提供值