Как использовать WooCommerce Hooks — полное руководство

Опубликовано: 2022-05-03

В этой статье мы обсудим, как вы можете использовать WooCommerce Hooks для расширения вашего магазина WooCommerce в соответствии с вашими требованиями.

Вы когда-нибудь задумывались, как WordPress стал таким большим? Более 40% мировых веб-сайтов сейчас используют WordPress в качестве своей CMS. Все это стало возможным благодаря хукам и фильтрам, с помощью которых люди создали тысячи плагинов.

Время от времени вы можете услышать, как люди говорят, что PHP скоро умрет, но доля WordPress продолжает расти, а WordPress полностью основан на PHP. Ну только время покажет.

Если вы никогда не разрабатывали плагин для WordPress, вам необходимо ознакомиться с этим руководством, потому что вы должны знать, как создать плагин для WordPress, прежде чем сможете использовать это руководство.

Оглавление

Что такое крючки?

В WordPress можно редактировать или добавлять код без редактирования основных файлов с помощью хуков.

WordPress и WooCommerce широко используют хуки — функции, которые разработчики WordPress и WooCommerce могут настраивать. Крючки бывают двух видов

  1. Действия : эти типы хуков позволяют выполнять пользовательский код всякий раз, когда они срабатывают.
  2. Фильтры : хуки фильтров позволяют вам манипулировать и возвращать значение (например, цену продукта), когда оно передается через определенные функции.

WooCommerce — это плагин WordPress, который также был создан с использованием действий и хуков, однако каждый плагин также может создавать свои собственные хуки и фильтры, которые другие разработчики плагинов могут использовать для дальнейшего расширения функциональности плагина.

Крючки 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, называемые woocommerce_before_single_product , наш код для этого выглядел так:

 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_collaterals
  • 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 даже для добавления полей оформления заказа или добавления полей ввода для сбора дополнительной информации от пользователя во время процесса заказа.

У вас есть неограниченные возможности, если у вас все еще есть какие-либо вопросы, не стесняйтесь задавать их в поле для комментариев ниже.