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

I want add a custom Button "View Demo" next to "Add to Cart" button of WooCommerce based on Product Type, both on main shop page and single product page.

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

I've done this steps:

我已经完成了这个步骤:

Add code to theme file header.php:

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

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

Add jQuery script using "TC Custom JavaScript" plugin:

使用“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>');
});

It's work, the Custom button "View Demo" shown on main shop page and single product page.

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

But I've some problem now, the "View Demo" button link only correct on Single Product page, while on shop main page the "View Demo" button, link to the same url. Is my code above wrong?

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

My questions are, how to add "View Demo" button (both on main shop page and single product page) that only show for spesific product type, for example only show on category Theme? Last, is there any other way to add demo link without editing the header.php file like above method? I just anticipating the header.php file reset if the theme updated.

我的问题是,如何添加“查看演示”按钮(主商店页面和单个产品页面)仅显示特定产品类型,例如仅显示类别主题?最后,有没有其他方法来添加演示链接而不像上面的方法那样编辑header.php文件?如果主题更新,我只是期待header.php文件重置。

3 个解决方案

#1

I am using another way to do it: WooCommerce hooks.

我正在使用另一种方式来做到这一点:WooCommerce钩子。

You don't need anymore the jQuery script and also the javascript located in your header.php file, so you can erase them.

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

Using get_field() instead of the_field (thanks to Deepti chipdey) to get only the value concatenated in the echoed string.

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

Paste this code snippet in your function.php file located in your active child theme or theme folder:

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

I have target the hooks used to display Add to cart button on shop page and in single product pages, to display your View demo button after it, buy lowering the priority.

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

#2

Change

the_field('url_demo');

 get_field('url_demo');

#3

For some reason LoicTheAztec's answer did not do it for me.

出于某种原因,LoicTheAztec的答案并没有为我做到。

Here is what worked:

这是有效的:

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

Hope that helps someone in their journey.

希望能帮助某人旅行。

#1