如何使用 WooCommerce Hooks – 示例指南

已發表: 2020-07-07

你想學習如何使用 WooCommerce 鉤子嗎？ 你來對地方了！ 在本指南中，我們將向您展示如何使用操作和過濾器掛鉤。 此外，我們將為您提供許多可應用於您的 WooCommerce 商店的示例！

當您在您的網站上安裝 WooCommerce 時，您可以訪問一長串新鉤子，這些鉤子可以擴展您開發定制解決方案的可能性。 WooCommerce 掛鉤與原生 WordPress 掛鉤的工作方式相同，允許您在任何 WooCommerce 頁面上執行自定義腳本。

與 WordPress 鉤子類似，WooCommerce 鉤子有兩種類型：操​​作或過濾器。 動作鉤子允許您插入一些腳本，而過濾器鉤子接收原始數據並通過某種修改返回它。

WooCommerce 鉤子的語法

WooCommerce 鉤子遵循與 WordPress 鉤子相同的語法。

動作掛鉤

add_action('name_of_the_action_hook','your_action_hook_funcion');

過濾鉤

add_filter('name_of_the_filter_hook','your_filter_hook_funcion');

聲明鉤子後，您必須在函數中添加腳本：

 功能 your_action_hook_funcion(){
# 你的代碼在這裡
}

過濾器掛鉤必須在函數的參數中返回一些數據：

 函數 your_filter_hook_function($data){
# 修改 $data 的代碼
返回$數據；
}

要查看運行中的 WooCommerce 掛鉤，請將以下代碼粘貼到您的子主題的functions.php文件中：

 add_action('woocommerce_product_meta_start', 'quadlayers_woocommerce_hooks');
功能 quadlayers_woocommerce_hooks() {
迴聲'<img src="https://kokohai.com/wp-content/uploads/2020/02/logo-kokohai-tienda-de-merchandising-de-anime-y-maga-e1584570981420.png">'; // 更改為所需的圖像 url
}

這是最基本的示例，您將在其中向所有產品頁面添加圖像。 該圖像將顯示在“添加到購物車”按鈕下，位於產品元數據之前。

如您所見，鉤子的名稱woocommerce_product_meta_start是不言自明的，它準確地告訴您該鉤子允許您插入代碼的位置。

WooCommerce 鉤子列表

有超過一千個 WooCommerce 鉤子。 在這裡，我們將列出最受歡迎的鉤子，以便您熟悉最常見和最知名的鉤子。

我們根據與它們相關的頁面將列表劃分為多個部分。 鉤子的名稱是不言自明的，因此您在理解它們的作用時不會有問題。

  • 大車

    • woocommerce_before_cart
    • woocommerce_before_cart_table
    • woocommerce_before_cart_contents
    • woocommerce_cart_contents
    • woocommerce_after_cart_contents
    • woocommerce_cart_is_empty
    • woocommerce_cart_totals_before_shipping
    • woocommerce_cart_totals_after_shipping
    • woocommerce_cart_totals_before_order_total
    • woocommerce_cart_totals_after_order_total
    • woocommerce_after_shipping_rate
    • woocommerce_before_shipping_calculator
    • woocommerce_proceed_to_checkout
    • woocommerce_after_cart_totals
    • woocommerce_after_cart

  • 查看

    • woocommerce_before_checkout_form
    • woocommerce_checkout_before_customer_details
    • woocommerce_before_checkout_billing_form
    • woocommerce_checkout_shipping
    • woocommerce_checkout_after_order_review
    • woocommerce_checkout_after_customer_details
    • woocommerce_checkout_before_order_review
    • woocommerce_review_order_before_cart_contents
    • woocommerce_review_order_after_cart_contents
    • woocommerce_review_order_before_shipping
    • woocommerce_review_order_after_shipping
    • woocommerce_review_order_after_order_total
    • woocommerce_checkout_order_review
    • woocommerce_review_order_after_submit
    • woocommerce_review_order_after_payment
    • woocommerce_after_checkout_form
    • woocommerce_thankyou
  • 有關結帳掛鉤的更多信息，您可以查看我們關於 WooCommerce 結帳掛鉤的完整指南。

  • 產品

    • woocommerce_before_main_content
    • woocommerce_after_main_content
    • woocommerce_before_single_product_summary
    • woocommerce_after_single_product_summary
    • woocommerce_before_single_product
    • woocommerce_after_single_product
    • woocommerce_single_product_summary
    • woocommerce_product_meta_start
    • woocommerce_product_meta_end
    • woocommerce_review_before
    • woocommerce_review_before_comment_meta
    • woocommerce_review_before_comment_text
    • woocommerce_review_comment_text
    • woocommerce_review_after_comment_text

  • 分類法

    • woocommerce_archive_description
    • woocommerce_shop_loop
    • woocommerce_before_shop_loop
    • woocommerce_after_shop_loop
    • woocommerce_after_shop_loop_item
    • woocommerce_after_shop_loop_item_title
    • woocommerce_shop_loop_item_title

  • 帳戶

    • woocommerce_before_account_navigation
    • woocommerce_after_account_navigation
    • woocommerce_before_edit_account_address_form
    • woocommerce_account_content
    • woocommerce_before_my_account
    • woocommerce_after_my_account

  • 迷你推車

    • woocommerce_before_mini_cart
    • woocommerce_before_mini_cart_contents
    • woocommerce_mini_cart_contents
    • woocommerce_widget_shopping_cart_before_buttons
    • woocommerce_widget_shopping_cart_buttons
    • woocommerce_after_mini_cart

  • 電子郵件

    • woocommerce_email_after_order_table
    • woocommerce_email_before_order_table
    • woocommerce_email_customer_details
    • woocommerce_email_footer
    • woocommerce_email_header
    • woocommerce_email_order_details

  • 全球的

    • pre_get_product_search_form
    • woocommerce_breadcrumb
    • woocommerce_no_products_found

要查找 WooCommerce 鉤子的完整列表，您可以查看官方 WC 文檔。

WooCommerce 鉤子的有用示例

現在，讓我們看一些使用 WooCommerce 鉤子可以做的有用事情的例子。

注意：在開始之前，我們建議您創建一個子主題。 如果您不熟悉它們，可以查看我們的指南，了解如何創建子主題和最佳子主題插件列表。

如果您剛開始使用鉤子，您可以簡單地複制這些腳本並將它們粘貼到您的子主題的functions.php文件中。 然後，當您感覺更舒服時，您可以編輯腳本並創建不同的邏輯。

向商店頁面添加描述

默認情況下，商店頁面不顯示說明。 但是，您可以使用woocommerce_archive_description掛鉤啟用它，如下所示：

向 WooCommerce 商店頁面添加描述

 功能 quadlayers_shop_description() {
$description = '<p>歡迎光臨我的店鋪，請多多包涵，謝謝。</p>';
迴聲$描述；
}

add_action('woocommerce_archive_description', 'quadlayers_shop_description');

添加到購物車按鈕後添加信息說明

WooCommerce 購物車掛鉤允許您在購物車頁面的許多部分中插入自定義腳本。 在這裡，我們將向您展示如何在添加到購物車按鈕之後添加文本。

將文本添加到購物車按鈕 woocommerce
此腳本將在“添加到購物車”按鈕後打印自定義文本。

 add_action（'woocommerce_after_add_to_cart_form'，'quadlayers_after_addtocart_button'）；
功能 quadlayers_after_addtocart_button() {
	// 注意：將您的類別 slugs 替換為“音樂”&& 將 /delivery-costs/ 替換為有效的 url
	if ( is_product() && has_term( array( 'music' ), 'product_cat' ) ) {
		echo '<div></div><div>;<a href="/delivery-costs/" target="_blank" rel="noopener"><i class="fa fa-truck" aria-hidden=" true"></i> 滿 100 美元即可免費送貨；</a></div>
'; } }

例如，您可以使用它來推廣需要最低消費或免費送貨的折扣。

代碼說明

  • 鉤子woocommerce_after_add_to_cart_form在按鈕之後打印 HTML 代碼。
  • 我們檢查當前頁面是否為產品頁面以及是否有我們指定的類別。
  • 在數組中使用類別 slug。 這樣，您可以檢查多個類別。
  • 回顯內容允許 HTML 標記、變量和 PHP 範圍內的任何其他內容。

向特定產品分類添加文本

現在，讓我們看看如何使用 WooCommerce 鉤子在具有特定標籤的產品中顯示消息。 例如，我們將顯示一條消息，為某些產品提供折扣。

將文本添加到特定產品標籤 woocommerce

記得先標記產品。

 add_action（'woocommerce_before_single_product'，'my_product_notice_function'）；
功能 my_product_notice_function() { 
if ( is_product() && has_term( 'discount-25','product_tag' ) ) {
echo '<p><strong>此產品申請 48 小時內 25% 的折扣！</strong></p>';
}
}

代碼說明

    1. 我們使用woocommerce_before_single_product鉤子在產品頁面頂部顯示一條消息。
    2. 在函數內部，我們使用is_product()的條件來確保它是一個產品頁面。
    3. has_term()檢查當前產品是否有“discount-25”標籤。
    4. 然後，在 if 語句中打印您的消息。

阻止已註銷用戶的購買

WooCommerce 鉤子允許您為註銷的用戶禁用產品頁面上的添加到購物車按鈕。 這對於僅對訂閱者或會員可用的產品或優惠很有用。 為了完成這個示例，我們將添加第二個鉤子以在禁用購買按鈕時顯示消息。

為已註銷的用戶阻止購買

woocommerce_is_purchasable過濾器掛鉤將阻止購買，而woocommerce_before_single_product操作掛鉤將顯示消息。

 add_action('woocommerce_before_single_product', 'quadlayers_add_message');
add_filter('woocommerce_is_purchasable', 'quadlayers_block_admin_purchase');
功能 quadlayers_block_admin_purchase($block) {
if ( is_user_logged_in() ):return true;
否則：返回假；
萬一;
}

函數 quadlayers_add_message( ){
if ( !is_user_logged_in() ):echo '<H2>請登錄購買此產品</h2>';
萬一;
}

代碼說明

  1. 我們使用 action hook 來打印消息，使用 filter hook 來禁用Add to cart按鈕。
  2. 如果用戶已登錄，則woocommerce_is_purchasable過濾器掛鉤將為 true，如果用戶已註銷，則為 false。
  3. 我們還使用條件if()語句將條件僅應用於兩個功能中的註銷用戶（禁用添加到購物車按鈕和消息）。
  4. 最後，我們為消息添加了一些 CSS 樣式，包含在 H2 HTML 標記中。

如何充分利用 WooCommerce Hooks？

總之，WooCommerce 鉤子是自定義網站的好工具。 有數百個鉤子可供使用，它們都遵循相同的語法。 因此，我們鼓勵您查看示例並獲得一些靈感，以在您的網站上應用您需要的鉤子。

Hooks 可讓您改進商店的任何區域：從結帳到購物車再到產品頁面、分類法等等！ 因此，如果您想充分利用它們，請繼續玩，讓我們知道情況如何。 如果您想了解有關結帳掛鉤的更多詳細信息，可以查看我們的結帳掛鉤指南。

最後，如果您有任何問題，請隨時與我們聯繫。 我們會盡力幫助您！