問題描述
我想根據產品類型在 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.
我已經完成了以下步驟:
I've done this steps:
添加代碼到主題文件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 hooks.
I am using another way to do it: WooCommerce hooks.
您不再需要 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(感謝 Deeptichipdey) 只獲取在 echoed 字符串中連接的值.
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“添加到購物車"按鈕旁邊的自定義按鈕的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！