根据产品类型，WooCommerce的“添加到购物车”按钮旁边的自定义按钮 [英] Custom Button next to “ADD TO CART” button of WooCommerce based on Product Type

问题描述

我想在主商店页面和单品页面上添加基于产品类型的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.

我已完成以下步骤：

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

Add code to theme file header.php:

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

使用TC Custom JavaScript插件添加jQuery脚本：

Add jQuery script using "TC Custom JavaScript" plugin:

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?

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

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.

推荐答案

<我正在使用另一种方式来做到这一点： WooCommerce挂钩。

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

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

使用 get_field（）而不是 the_field （感谢 Deepti chipdey ）只获取中连接的值echoed string。

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

将此代码段粘贴到位于活动子主题或主题文件夹中的 function.php 文件中：

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

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.

这篇关于根据产品类型，WooCommerce的“添加到购物车”按钮旁边的自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！