如何使用 WooCommerce Hooks - 完整指南

已發表: 2022-05-03

在本文中，我們將討論如何根據您的要求使用 WooCommerce Hooks 來擴展您的 WooCommerce 商店。

有沒有想過 WordPress 是如何變得如此龐大的？ 超過 40% 的世界網站現在使用 WordPress 作為他們的 CMS。 這一切都是通過鉤子和過濾器實現的，人們使用這些鉤子和過濾器創建了數千個插件。

有時你可能會聽到有人說 PHP 很快就會消亡，但 WordPress 的份額繼續增長，而 WordPress 完全基於 PHP。 好吧，只有時間會證明一切。

如果您從未開發過 WordPress 插件，那麼您必須查看本指南，因為您必須知道如何創建 WordPress 插件才能使用本指南。

目錄

什麼是鉤子？

可以在 WordPress 中編輯或添加代碼，而無需使用鉤子編輯核心文件。

WordPress 和 WooCommerce 廣泛使用鉤子，這是 WordPress 和 WooCommerce 開發人員可以自定義的功能。 鉤子有兩種

  1. Actions ：這些類型的鉤子允許您在觸發時執行自定義代碼。
  2. 過濾器：過濾器掛鉤允許您在通過某些函數時操縱和返回一個值（例如，產品價格）。

WooCommerce 是一個 WordPress 插件，它也是使用 Actions 和 Hooks 創建的，但是，每個插件還可以創建自己的 Hooks 和 Filter，其他插件開發人員可以使用它們來進一步擴展插件的功能。

WooCommerce 鉤子

現在在本教程中，我們將解釋各種 WooCommerce 鉤子，還將為您提供視覺示例和代碼示例。 最初我們的插件代碼看起來像

<?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberpanel.net * Description: CyberPanel Tutorial * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberpanel.net * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); }

隨著我們繼續教程，我們將繼續向該文件添加更多代碼。

產品 WooCommerce 鉤子

我們將首先從您可以在產品頁面上使用的鉤子開始，稍後我們將為您提供一個代碼示例，說明如何使用woocommerce_before_single_product在您的產品頂部顯示一些東西。

鉤子顯示在產品頁面的頂部和底部

  • woocommerce_before_main_content
  • woocommerce_after_main_content
woocommerce 掛鉤

產品描述上方和下方顯示的掛鉤

  • 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_share

評論中顯示的鉤子

  • woocommerce_review_before
  • woocommerce_review_before_comment_meta
  • woocommerce_review_meta
  • woocommerce_review_before_comment_text
  • woocommerce_review_comment_text
  • woocommerce_review_after_comment_text

woocommerce_before_single_product

現在假設您想在單個產品頁面的頂部顯示一些東西，您可以使用名為woocommerce_before_single_product的 WooCommerce Hooks，我們的代碼如下所示：

 add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; }

現在您可以在下圖中看到hello world打印在產品圖像的頂部

同樣，您可以使用下表中的其他鉤子在產品頁面上添加信息。 我們插件文件的當前外觀：

 <?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberwp.cloud * Description: Manage multiple CyberPanel installations via WordPress. * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberwp.cloud * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); } add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; }

購物車 WooCommerce 掛鉤

現在讓我們看看購物車頁面上使用的所有鉤子，為方便起見，分為三類。

購物車中產品列表前顯示的掛鉤

  • woocommerce_before_cart
  • woocommerce_before_cart_table
  • woocommerce_before_cart_contents
  • woocommerce_cart_contents
  • woocommerce_after_cart_contents

購物車中產品列表後顯示的掛鉤

  • woocommerce_cart_coupon
  • woocommerce_cart_actions
  • woocommerce_after_cart_table
  • woocommerce_cart_collat​​erals
  • woocommerce_before_cart_totals

訂單結束時顯示的掛鉤

  • 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_cart_is_empty

woocommerce_before_cart

讓我們看看我們如何使用woocommerce_before_cart鉤子在購物車錶之前顯示一些東西

代碼片段是

add_action( 'woocommerce_before_cart', 'woocommerce_before_cart_custom', 10, 0 ); function woocommerce_before_cart_custom() { echo "before cart content"; }

最終代碼將如下所示

<?php /** * Plugin Name: CyberPanel * Plugin URI: https://cyberpanel.net * Description: CyberPanel Tutorial * Version: 1.0.0 * Requires at least: 5.2 * Requires PHP: 7.1 * Author: Usman Nasir * Author URI: https://cyberpanel.net * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */ if (!defined('WPINC')) { die("Please don't run via command line."); } add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices_custom', 10 ); function woocommerce_output_all_notices_custom() { echo "hello world"; } add_action( 'woocommerce_before_cart', 'woocommerce_before_cart_custom', 10, 0 ); function woocommerce_before_cart_custom() { echo "before cart content"; }

同樣，您可以在代碼中使用其他掛鉤，並且您幾乎可以對代碼執行任何操作。

結帳 - WooCommerce 鉤子

結帳頁面是 WooCommerce 商店中非常重要且功能強大的頁面。 下面提到了結帳頁面上使用的多種類別的鉤子。

在用戶聯繫信息形式之前使用的鉤子

  • woocommerce_before_checkout_form
  • woocommerce_checkout_before_customer_details
  • woocommerce_checkout_billing
  • woocommerce_before_checkout_billing_form

用於設置帳單詳細信息標記的掛鉤

  • woocommerce_after_checkout_billing_form
  • woocommerce_checkout_shipping
  • woocommerce_before_order_notes
  • woocommerce_after_order_notes

產品匯總前按順序使用的掛鉤

  • 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_before_order_total
  • woocommerce_review_order_after_order_total

訂單下方顯示的掛鉤

  • woocommerce_checkout_order_review
  • woocommerce_review_order_before_payment
  • woocommerce_review_order_before_submit
  • woocommerce_review_order_after_submit
  • woocommerce_review_order_after_payment
  • woocommerce_after_checkout_form

WooCommerce 類別掛鉤

顯示類別標題

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_shop_loop_item_title

結論

我們已盡力為您提供幾乎所有可用於擴展 WooCommerce 商店的導入鉤子的可視化表示。

除此之外，我們還提供了兩個實用的代碼示例來展示在您的插件代碼中使用這些鉤子是多麼容易。 您可以輕鬆使用這些 WooCommerce 掛鉤，甚至添加結帳字段或添加輸入框，以便在用戶的訂單過程中收集更多信息。

您手頭有無限的可能性，如果您仍有任何問題，請隨時在下面的評論框中提出。